List grid with dependent dropdowns in multiple columns

[ypoovil]

Hi Isomorphic,

We have a Editable ListGrid, with Dropdowns in 3 columns as shown in the picture.

When user is in particular row, then he can see the drop down display values properly and select them but after selecting the values from each dropdown in one row and on navigating to the next row, the display field in the first dropdown retains as it is, but in the other 2 dropdowns value field will be displayed instead of display field.

PFB the code for the same, and let us know what is going wrong here ?

isc.ListGrid.create({
               height:127,
               width:"100%",
               alternateRecordStyles:true,
               autoDraw: true,
               canEdit:false,
               styleName:"attrGridBorder",
               baseStyle: "attrCritGridCell",
               leaveScrollbarGap: false,
               canSort:false,
                 fields:[
                       {name:"attribute", 
                           title:"Attribute", 
                           editorType:"select",
                           optionDataSource:"productAttributeDataSource",
                             displayField:"attributeName",
                                 valueField:"attributeId",
                                 width:"20%"
                       },
                       {name:"subAttribute",
                           title:"Sub Attribute",
                           editorType:"select",
                           autoFetchData:false,
                           optionDataSource:"productSubAttributeDataSource",
                           displayField:"subAttributeName",
                           valueField:"subAttributeId",
                           width:"10%",
                           editorProperties:{
                           getPickListFilterCriteria : function () {
                                       var attribute = this.grid.getEditedCell(this.rowNum, "attribute");
                                       if(attribute != null){
                                             return {"attr":attribute,"prevRecords":this.grid.data};
                                       }else{
                                             return {"attr":" ", "prevRecords":this.grid.data};
                                       }
                                    }
                       
                              }
                       },
                       {name:"value", 
                           title:"Value", 
                           editorType:"select",
                           optionDataSource:"productSubAttributeValueDataSource",
                           autoFetchData:false,
                           displayField:"subAttributeValueName",
                           valueField:"subAttributeValueId",
                           width:"10%",
                           editorProperties:{
                           getPickListFilterCriteria : function () {
                           var subAttribute = this.grid.getEditedCell(this.rowNum, "subAttribute");
                           var Attribute = this.grid.getEditedCell(this.rowNum, "attribute");
                           if(Attribute != null && subAttribute != null){
                                 return {"subAttr":subAttribute,"attr":Attribute};
                           }else{
                                 return {"subAttr":" ","attr":" "};
                           }
                       }
                       }
                       },
                       {name:"link",
                           align:"center",
                           type: "text",
                           defaultValue:"Remove",
                           canEdit:false,
                           width:"10%",
                           animateRemoveRecord:true
                       }

                       ],
                       getCellCSSText:function(record, rowNum, colNum){
                                       if (this.getFieldName(colNum) == "link") {  
                                             return "text-decoration:underline;cursor:pointer";
                                       }
                                     },
                              recordClick:function (viewer, record, recordNum, field, fieldNum, value, rawValue){       
                                       if(fieldNum == 3){
                                          this.removeSelectedData();
                                    }
                              }     
             })

[Isomorphic]

Make sure that the data returned for the optionDataSource fetch triggered by your setting of listGridField.optionDataSource contains valueField -> displayField pairs for every value that can appear in the field.

[ypoovil]

Please find below the code, which shows the mapping done to populate the Value field and Display Field in Action Class.
One important to mention, the First Dropdown’s Display value retains but the same does not happen in the next dropdowns :(. Am I going wrong somewhere in using EditorProperties and getPickListFilterCriteria

private void prepareSubAttributeRecords(List<PromoProductSubattributeVO> lstPromoProductSubAttributeVO, List<Map<String, String>> lstProductSubAttributeMap, List<String> lstMatchingRecords){
                                logger.debug("lstMatchingRecords: "+ lstMatchingRecords);

                                for (PromoProductSubattributeVO promoProductSubattributeVO : lstPromoProductSubAttributeVO) {
                                                Map<String, String> mapSubAttribute1 = new HashMap<String, String>();           
                                                mapSubAttribute1.put("subAttributeId",String.valueOf(promoProductSubattributeVO.getLSubAttributeId()));
                                                mapSubAttribute1.put("subAttributeName",promoProductSubattributeVO.getStrSubAttributeName());
                                                if (lstMatchingRecords == null || !lstMatchingRecords.contains(String.valueOf(promoProductSubattributeVO.getLSubAttributeId()))){ 
                                                                lstProductSubAttributeMap.add(mapSubAttribute1);
                                                }
                                }

                }

[Isomorphic]

Obviously, we can't run that code. What you need to do is compare the values in the dataset being provided to the grid to the values being provided in the optionDataSource response. Both are most easily seen with the RPC tab in the Developer Console.

[ypoovil]

Hello,

Still the issue is not resolved :(

Please refer to the image attached in the earlier posts.

When I am in row 1 of the list grid, the value maps for the columns are set according to the data fetched by the datasources.
Which means row 1 column 2 will have a value map fetched by the datasource depending on the value in row 1 column 1. So when I am in row 1 I can see the display values in all columns properly.

Now i move to row 2 or add another row and here since column is not a dependent drop down the value map contents for column 1 will remain same.
But when i try to fetch the values for column 2 depending on column 1 cell, the value map data fetched for this will be different from the value map which was set for row 1 , and so the display value for the row 1 column1 cell will be gone, displaying only the actual numeric value.

Please let me know if my understanding is right.
If this is the case then i think this may be a bug in SC.

[Isomorphic]

Please read the docs for listGridField.optionDataSource. You must return *all* value -> displayField mappings in the first fetch, and if that's too much data, then a strategy is explained for addressing this, and a sample is pointed out.

[vaby]

Please validate if our understanding is correct. What you are saying is that we need to return the hash map for each drop down during the first fetch itself. But our hash map is very huge and it might not be possible to fetch the entire hasp map. But we are not able to understand clearly the other strategy mentioned. And we were not able to find any sample as well. Can you please direct us to a sample which would be of great help for us?

[Isomorphic]

Here's the sample.

This is the explanation of the approach from the documentation:

Unlike the similar use of PickList.optionDataSource for pickLists used during editing or filtering, listGridField.optionDataSource causes the entire set of records from the optionDataSource to be fetched, without paging. Hence listGridField.optionDataSource is appropriate only for smaller valueMaps. For very large valueMap situations, such as an accountId field that should be displayed as an accountName where there are thousands of accounts, the recommended approach is:

* do not set listGridField.optionDataSource
* declare two fields in the DataSource, eg "accountId" and "accountName".
* Set the ListGridField.displayField attribute on the data field to the name of the display field.
* When fetching records for display in a grid, have your server send back values for both fields, but show only the data field ("accountId") in the grid.

In this case the cells in the accountId field will show the record value from the accountName field. This approach means the valueMap will never be loaded in its entirety, instead, each loaded record contains the valueMapping for that one record, as a pair of fields within the record.