Different select options for each row?

[alexwenbj]

Can I add different options for each row cell？for example, column 1 row 1 has options A/B/C and column1 row 2 has options C/D/E? Thank you in advance.

crivadavi commented 5 years ago

Sure, in the function initializeGrid supposing that your column name is '"color" you can set an EnumProvider with a new function to set the select values as a function of the row.

EditableGrid.prototype.initializeGrid = function() {
   this.setEnumProvider("color", new EnumProvider({ 

      // the function getOptionValuesForEdit is called each time the cell is edited
      // here we do only client-side processing, but you could use Ajax here to talk with your server
     // if you do, then don't forget to use Ajax in synchronous mode 
     getOptionValuesForEdit: function (grid, column, rowIndex) {             
           if (rowIndex == 4) return { "bl" : "Blue", "rd": "Red", "yl" : "Yellow" };
           else if (rowIndex == 5) return { "or" : "Orange", "wh": "White", "bk" : "Black" };
           return null;

           // or write whatever is your logic depending on the row
      }
    }));
}

alexwenbj commented 5 years ago

Thank you .But my options are pull from the server side, return with the data. My workaround is to custom the setCellRender() function:

this.setCellRenderer("charge_id", new CellRenderer({render: function(cell, value) {
 var str = "<select name='charge_id' class='form-control' onchange='JavaScript:test(this);'><option value='-1'>--Select Something--</option>";
  $.each(value, function( idx, vl ) {
  str += "<option value='"+idx+"'>"+vl+"</option>";
  });
  str +="</select>";
  cell.innerHTML = str;
 }}));

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[crivadavi]

Sure, in the function initializeGrid supposing that your column name is '"color" you can set an EnumProvider with a new function to set the select values as a function of the row.

EditableGrid.prototype.initializeGrid = function() {
   this.setEnumProvider("color", new EnumProvider({ 

      // the function getOptionValuesForEdit is called each time the cell is edited
      // here we do only client-side processing, but you could use Ajax here to talk with your server
     // if you do, then don't forget to use Ajax in synchronous mode 
     getOptionValuesForEdit: function (grid, column, rowIndex) {             
           if (rowIndex == 4) return { "bl" : "Blue", "rd": "Red", "yl" : "Yellow" };
           else if (rowIndex == 5) return { "or" : "Orange", "wh": "White", "bk" : "Black" };
           return null;

           // or write whatever is your logic depending on the row
      }
    }));
}

[alexwenbj]

Thank you .But my options are pull from the server side, return with the data. My workaround is to custom the setCellRender() function:

this.setCellRenderer("charge_id", new CellRenderer({render: function(cell, value) {
 var str = "<select name='charge_id' class='form-control' onchange='JavaScript:test(this);'><option value='-1'>--Select Something--</option>";
  $.each(value, function( idx, vl ) {
  str += "<option value='"+idx+"'>"+vl+"</option>";
  });
  str +="</select>";
  cell.innerHTML = str;
 }}));