Image in Kendo Grid Dropdown List

In this blog, I would demonstrate how to insert a image in dropdown list (inside kendo grid) based on Type (CrewId) also this will help us to how to define the foreign key column in kendo Grid.

In this example, the grid will contain 3 columns a) Id b) CrewId [Man/Machine which is foreign key column] 3).

Comments

Let's define below Kendo Grid in Index.cshtml of HomeController. This is a basic kendo grid configuration with 2 columns as Bound columns and another column as ForeignKey Column which contains CrewID and we have list of CreworEquipment data which is stored in ViewState.

@
(Html.Kendo().Grid < UserMachine > ()
    .Name("MyGrid")
    .HtmlAttributes(new {
        style = "height:100%; width:100%; "
    })
    .Columns(columns => {
        columns.Bound(m => m.Id).Hidden(true);
        columns.ForeignKey(m => m.CrewId, (System.Collections.IEnumerable) ViewData["CrewOrEquipment"], "Id", "Name").Title("User/Equipment").Width(100);
        columns.Bound(m => m.Comments).Width(175).Title("Comments");
    })
    .ToolBar(toolbar => toolbar.Template( < text >
            < a class = "k-button k-button-icontext k-grid-add anch-show-hide" > < span class = "k-icon k-add" > < /span></a >
            < a class = "k-button k-button-icontext anch-show-hide"
            id = "cancelAct1"
            href = "javascript:void(0)" > < span class = "k-icon k-cancel" > < /span></a >
            < /text>))
            .Scrollable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Filterable()
            .Sortable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Model(model => {
                    model.Id(row => row.Id);
                })
                .ServerOperation(false)
                .PageSize(25)
            )
            .Resizable(resize => resize.Columns(true))
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

The major part of the code is the Grid Foreign Key template which would be defined in Shared folder. Lets add file GridForeignKey.cshtml inside folder View ==> Shared ==> EditorTemplate and add the below code to the file.

@(Html.Kendo().DropDownListFor(m => m).DataValueField("Id").DataTextField("Name")
.BindTo((System.Collections.IEnumerable)ViewData["CrewOrEquipment"])
.TemplateId("contact-template"))

Now let's define below template, and this is pretty straightforward based on Id, we are setting the respective Image along with data to it.

<script id="contact-template" type="text/x-kendo-template">
    # if(data.CrewType == 1) { #
    <img alt="icon" class="k-image" src="http://icons.iconarchive.com/icons/icons-land/vista-people/16/Office-Customer-Male-Light-icon.png"> #: data.Name # # } # # if(data.CrewType == 2) { #
    <img alt="icon" class="k-image" src="http://icons.iconarchive.com/icons/iconshock/real-vista-construction/16/hand-driller-icon.png"> #: data.Name # # } #
</script>

Finally let's define the Controller action Index with following code. As you can see we are using the ViewData in our ForeignKey column.

public ActionResult Index()
{
   ViewData["CrewOrEquipment"] = GetCrewOrEquipment();
   return View();
}

Let's run the application and once page loads, click the Plus button and now you select Crew Columns and you should be seeing the Images (crew/equipment images) based on type.