Kendo Dropdown Display Text for value

[Bulut]

Hi,

I created a select list in my controller and then returned it as Json for the dropdown

Controller:

/// <summary>
        /// Prepare available cargo types
        /// </summary>
        /// <param name="items">Cargo Type items</param>
        /// <param name="withSpecialDefaultItem">Whether to insert the first special item for the default value</param>
        /// <param name="defaultItemText">Default item text; pass null to use default value of the default item text</param>
        public virtual IList<SelectListItem> PrepareAvailableCargoTypes(IList<SelectListItem> items, bool withSpecialDefaultItem = true, string defaultItemText = null)
        {
            if (items == null)
                throw new ArgumentNullException(nameof(items));

            var selectListItems = new List<SelectListItem>()
    {
            new SelectListItem() { Value = "1", Text = "Dry Bulk" },
            new SelectListItem() { Value = "2", Text = "Breakbulk" },
            new SelectListItem() { Value = "3", Text = "Project" },
            new SelectListItem() { Value = "4", Text = "FCL Container" },
            new SelectListItem() { Value = "5", Text = "LCL Container" },
            new SelectListItem() { Value = "6", Text = "Liquid Bulk" },
            new SelectListItem() { Value = "7", Text = "RoRo" },
            new SelectListItem() { Value = "8", Text = "Other" }
    };

            items = selectListItems;

            return items;
        }



public JsonResult GetAvailableCargoTypes()
        {
            var model = new CargoMasterModel();
            return Json(PrepareAvailableCargoTypes(model.AddCargoDetailModel.AvailableCargoTypes, false));
        }

Cshtml:

columns: [
                            {
                                    field: "CargoType",
                                    title: "Cargo Type",
                                    width: 200,
                                    editor: cargoTypeDropDownEditor,
                                    //template: "#= #"
                            },

//and function

function cargoTypeDropDownEditor(container, options) {
                            $('<input required name="' + options.field + '"/>')
                                .appendTo(container)
                                .kendoDropDownList({
                                    autoBind: false,
                                    dataTextField: "Text",
                                    dataValueField: "Value",
                                    dataSource: {
                                        serverFiltering: true,
                                        dataValueField: "Value",
                                        transport: {
                                            read: {
                                                type: "POST",
                                                dataType: "json",
                                                url: "@Html.Raw(Url.Action("GetAvailableCargoTypes", "CargoAdmin"))"

                                            }
                                        }
                                    }
                                });
                        }

 

So far dropdown editor works great, but displays only the value. How can I make the grid display Text value of my select list based on value?

[Tsvetina]

Hello Bulut,

I checked the provided code and it looks correct in terms of populating the DropDownList. However, I am not sure if the problem is that the DropDownList fails to display the text in items or the Grid shows only the value when an item is selected? Could you clarify on this?

If the problem is with the Grid, please share your DataSource declaration and explain what is the type of the CargoType field—does it only hold the value or is a complex field having text and value?

If the DropDownList fails to display the text, try inspecting the server response in the browser developer tools (F12 key) Network tab and see if there is any problem with the format of the response.

Regards,
Tsvetina
Progress Telerik

[Bulut]

Tsvetina ,

Ty for your answer. My problem is not with dropdown. it works fine. on my grid it shows Value field since CargoType is int. I wanted to show Text value , which was selected from dropdown. I think need to add a template for that but kinda confused about it. I can write a function which would return text value from list and call it from template. But is there any other way to do it?  

[Tsvetina]

Hi Bulut,

Indeed, you can solve this problem with a template and manual update of the text field. For example:
(I am assuming the text field is called CargoTypeText)

columns: [
     {
             field: "CargoType",
             title: "Cargo Type",
             width: 200,
             editor: cargoTypeDropDownEditor,
             template: "#: CargoTypeText #"
     },

//and function

function cargoTypeDropDownEditor(container, options) {
     $('<input required name="' + options.field + '"/>')
         .appendTo(container)
         .kendoDropDownList({
             autoBind: false,
             dataTextField: "Text",
             dataValueField: "Value",
             change: function(e){
                 var ddl = this;
                 var text= ddl.dataItem().Text;
                 var editedRow= ddl.element.closest("tr");
                 var model = $("#grid").data("kendoGrid").dataItem(editedRow);

                 model.set("CargoTypeText", text);
             },
             dataSource: {
                 serverFiltering: true,
                 dataValueField: "Value",
                 transport: {
                     read: {
                         type: "POST",
                         dataType: "json",
                         url: "@Html.Raw(Url.Action("GetAvailableCargoTypes", "CargoAdmin"))"

                     }
                 }
             }
         });
 }

Let me know if this works or if there are any errors with the code, as I cannot test it without a runnable sample.

Regards,
Tsvetina
Progress Telerik

[Joel]

Hello Tsvetina,

I'm trying to implement your suggestion but the model is "null" basically the line 

var model = $("#grid").data("kendoGrid").dataItem(editedRow);

doesn't get the data item being edited.

 

 

Best Regards!!!

[Georgi]

Hi Joel,

Have in mind that the approach provided by Tsvetina will work only for incell and inline editing. When the grid is in popup edit mode, the actual element of the editor is outside the grid, therefore selecting the row using the closest method will not work.

If you are using popup edit mode you could access the currently edited item through the grid.editable property.

e.g.

columns: [
     {
             field: "CargoType",
             title: "Cargo Type",
             width: 200,
             editor: cargoTypeDropDownEditor,
             template: "#: CargoTypeText #"
     },

//and function

function cargoTypeDropDownEditor(container, options) {
     $('<input required name="' + options.field + '"/>')
         .appendTo(container)
         .kendoDropDownList({
             autoBind: false,
             dataTextField: "Text",
             dataValueField: "Value",
             change: function(e){
                 var ddl = this;
                 var text= ddl.dataItem().Text;
                 var grid = $('#grid').data('kendoGrid');
                 var model = grid.editable.options.model;

                 model.set("CargoTypeText", text);
             },
             dataSource: {
                 serverFiltering: true,
                 dataValueField: "Value",
                 transport: {
                     read: {
                         type: "POST",
                         dataType: "json",
                         url: "@Html.Raw(Url.Action("GetAvailableCargoTypes", "CargoAdmin"))"

                     }
                 }
             }
         });
 }

Regards,
Georgi
Progress Telerik