Hi Martin,

Thank you for your reply, it was really useful in nudging me forward in this process.

I'm now stuck at one further issue, which I need to get around to complete my evaluation of populaiting a ig-grid, and sending edits back to a web service.

When editing a row, I would like some of the cells to have drop down lists of possible values.   And I can't do it.

I have tried having both a JavaScript variable containing hard-coded data, I have tried with an Angular variable (I was being optimistic) but neither seem to populate the drop down lists.

Actually, I want to do exactly the same as this example:
http://ko.infragistics.com/samples/aspnet/data-grid/dropdown-editors

I'm not using MVC, I'm trying my best to make this Angular-friendly... but just can't get it to work.

So, stripping it down to basics, here's my JavaScript hardcoded variable:

var ListOfPrograms = [ { "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];

... and here's the <features> part of my ig-grid.   Note that a drop down list DOES appear for my ProgramName column when I edit a row... but it's  populated with "No results", so I must have the column-setting stuff badly setup  (but, once again, working examples are scarce..)

<features>
<feature name="Updating" enable-add-row="true" event-edit-row-ended="OnEditRowEnded">
<column-settings>
<column-setting column-key="GuideID" read-only="true">
</column-setting>
<column-setting column-key="ProgramName" editor-type="combo" mode="dropdown" data-source="ListOfPrograms" text-key="ProgramName" value-key="ProgramID">
    <editor-options>
    <editor-option data-source="ListOfPrograms" text-key="ProgramName" value-key="ProgramID"></editor-option>
  </editor-options>
</column-setting>
</column-settings>
</feature>
<feature name="Selection" mode="row" event-active-row-changed="OnIggridRowChanged">
</feature>
</features>

(As you can see, I've tried sticking the "data-source" stuff into both the column-setting and editor-options tags, but neither works.  I've left them in this sample to show what hopesless attempts I've tried.)

 I just can't work out how to convert this example:

name: 'Updating', columnSettings: [{ //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'. columnKey: "CategoryID", editorType: 'combo', required: true, editorOptions: { mode: "dropdown", dataSource: northWindCategoriesJSON, textKey: "Name", valueKey: "ID" } }],

..taken from this page...

http://www.igniteui.com/combo/grid-with-combo-editor

... into a <column-settings> attribute, as I'm trying to use.

What have I missed...?

... oh, and part 2 of my question...

Actually, this "ListOfPrograms" array will be a JSON array populated by a web service  (so its data won't be available when the page first loads).

How do I tell the ig-grid that this drop down list's "data-source" has changed.... or does this data-source only "kick in" when the user edits a row, and the ig-grid evaluates what this ListOfPrograms contains at that point ?

I assume this is going to take more than a 

$("#iggrid1").igGrid('dataBind');

...?

Here are two images, which might clearly explain the problem I'm having.

.... and here's the code for the ig-grid used to create this example...

I hope you can help.

You do have an example on the following page, which does the same kind of thing, but I'm attempting to set the data source in HTML, rather than via JavaScript.

http://www.igniteui.com/grid/editing-api-events

I hope you can help.

Mike

Hello Michael,

Looking at your code I see that there is an issue with the following code:

$("#grid1").igGrid("cellById", 1, "ShipCity");

It doesn't return any cell and the reason is that the second argument should be a valid primary key value and your data doesn't have row with id = 1. To resolve this you can get the first row pk value like this:

parseInt($($("#grid1").igGrid("rows")[0]).attr("data-id"))

The resulting code will be:

$combo = $("#grid1").igGridUpdating("editorForCell", $("#grid1").igGrid("cellById",  parseInt($($("#grid1").igGrid("rows")[0]).attr("data-id")), "ShipCity"), true);

Best regards,
Martin Pavlov
Infragistics, Inc.

Hi Martin,

Many thanks for the reply.

Your sample code answered a lot of questions for me, except for one.

I still find that, with hardcoded data (like you used), there's no problem.

But if I set up a web service to return that same data, store it in the same $scope variable, I still can't get the simple array of values into the drop down list.

And if I try your suggestion to bind this data:

$("#MikesGrid").igCombo("option", "dataSource", $scope.ListOfCities);

...then I get this JavaScript error...

Uncaught Error: cannot call methods on igCombo prior to initialization; attempted to call method 'option'b.extend.error @ jquery-1.9.1.min.js:3(anonymous function)

What would be useful is if you could change your sample so rather than hardcoding the values...

$scope.ListOfPrograms = [ { "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];

...you simulated loaded this data from a web service...

$scope.ListOfPrograms = null;

setTimeout(function () {

    $scope.ListOfPrograms = [{ "ProgramID": 1, "ProgramName": "First Program" }, { "ProgramID": 0, "ProgramName": "Second Program" }];

    // Need to use $apply, as we're setting an Angular value in a timer thread

    $scope.$apply();

    // Attempt to tell our ig-grid that the data has changed

    $("#grid1").igCombo("option", "dataSource", $scope.ListOfPrograms);

}, 1000);

According to your email, this should work.

In reality, your sample also throws this "cannot call methods on igCombo prior to initialization" error.

Best regards,

Mike