Kendo Grid cell wih dropdownlist with multicolored ( html formatted) text

[Rick]

Hi I am trying to add a kendo dropdown list to a grid cell, but I am not sure how can I display the text in different color formats. So for instance we need to show values likes in a dropdownlist with the kendo cell grid.

Red X
Black X
Red numbers
Black Numbers

I have stored these values in a separate table and am linking them in the grid via Foreign Key Template. But I am not sure how can these values be html formatted.

One other approach was to link to editor to the cell but unfortunately going this route does not allow batch editing/saving. In this case I was not using a dropdownlist rather an editor and kept the cell free form.

Please suggest.

[Dimiter Madjarov]

Hello Rick,


You could access the list of items in the DropDownList through the list property and add custom classes to the odd and even items respectively in order to style them differently.
E.g.

var ddl = $("#products").data("kendoDropDownList");
$(ddl.list).find("li:odd").css("color", "blue");
$(ddl.list).find("li:even").css("color", "red");

Please let me know if this was the information that you were looking for. I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Rick]

Thanks...I need to get the dropdownlist editor contained within the cell. This is generated I believe by the foreign key template. I am hoping get that object, and once I access it I will apply your solution on top of it.

   @(Html.Kendo().Grid(Model)
            .Name("ChecklistGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ChecklistItemID).Title("ChecklistItemID").Width(20);
              columns.ForeignKey(p => p.ChecklistItemValueID, (System.Collections.IEnumerable)ViewData["checklistitemvalue"],"ChecklistItemValueID","Name").Title("Value"
).Width(50);
                columns.Bound(p => p.OtherValue).Title("OtherValue").Width(50);
  }) 

[Dimiter Madjarov]

Hello Rick,


In the current scenario you could bind to the edit event of the Grid and get the DropDownList in the event handler.
E.g.

function edit(e) {
   var ddl = $(e.container).find("[data-role='dropdownlist']").data("kendoDropDownList");
}

 

Regards,
Dimiter Madjarov
Telerik

[Rick]

Thanks ..bit I am not sure how can we can invoke the custom edit to the grid. Note. I see some commands under event method of the kendo grid like error, change, and databound but not edit specifically.

[Dimiter Madjarov]

Hello Rick,


I am not sure why you are experiencing this strange behavior. Are you referring to the error and change events of the dataSource instead of the Grid events.
E.g.

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    ...
    .Events(e => e.Edit("edit"))
    .DataSource(dataSource => dataSource
        ...
        .Events(events => events.Error("error").Change("change"))
    ...

Regards,
Dimiter Madjarov
Telerik

[Rick]

Hi Dimiter , Thanks that worked ( as correctly pointed out I was indeed looking at the daatsource events instead of the grid event) . Now, I see that it in your earlier example you showed how the dropdown list items can  be alternated with different colors, but I want to check values of each list item first and then image/color based on the value.

What do you suggest. Also is there some documentation for the list items within the dropdown list.

Thanks

[Dimiter Madjarov]

Hi Rick,


In the current scenario you could use the dataItem method of the DropDownList. It returns the model for the item specified by it's index.
E.g.

function edit(e) {
    var ddl = $(e.container).find("[data-role='dropdownlist']").data("kendoDropDownList");
    var listItems = $(ddl.list).find("li");
    for (var i = 0; i < listItems.length; i++) {
        var current = ddl.dataItem(i);
        if (current.property == true) {
            //custom logic
        }
    }
}

Regarding your second question, there is no specific documentation for the list items. You could take a look at the complete documentation about the DropDownList and also the following Getting started page.

Please let me know if this information was helpful for you or I could assist you further.

 

Regards,
Dimiter Madjarov
Telerik