Set iggrid combo value on edit

Question

I'm using iggrid defined with HTML-helper and trying to set value in combo when a user starts editing.

I tried to set value via 'index' and 'initialSelectedItems' options like this:

$('#combo').igCombo({ initialSelectedItems: [{ index: 2 }, { index: 5 }, { value: 'items_value' }] })

but can't determine the dynamic combo's name.

The version of Ignite UI is 15.1.

How can I set combo value on start editing?

upd1. The definition of entire grid:

@(Html.Infragistics().Grid(Model.SapCrossRefs).ID("GridSapCrossRefs")
              .Width("100%")
              .AutoGenerateColumns(false)
              .AutoGenerateLayouts(false)
              .RenderCheckboxes(false)
              .PrimaryKey("SapCrossRefId")
              .AutoCommit(false)
              .Columns(column =>
              {
                  column.For(x => x.SapCrossRefId).HeaderText("").Width("15%").Template(buttonTemplate);
                  column.For(x => x.Vendor).ColumnCssClass("td-vendorName").HeaderText("Vendor").Width("35%");
                  column.For(x => x.VendorPartNumber).ColumnCssClass("td-vendorPartNumber").HeaderText("Vendor Part #").Width("25%");
                  column.For(x => x.SapProductPartNumber).ColumnCssClass("td-sapPartNumber").HeaderText("Sap Part #").Width("25%");
              }).Features(feature =>
              {
              feature.Updating()
              .StartEditTriggers(GridStartEditTriggers.None)
              .EnableDeleteRow(false)
              .ColumnSettings(cs =>
              {
              cs.ColumnSetting().ColumnKey("SapCrossRefId").ReadOnly(true);
              cs.ColumnSetting().ColumnKey("Vendor")
                   .EditorType(ColumnEditorType.Combo)
                   .Required(true)
                   .ComboEditorOptions(co =>
                    co.DataSource(Model.Vendors)                    
                    .ValueKey("VendorId")
                    .TextKey("Name")
                    .Mode(ComboMode.DropDown)
                    .EnableClearButton(false));
            cs.ColumnSetting().ColumnKey("SapProductPartNumber")
             .EditorType(ColumnEditorType.Combo)
             .Required(true)
             .ComboEditorOptions(co =>
              co.DataSource(Model.SapProducts)
              .ValueKey("Id")
              .TextKey("Name")
              .Mode(ComboMode.DropDown)
              .EnableClearButton(false));
            cs.ColumnSetting().ColumnKey("VendorPartNumber").Required(true).TextEditorOptions(o => o.ValidatorOptions(vo => vo.MinLength(1)));
        });
                  feature.Sorting();
                  feature.Paging().Type(OpType.Local).PageSize(15);

    })
              .DataSourceUrl(Url.Action("GetSapCrossRefList"))
              .UpdateUrl(Url.Action("SaveSapCrossRef"))
              .DataBind()
              .Render()

        )

upd2. Attached image with empty combos when editing:

upd3. Attached image to show what i need:

Answer 1

Here's a sample, demonstrating the usage of igCombo inside igGrid: https://www.igniteui.com/grid/basic-editing

You can use the comboEditorOptions to define the igCombo options:

cs.ColumnSetting()
  .ColumnKey("CustomerID")
  .EditorType(ColumnEditorType.Combo)
  .Required(true)
  .ComboEditorOptions(co => co.DataSource(ViewBag.Customers)
                              .ValueKey("ID")
                              .TextKey("CompanyName")
                              .Mode(ComboMode.DropDown)
                              .EnableClearButton(false));

Also note that you'll have to take advantage of the formatterFunction:

FormatterFunction("lookupCustomer");