Question

I’m trying to bind dropdownlist(inside jqxgrid cell) to database, but change event for dropdownlist (and at the same time row update function) works multiple times then grid is locked. Dropdownlist is bound to column having datafield “UrunAdi”. And, it is an asp .net mvc3 project. Any advice?

Code is:

var gridSource = {
            datatype: "json",
            datafields: [{ name: 'KargoId' }, { name: 'Ad' }, { name: 'Soyad' }, { name: 'UrunAdi' }, { name: 'UrunId', type: 'int' }, { name: 'Uygunluk', type: 'boolean' },
                         { name: 'YuklenmeTarihi', type: 'date' }, { name: 'Adet' }, { name: 'Fiyat'}],
            url: 'BindGrid',
            updaterow: function (rowid, rowdata) {                    
                var data = $.param(rowdata);
                //alert(data);
                $.ajax({
                    dataType: 'json',
                    url: 'UpdateEditGrid',
                    data: data,
                    success: function (data, status, xhr) {
                        // update command is executed.
                    }
                });
            }
        };

        var gridDataAdapter = new $.jqx.dataAdapter(gridSource, {
            downloadComplete: function (data, status, xhr) { },
            loadComplete: function (data) { $("#jqxgrid").jqxGrid('hidecolumn', 'UrunId'); },
            loadError: function (xhr, status, error) { alert(JSON.stringify(xhr)); }
        });

        var dropdownSource = {
            datatype: "json",
            datafields: [{ name: 'UrunId' }, { name: 'UrunAdi'}],
            url: 'BindDropdown'
        };

        var dropdownListAdapter = new $.jqx.dataAdapter(dropdownSource, { autoBind: true, async: false });

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: gridDataAdapter,
            editable: true,
            theme: theme,
            selectionmode: 'singlecell',
            columns: [
              { text: '#', datafield: 'KargoId', width: 40 },
              { text: 'Ad', columntype: 'textbox', datafield: 'Ad', width: 90 },
              { text: 'Soyad', datafield: 'Soyad', columntype: 'textbox', width: 90 },
              { text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
                  initeditor: function (row, cellvalue, editor) {
                      var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
                      editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
                      editor.bind('change', function (event) {
                          var selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                          $('#jqxgrid').jqxGrid('setcellvalue', row, "UrunId", selectedUrunId);
                      });
                  }
              },
              { text: 'UrunId', datafield: 'UrunId' },...

Answer 1

I change column definition for UrunAdi (dropdownlist column) to:

 { text: 'Urun', columntype: 'dropdownlist', datafield: 'UrunAdi', width: 177,
                  initeditor: function (row, cellvalue, editor) {
                      var urunId = $('#jqxgrid').jqxGrid('getcellvalue', row, "UrunId");
                      editor.jqxDropDownList({ displayMember: 'UrunAdi', source: dropdownListAdapter, selectedIndex: urunId });
                      editor.bind('change', function (event) {
                          selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                      });
                  }
              }

Only one difference:

deleting $('#jqxgrid').jqxGrid('setcellvalue', row, "UrunId", selectedUrunId); I think, “setcellvalue” event, triggers updaterow.