How To Implement Footer Template In Kendo DropDownList

Introduction

In this blog, I’ll describe how to implement the footer template in the Kendo DropDownList, using ASP.NET MVC with an example that displays the total count of the list in footer template of the Kendo DropDownList.

Prerequisites

Basic knowledge of ASP.NET MVC and Kendo UI framework.

Create New MVC Project

Create a new empty ASP.NET MVC application as per the following figures. Open Visual Studio ->File ->New project ->ASP.NET Web Application.



Select MVC and click OK.



Please refer to my previous article, to check out how to configure Kendo UI in ASP.NET MVC application.

Creating the Model

Right click on the Models folder and go to Add->Class. In my case, I named it as EmployeeDetailList.cs.

Code in EmployeeDetailList.cs

public class EmployeeDetailList {
    public EmployeeDetailList(int EmployeeID, string FirstName, string LastName) {
        this.EmployeeID = EmployeeID;
        this.FirstName = FirstName;
        this.LastName = LastName;
    }
    public int EmployeeID {
        get;
        set;
    }
    public string FirstName {
        get;
        set;
    }
    public string LastName {
        get;
        set;
    }
}

Create a Controller

Create a new empty Controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as EmployeeController.

Write the code, given below, in the Controller.

public class EmployeeController: Controller {
    public ActionResult EmployeeList() {
        try {
            List < EmployeeDetailList > _emp = new List < EmployeeDetailList > ();
            _emp.Add(new EmployeeDetailList(1, "Bobb", "Ross"));
            emp.Add(new EmployeeDetailList(2, "Pradeep", "Raj"));
            _emp.Add(new EmployeeDetailList(3, "Arun", "Kumar"));
            return Json(_emp.ToList(), JsonRequestBehavior.AllowGet);
        } catch (Exception ex) {
            return Json(ex.Message, JsonRequestBehavior.AllowGet);
        }
    }
}

Creating a View

Right click on View-> Employee folder and add >> New Empty View. Write the code, given below, in the View-

<div class="row">
    <div class="demo-section k-content">
        @(Html.Kendo().DropDownList() .Name("Empddl") .HtmlAttributes(new { style = "width:100%" }) .DataTextField("FirstName") .DataValueField("EmployeeID") .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found") .DataSource(source => { source.Read(read => { read.Action("EmployeeList", "Employee"); }); }) )
    </div>
</div>

Footer Template

The footer template is the one of the new features of Kendo DropDownList from its latest 2016 R3 release. This footer template receives the DropDownList itself as a part of the data argument.

The footer template which is defined in the above View is used to display the total count of the employees in the DropDownList

Result



Conclusion

I hope you enjoyed this blog. Will share more details about other templates of the Kendo DropDownList in my future article. Your valuable feedback, questions, or comments about this article are always welcome.