Image in Kendo Grid Dropdown List

In this article, 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 lets 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 lets 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.

Hope this was helpful…

Advertisements

Removing a Row from KENDO GRID

In this article, will demonstrate how to remove multiple grid items when a button is clicked.

Below is basic grid configuration.



@(Html.Kendo().Grid<User>()
           .Name("UserGrid")
            .HtmlAttributes(new { style = "height:100%; width:100%; " })
            .Columns(columns =>
            {
                       columns.Bound(m => m.Id).Hidden(true);
                       columns.Bound(m => m.Name).Width(175).Title("Name");
                       columns.Bound(m => m.Hours).Width(175).Title("Hrs");
                       columns.Bound(m => m.Comments).Width(175).Title("Comments");
            }
            )
            .Scrollable()
            .ToolBar(toolbar => toolbar.Template(@<text>
                       <a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>New</a>
                       <a class="k-button k-button-icontext" id="cancelItem" 
href="javascript:void(0)"><span class="k-icon k-cancel"> </span>Cancel</a>

           </text>))
            .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))
            .Reorderable(reorder => reorder.Columns(true))
            .Pageable(p => p.PageSizes(new[] { 25, 50, 100 }))
 )



Below are the key configurations. We defining that our grid is multi selectable. Also we defined Cancel button in Grid toolbar


.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

<a class="k-button k-button-icontext" id="cancelItem" href="javascript:void(0)"><span class="k-icon k-cancel"></span>Cancel</a>

Now its time to define the Javascript, which will remove the grid item. Find the INLINE comments for the below code.


// adding click event for cancel button

$("#cancelItem").on("click", function (e) { 
           clearSelectedRows("UserGrid"); 
 });

clearSelectedRows = function (gridName) {

           // identifying grid

            var entityGrid = $("#" + gridName + "").data("kendoGrid");

            // finding all the selected rows
            var rows = entityGrid.select();
            rows.each(function (index, row) {

                        // reading each selected item
                         var selectedItem = entityGrid.dataItem(row);

                       // finally removing selected item from grid data source
                         entityGrid.dataSource.remove(selectedItem); 
              });
 }

Happy Kooding… Hope this helps….!