jQuery UI Widgets Forums Grid Add row to key/values column

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Add row to key/values column #78707

    gonley
    Participant

    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;
              }          
            }
        ]                
      });
    Add row to key/values column #78725

    Dimitar
    Participant

    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/

    Add row to key/values column #78783

    gonley
    Participant

    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?

    Add row to key/values column #78787

    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.