Add row to key/values column

[gonleyParticipant]

I try to add a row with a datafield stuschool into the grid. It have added to the grid but the value didn’t appear.

$("#prereggrid").jqxGrid(
  {
    width: 990,
    height: 450,                             
    columnsresize: true,
    editable: true,
    editmode: 'dblclick',    
    sortable: true,
    showtoolbar: true,
    rendertoolbar: function (toolbar) {
      var me = this;
      var container = $("<div style='margin: 5px;'></div>");
      toolbar.append(container);
      container.append('<input id="btnpreregaddrow" type="button" value="Add New Row" />');  
      container.append('<input style="margin-left: 5px;" id="btnpreregdelrow" type="button" value="Delete Selected Row" />');
      container.append('<input style="margin-left: 5px;" id="btnpreregsaverow" type="button" value="Save" />');    
      $("#btnpreregaddrow,#btnpreregdelrow,#btnpreregsaverow").jqxButton({theme: theme});
      // create new row.
      $("#btnpreregaddrow").on('click', function () {         
         var row = {};
         row['stuschool'] = "cc";         
         var commit = $("#prereggrid").jqxGrid('addrow', null, row);
      });
      // delete row.
      $("#btnpreregdelrow").on('click', function () {
         var selectedrowindex = $("#prereggrid").jqxGrid('getselectedrowindex');
         var rowscount = $("#prereggrid").jqxGrid('getdatainformation').rowscount;         
         if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
            var id = $("#prereggrid").jqxGrid('getrowid', selectedrowindex);            
            var commit = $("#prereggrid").jqxGrid('deleterow', id);
         }
      });                   
    },                                                       
    columns: [ 
        { text: 'School', datafield: 'stuschool', displayfield: 'programme', width: 200, columntype: 'dropdownlist',
          createeditor: function (row, value, editor) {
             editor.jqxDropDownList({ source: schoolAdapter, displayMember: 'programme', valueMember: 'id' });
          },                    
          validation: function (cell, value) {          
            alert(value.value);
            if (typeof value.value === "undefined") return { result: false, message: "Please select school" };            
            return true;
          }          
        }
    ]                
  });

[DimitarParticipant]

Hello gonley,

You would have to set the cell value to the datafield corresponding to the column’s displayfield, i.e. ‘programme’. Please try this code:

$("#btnpreregaddrow").on('click', function() {
    var row = {};
    row['programme'] = "cc";
    var commit = $("#prereggrid").jqxGrid('addrow', null, row);
});

We hope it helps.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gonleyParticipant]

Ok. It is working. When i want to display value with dataadapter from server. Should I set both value with stuschool and programme at datafield? Or can I merely set stuschool at datafield?

[DimitarParticipant]

Hi gonley,

This depends on your requirements. Generally, the displayfield is what is visible in the cell and acts as a column’s label. The datafield acts as a column’s value (when displayfield is set). This is best illustrated in the demo Keys/Values Column.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts