Kendo Dropdown Display Text for value

1 Answer 963 Views
Grid
Bulut
Top achievements
Rank 1
Bulut asked on 03 Oct 2018, 02:30 PM

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
Telerik team
commented on 05 Oct 2018, 11:43 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Bulut
Top achievements
Rank 1
commented on 05 Oct 2018, 01:01 PM

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?  

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 09 Oct 2018, 09:12 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Joel
Top achievements
Rank 1
commented on 30 Jan 2019, 07:50 PM

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
Telerik team
commented on 01 Feb 2019, 11:41 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Bulut
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or