database binding of jqwidget dropdownlist in grid cell

Question

In the jqwidget grid cellediting example(under jqxGrid left menu, open Editing/Editing), data is generated at client. How can I bind dropdownlist to database inside a asp .net MVC3 project?(You can see dropdownlist under product column in demo tab)

Answer 1

When initializing dropdownlist with database, one should bind it to datasource(or dataadapter), and should set selectedIndex. Then, for row update the selected value should be kept on select.

Column definition may be like:

{ 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 });
                      $(document).on('select', editor, function (event) {
                          selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                      });
                  }
}

The variable "selectedUrunId" should be defined globally, maybe like var selectedUrunId = -1; before jqxgrid initialization. Then in updaterow definition(it is in source definition) the selected value of dropdown should be used. It may be like:

if (selectedUrunId != undefined && selectedUrunId != -1) {
                    rowdata.UrunId = selectedUrunId;
                    selectedUrunId = -1;
                }

The overall scene for this scenario is:

        // prepare the data
        var gridSource = {
            datatype: "json",
            datafields: [{ name: 'KargoId' }, { name: 'UrunAdi' }, { name: 'UrunId', type: 'int' }],
            url: 'BindGrid',
            updaterow: function (rowid, rowdata) {
                // synchronize with the server - send update command  
                if (selectedUrunId != undefined && selectedUrunId != -1) {
                    rowdata.UrunId = selectedUrunId;
                    selectedUrunId = -1;
                }                   

                var data = $.param(rowdata);

                $.ajax({
                    dataType: 'json',
                    url: 'UpdateEditGrid',
                    data: data,
                    success: function (data, status, xhr) {
                        gridDataAdapter.dataBind();                            
                    },
                    error: function (xhr, status, error) {
                        alert(JSON.stringify(xhr));
                    }
                });
            }
        };

        var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

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

        var selectedUrunId = -1;
        var dropdownListAdapter = new $.jqx.dataAdapter(dropdownSource);

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: gridDataAdapter,
            editable: true,
            theme: theme,
            selectionmode: 'singlecell',
            columns: [
              { text: '#', datafield: 'KargoId', width: 40 },                  
              { 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 });
                      $(document).on('select', editor, function (event) {
                          selectedUrunId = editor.jqxDropDownList('getSelectedIndex');
                      });
                  }
              }]
        });

Answer 2

You can use a function called 'createeditor' and initialize the DropDownList inside.

Column definition:

{ text: 'Proyecto', columntype: 'dropdownlist', datafield: 'jobid', width: 10,
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxDropDownList({ displayMember: 'displaylabel', valueMember: 'catalogvalue', source: dropdownListAdapter });
                      }
}

The DropDownList's data adapter can be initialized by using a similar code:

source = {
    datatype: "xml",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' },
    { name: 'ContactTitle' },
    { name: 'City' },
    { name: 'Country' },
    { name: 'Address' }
    ],
    async: false,
    record: 'Table',
    url: 'Default.aspx/GetCustomers',
};
var dropdownListAdapter = new $.jqx.dataAdapter(source,
    {  contentType: 'application/json; charset=utf-8'}
);