jqxGrid/jqxDropDownList Demo

Demonstrate issue with endcelledit causing exception when table sorted.

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxDropDownList">
</div>
<div id='jqxgrid'></div>

JavaScript

var source = [
       "Affogato",
       "Americano",
       "Bicerin",
       "Breve",
       "Café Bombón",
       "Café au lait",
       "Caffé Corretto",
       "Café Crema",
       "Caffé Latte"];
         var source1=null;

   // Create a jqxDropDownList
   $("#jqxDropDownList").jqxDropDownList({
       source: source,
       theme: 'energyblue',
       width: '200px',
       height: '25px',
       selectedIndex: -1
   });$("#jqxgrid").jqxGrid(
        {
            width: '99.7%',
            height: '200px',
            source: source1,
            theme: 'mobile',
            columnsheight: 25,
            rowsheight: 30,
            showstatusbar: true,
            statusbarheight: 5,
            sortable: true,
            altrows: false,
            selectionmode: 'singlerow',
            showaggregates: true,
            autoshowloadelement: true,
            editable: true,

            columns: [
                { text: 'Description', dataField: 'description', width: '10%', hidden: false },
                { text: 'Width', dataField: 'Width', width: '10%', hidden: false },
                { text: 'Length', dataField: 'Length', width: '10%', hidden: false },
                { text: 'Price', dataField: 'Price', width: '20%', hidden: false, editable: false },
                { text: 'Serial', dataField: 'Serial', width: '8%', editable: false, hidden: false },
               ]
        });
        $("#jqxDropDownList").on('change', function (event) {
        var item=event.args;
        var index=item.index;
        source=item;
        source1.dataBind();
        var text=$("#jqxDropDownList").jqxDropDownList("getItem", index);
                alert('Value change to ' + text.label);
            });