Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Pardeep
300
Combo as Editor Type in igGrid column
posted

I have a grid having an column mapped to EmailTypeId in model whose editor type is defined as Combo. Now when I select the value from Combo, It's displayed as numeric (EmailTypeId) in grid. is there anything as (ValueLists in Netadvantage for winform) which could set the EmailTypeId to the selected EmailType in the grid. I need EmailTypeId to Save and EmailType to display on the grid.

@(Html.Infragistics().Grid(Of Advantage.Web.EmailAcct) _
.ID("grid1") _
.AutoGenerateColumns(False) _
.Columns(Function(columns)
columns.For(Function(c) c.EmailId).HeaderText("Email ID").DataType("number").Hidden(True)
columns.For(Function(c) c.EmailAddress).HeaderText("Email Address").DataType("String").Width(300)
columns.For(Function(c) c.EmailTypeId).HeaderText("Email Type").DataType("number")
columns.For(Function(c) c.isDefault).HeaderText("Default").DataType("bool")
End Function) _
.Features(Function(features)
features.Sorting().CaseSensitive(False).Mode(SortingMode.Single).Type(OpType.Local)
features.Resizing()
features.Filtering.Type(OpType.Local).Mode(FilterMode.Simple)
features.Selection().Mode(SelectionMode.Row).MultipleSelection(False)
features.Updating().AddRowLabel("Add Email").AddRowTooltip("Add Email").EditMode(GridEditMode.Row).ColumnSettings(Function(column)
column.ColumnSetting.ColumnKey("EmailTypeId").EditorType(ColumnEditorType.Combo).ComboEditorOptions(Function(combo)
combo.Mode(ComboMode.DropDown).SelectItemBySpaceKey(True).EnableClearButton(False).DropDownOnFocus(True).TextKey("EmailType").ValueKey("EmailTypeId").DataSource(ViewData("EmailTypes"))
End Function)
End Function)
End Function) _
.AutoCommit(True) _
.RenderCheckboxes(True) _
.DataSource(ViewData("EmailAccts")) _
.DefaultColumnWidth("100") _
.Width("100%") _
.Height("200") _
.DataBind() _
.Render())

Parents
No Data
Reply
  • 23953
    Verified Answer
    Offline posted

    Hi,

    You can use column formatter function and lookup the EmailType by EmailTypeId.

    First you need to build dictionary object for the lookup function which will contain EmailTypeId as a property name and EmailType as a property value. You can get the combo data source with igGridUpdating API.

    Here is an example function:

    Code Snippet
    1. function fillProductNameLookup(objectToFill) {
    2.     var colSettings = $("#grid1").igGridUpdating("option", "columnSettings");
    3.     var colSetting;
    4.     for (var i = 0; i < colSettings.length; i++) {
    5.         colSetting = colSettings[i];
    6.         if (colSetting.columnKey === "Product") {
    7.             if (colSetting.editorType && colSetting.editorType === "combo") {
    8.                 var ds = colSetting.editorOptions.dataSource;
    9.                 var textKey = colSetting.editorOptions.textKey;
    10.                 var valueKey = colSetting.editorOptions.valueKey;
    11.                 var item;
    12.                 for (var j = 0; i < ds.length; i++) {
    13.                     item = ds[i];
    14.                     objectToFill[item[valueKey]] = item[textKey];
    15.                 }
    16.             }
    17.             break;
    18.         }
    19.     }
    20. }

     

    This function takes a global object as argument and fills it with the combo data source data.

     

    Next, define a lookup function which will get the EmailTypeId and will return EmailType.

    Here is an example function:

    Code Snippet
    1. var lookupProductList = {};
    2.  
    3. fillProductNameLookup(lookupProductList);
    4.  
    5. function lookupProductName(productNumber) {
    6.     return lookupProductList[productNumber];
    7. }

     

    In this function lookupProductList is a global object which was filled by fillProductNameLookup function.

     

    Finally bind formatter function to EmailTypeId column by using the igGrid.columns.formatter property.

    Here is an example code:

    Code Snippet
    1. { headerText: "Product", key: "Product", dataType: "string", formatter: lookupProductName }

     

    Attached you can find a sample demonstrating the described solution.

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

    igGridUpdating_ComboLookup.zip
Children