Grid Displaying text for value not working on grid column

[Van]

Hi,

I'm working on Kendo Grid with Angular 1.7 with Typescript. So far, displaying dropdown list during edit (popup) mode is working as expected. I'm currently struggling with displaying text instead of bound value on grid column. The model of data source includes 2 properties: "Label" and "Id". I've tried to follow these examples:

1. https://demos.telerik.com/kendo-ui/grid/foreignkeycolumnbinding

2. https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.values

but with no luck. After "Update" button is clicked, the grid shows "Id" instead of "Label".

Here is my custom editor:

columnConfig.editor = (container, options) => {
      $('<input required data-text-field="Label" data-value-field="Id" data-bind="value:' + options.field + '" /> ')
        .appendTo(container)
        .kendoDropDownList({
             autoBind: false,
             dataTextField: "Label",
             dataValueField: "Id",
                 dataSource: {
                      data: CustomPickListItems
                  }
             });
        };

 

How can I make the grid display "Label" but save "Id" to local data?

[Preslav]

Hi Van,

To modify the column display, I would suggest using the columns.template property - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template

For example, check this demo - https://demos.telerik.com/kendo-ui/grid/editing-custom

In the demo, the template of the "Category" column looks like:

template: "#=Category.CategoryName#"

Regards,
Preslav
Progress Telerik

[Van]

Thank you! I'm able to get it work by using template.