jQuery UI Widgets Forums Grid Unique dropdown list for each row in a grid?

This topic contains 2 replies, has 2 voices, and was last updated by  scottt 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • scottt
    Participant

    Can we have a unique dropdown list that is based on the data in each row of a grid?

    We have data that is dependent on the row, with different dropdown lists for each row of the gird. Is this possible? All the demos have a single source for the dropdown list data.

    Possible to have it already part of the data array as well?


    admin
    Keymaster

    Hi Scott,

    The Grid has a functionality which allows you to build a custom editor for every row. You can look at it here https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowcelledit.htm?fluent. It uses the createeditor, initeditor and geteditorvalue column callbacks and depending on the edit row, a different editor is created an initialized. In your case, you can use different instances of jqxDropDownList for the different rows and set different data sources to the dropdownlist.

    Regards,
    Peter


    scottt
    Participant

    For anyone who finds this, and wants to load a drop-down from values inside their data object/array, here is my solution:

    var source =
    {
      localdata: data,
      datatype: "array",
      updaterow: function (rowid, rowdata, commit) {
           commit(true);
      },
      datafields:
      [
        { name: 'status', type: 'string' },
        { name: 'details', type: 'string' },
        { name: 'vendor', type: 'string' },
        { name: 'vendorarr', type: 'string' }
      ]
    };
    
    var dataAdapter = new $.jqx.dataAdapter(source);
    
     
     $("#jqxgrid").jqxGrid(
      {
        width: 1200,
        //height: 210,
        autoheight: true,
        source: dataAdapter,
        columnsresize: false,
        editable: true,
        editmode: 'selectedcell',
        columns: [
          { text: 'Status', datafield: 'status', width: 55, editable: false },
          { text: 'Details', datafield: 'details', width: 350, editable: false },
          { text: 'Vendor', columntype: 'dropdownlist', datafield: 'vendor', width: 125,
                  initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                      editor.jqxDropDownList({ source: dataAdapter.records[row].vendorarr.split(',') });
                  }
          },
        ]
      });
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.