在编辑时设置iggrid组合值

时间:2017-05-24 11:50:00

标签: jquery asp.net asp.net-mvc ignite-ui iggrid

我使用HTML-helper定义的iggrid,并尝试在用户开始编辑时在组合中设置值。

我尝试通过' index'设置值。和' initialSelectedItems'像这样的选项:

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

但无法确定动态组合的名称。

Ignite UI的版本是15.1。

如何在开始编辑时设置组合值?

upd1。整个网格的定义:

@(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。编辑时带有空组合的附加图像:

enter image description here

upd3。附加图片以显示我需要的内容:

enter image description here

1 个答案:

答案 0 :(得分:3)

这是一个示例,演示了igGrid在igGrid中的用法: https://www.igniteui.com/grid/basic-editing

您可以使用comboEditorOptions定义igCombo选项:

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

另请注意,您必须利用formatterFunction:

FormatterFunction("lookupCustomer");