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:

score 3 · Answer 1 · edited May 25 '17 at 08:43

3

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");

edited May 25 '17 at 08:43

Konstantin Dinev

34,219
14
75
100

answered May 25 '17 at 07:22

dkamburov

396
1
7

Thank you for quick response. I've defined combo like in your example `cs.ColumnSetting().ColumnKey("Vendor").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co =>co.DataSource(Model.Vendors).ValueKey("VendorId").TextKey("Name").Mode(ComboMode.DropDown).EnableClearButton(false));` but dropdown still stays empty on edit. – Reci May 25 '17 at 08:01
And formatter function runs on grid creation not editing, isn't it? – Reci May 25 '17 at 08:36
formatter is used to determine the display value for the grid. You have to make sure that the igCombo has its own data source, this is the most probable reason for not having a dropdown – dkamburov May 26 '17 at 06:26
igCombo has properly set data source, values list is drop normally. But user expects to see the previous value in combo like it is in the textbox when he starts edit. Added image for clearness – Reci May 26 '17 at 09:14
https://www.igniteui.com/grid/basic-editing This sample does not behave like that, please see what is different in your case. I would make sure that the "VendorId" value is part of the combo dataSource. – dkamburov May 29 '17 at 11:31

Set iggrid combo value on edit

1 Answers1