[sgkalluri]

Hello everyone,

I have a grid table wherein one of variables is a drop down option.

One normally designs a drop down to have a fixed set of options, e.g. 'Yes', 'No' etc. However, in this case I need the drop down options to change based on the values of a few other variables of the grid.

To explain this further: Assume that the name of the grid is CGrid. It has three variables - Category1, Category2 and Score. The Score variable has a drop down control.

Now, the drop down options in Score depend on what values are stored in Category1 and Category2 in a particular row. E.g. if Category1 value is 'A' and Category2 value is B in row #1, then the drop down options of Score in row #1 would be '0', '1' and '2'. However, if Category1 = 'A' and Category2 = 'C' in row #2, then the drop down options of Score in row #2 would be '0', '1' only.

Can this be achieved in the grid itself?

I know that one can achieve this by copying Category1, Category2 values to variables outside of the grid, then populate another variable with the drop down values that depend on Category1 and Category2, and then bring the result back to the Score variable into the grid.

Thanks in advance.

SGK

[amosbatto]

This one took me a a while to figure out. Let's say you have a grid with the ID "scoreList" which has the following 3 fields:
- dropdown with ID "category1" that has values of "red" , "green" and "blue"
- dropdown with ID "category2" that has values of "plate", "cup" and "knife"
- dropdown with ID "score" that has values of 0, 1, 2, 3

The following JavaScript filters the list of options in the "score" dropdown box, depending on what was selected in the "category1" and "category2" fields:

Code: Select all

//function to get column number of a grid field:
function getGridColumnNo(gridId, fieldId) {
  var oColumns = $("#"+gridId).getInfo().columns;
  var columnNo = null;
  
  for (var i=0; i < oColumns.length; i++) {
    if (oColumns[i].id == fieldId) {
      columnNo = i+1; //+1 because grids count count from 1, not 0
      break;
    }
  }
  return columnNo;    
}

function setDropdownOptions(fieldId, newVal, oldVal) {
 
  //if a value changed in the category1 or category2 fields in the "scoreList" grid:
  if (fieldId.search(/^\[scoreList\]\[\d+\]\[category1\]/) == 0 || 
      fieldId.search(/^\[scoreList\]\[\d+\]\[category2\]/) == 0)   
  {
    
    var rowNo = fieldId.match(/\]\[(\d+)\]\[/)[1];
    var cat1Val = $("#scoreList").getValue(rowNo, getGridColumnNo("scoreList", "category1"));
    var cat2Val = $("#scoreList").getValue(rowNo, getGridColumnNo("scoreList", "category2"));

    var oField = $("[id='form[scoreList]["+rowNo+"][score]']");
    oField.prop("length", 0); //clear all existing options in dropdown
        
    //if category1=red and category2=plate, then set 0 and 2 as options in score dropdown
    if (cat1Val == 'red' && cat2Val == 'plate') {      
      oField.append('<option value="0">0</option>');
      oField.append('<option value="2">2</option>');
    }
    //if category1=green and category2=cup, then set 1 and 3 as options in score dropdown
    else if (cat1Val == 'green' && cat2Val == 'cup') {            
      oField.append('<option value="1">1</option>');
      oField.append('<option value="3">3</option>');
    }
    else {
      //oField.append('<option value="0">0</option>');     
      oField.append('<option value="1">1</option>');
      oField.append('<option value="2">2</option>');
      oField.append('<option value="3">3</option>');
    }      
  }
}
$("form").setOnchange(setDropdownOptions);

//set options in existing score dropdown boxes when the grid loads:
nRows = $("#scoreList").getNumberRows();

for (i=1; i <= nRows; i++) {
  //get original value of score dropdown
  var scoreCol = getGridColumnNo("scoreList", "score");
  var scoreVal = $("#scoreList").getValue(i, scoreCol);  
  
  var catCol = getGridColumnNo("scoreList", "category1");
  var catVal = $("#scoreList").getValue(i, catCol);
  setDropdownOptions('[scoreList]['+i+'][category1]', catVal, catVal);
  
  //reset original value:
  $("#scoreList").setValue(scoreVal, i, scoreCol);
}

Here is the DynaForm you can import to test it:

client info.json

(4.56 KiB) Downloaded 530 times

[sgkalluri]

Whoa! That was cool! You have solved a zillion things for me!

Thanks a lot Amos!

SGK

[sgkalluri]

Hello Amos,

The code works fine if the form in question is the only one. However, if the grid was part of a Sub Form, then I am not able to get the same result.

The use case is when the grid is part of Form B (a Sub Form of Form A), and I run Form A.

Many thanks for your guidance.

SGK

[hmdshariati]

what about mysql select dropdown?

[RezaEsmaeili69]

hi
how we can fill a dropdown in a grid whit the values of another grid in a dynaform.
notice that every two grids are in a same form.