Hello, 

I have an igGrid which had a column that is set up as a Load- on- Demand igCombo box.

The datasource I am using to populate the combo is a remote igDataSource, here is the setup:

-------------------------------------------------------------- 

   var companyID = 'ABC';
     var filter = '$filter=CompanyID eq \'' + companyID + '\''
     var url = 'odata/Jobs?' + filter
     var jobDS = new $.ig.RESTDataSource({
          type: 'remoteUrl',
          dataSource: url,
          responseDatakey: 'value',
          responseDataType: 'json'
     });

--------------------------------------------------------------

The dataSource data looks somthing like this:

 "odata.metadata":"http://localhost:00000/odata/$metadata#Jobs","value":[
    {
      "JobKey":2,"JobID":"12345","JobName":"Large Bldg 'B'","LocID":"NYC","CustID":"XYZSTL","CustName":"XYZ Steel","CompanyID":"ABC"
    }, 

    .
    .
    .
 ] 

Here is the set up of the column as a load on demand combo:

-------------------------------------------------------------- 

   columnKey: 'JobID',
     editorType: 'combo',
     editorOptions:
     {
          loadOnDemandSettings: {
               enabled: true,
               pageSize: 25
          },
          id: "comboJobID",
          responseDataKey: "value",
          dataSource: jobDS,
          filteringType: "remote",
          valueKey: "JobKey",
          textKey: "JobID",
          virtualization: true,
          autoComplete: true,
          itemTemplate: "<div>${JobID} - ${JobName}</div>",
          nullText: "",
          headerTemplate: "<div class='dropDownHeaderFooter'>Select a Job</div>",
          footerTemplate: "<div class='dropDownHeaderFooter'>Job Count: {0}</div>",
          filterExprUrlKey: 'startsWith',
          mode: 'editable',
          selectionChanged: function (evt, ui) {
               var row = $("#gridReservations").igGrid("selectedRow");
               var value = ui.items[0].value;
               r.jobKey = value;
               $("#gridReservations").igGridUpdating("setCellValue", $(row).attr("id"), "JobKey", value);

               //********************************************************
               //Commented out code below is my attempt to set the CustomerName
               //to the corresponding JobID
               //var key = $('#comboJobID').igCombo("selectedIndex");
               //$("#comboCustName").igCombo("selectedIndex", key); 

          }
     }

--------------------------------------------------------------

In my igGrid I also have a column named "CustName". When the jobID (a unique identifier) is updated the CustName needs to also update to correspond with the new JobID. I was having trouble thinking of an easy way to do this so I created another igCombo style column with jobDS as the datasource and was going to set the index of the CustName combo to the same as the JobID combo since they would match up. Here is my CustName column setup:

 --------------------------------------------------------------

    columnKey: 'CustName',
    editorType: 'combo',
    editorOptions:
    {
        id: "comboCustName",
        dataSource: jobDS,
        responseDataKey: "value",
        filteringType: "local",
        valueKey: "CustName",
        virtualization: true,
        autoComplete: true,
        nullText: "",
        filterExprUrlKey: 'startsWith',
        mode: 'readonly',
        enableClearButton: false,
        showDropDownButton: false

    }

 --------------------------------------------------------------

However, it seems when I use the previous code and have the following code uncommented in my JobID selectionChanged event, the searching feature of the load-on-demand combo breaks (which is something I can't have due to the large amount of records).

--------------------------------------------------------------

        selectionChanged: function (evt, ui) { 
               var row = $("#gridReservations").igGrid("selectedRow");
               var value = ui.items[0].value;
               r.jobKey = value;
               $("#gridReservations").igGridUpdating("setCellValue", $(row).attr("id"), "JobKey", value);

               //********************************************************
               //Code below is my attempt to set the CustomerName
               //to the corresponding JobID, it breaks stuff
               

               var key = $('#comboJobID').igCombo("selectedIndex");
               $("#comboCustName").igCombo("selectedIndex", key); 

          }

--------------------------------------------------------------

Why does this happen? Is there an easier way to set the CustName based on the corresponding unique JobID?

Thanks,

Julie