Generate Dropdownlist With Custom Attribute Column Using Kendo UI and jQuery

Using this article, we will show how to create a drop down list with multiple custom attribute columns.

Basically, whenever we populate a drop down list, it basically contains only the two values datavaluefield and datatextfield. But in spite of these two fields, sometimes we need to populate some extra columns that generally act as a hidden column, but whenever we select any item from the drop down list, it returns the values of those hidden columns. We show how to populate this type of custom attribute column using the Kendo UI.

 

For doing these, first we create a model class named "Student" as in the following :

public class Student
 {
     public int StudentID { get; set; }
     public string StudentName { get; set; }
     public string CourseName { get; set; }
     public string SpecialSubject { get; set; }
     public string InstituteName { get; set; }
 }

Now, add a controller class and the following actionresult to populate the data for the DropDown List: 

public ActionResult GetStudentList()
{
     List<Student> lstStudent = GetStudentData();
     return Json(lstStudent, JsonRequestBehavior.AllowGet);
}

 public List<Student> GetStudentData()
 {
     List<Student> lstData = new List<Student>();
     Student objStudent =null;

     objStudent=new Student();
     objStudent.StudentID = 1;
     objStudent.StudentName = "Suman Roy";
     objStudent.CourseName = "B.Com";
     objStudent.SpecialSubject = "Accountancy";
     objStudent.InstituteName = "Calcutta University";
     lstData.Add(objStudent);

     objStudent = new Student();
     objStudent.StudentID = 2;
     objStudent.StudentName = "Aritra Sharma";
     objStudent.CourseName = "B.A.";
     objStudent.SpecialSubject = "History";
     objStudent.InstituteName = "Jadavpur University";
     lstData.Add(objStudent);

     objStudent = new Student();
     objStudent.StudentID = 3;
     objStudent.StudentName = "Rajat Dassharma";
     objStudent.CourseName = "MCA";
     objStudent.SpecialSubject = "Computer Science";
     objStudent.InstituteName = "Calcutta University";
     lstData.Add(objStudent);

     objStudent = new Student();
     objStudent.StudentID = 4;
     objStudent.StudentName = "Srinjay Sen";
     objStudent.CourseName = "B.Com";
     objStudent.SpecialSubject = "Accountancy";
     objStudent.InstituteName = "Calcutta University";
     lstData.Add(objStudent);

     objStudent = new Student();
     objStudent.StudentID = 5;
     objStudent.StudentName = "Ayantika Das";
     objStudent.CourseName = "B.Sc.";
     objStudent.SpecialSubject = "Phisics";
     objStudent.InstituteName = "Jadavpur University";
     lstData.Add(objStudent);

     return lstData;
 }

 public ActionResult DropDownWithCustomAttr()
 {
     return View();
 }

Now, we add some references to the _Layout.cshtml file under the shared folder as in the following:

<link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.common.min.css")" rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.default.min.css")" rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
   <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/jquery.min.js")"></script>
   <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/jszip.min.js")"></script>
   <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/kendo.all.min.js")"></script>
   <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/kendo.aspnetmvc.min.js")"></script>
   <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

Now we create the view as below:

@{
    ViewBag.Title = "Drop Down List with Custom Attribute Column";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Drop Down List with Custom Attribute Column</h2>
<div>
    <table>
        <tr>
            <td style="width:20%;">
                Select Student
            </td>
            <td style="width:40%;">
                <input id="ddlStudent" style="width:95%" />
            </td>
            <td style="width:30%;"></td>
        </tr>
        <tr>
            <td>
                Student ID
            </td>
            <td>
                <span id="StudentID"></span>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                Student Name
            </td>
            <td>
                <span id="StudentName"></span>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                Course Name
            </td>
            <td>
                <span id="CourseName"></span>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                Special Subject
            </td>
            <td>
                <span id="SpecialSubject"></span>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                Institute Name
            </td>
            <td>
                <span id="InstituteName"></span>
            </td>
            <td></td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.post('@Url.Action("GetStudentList", "Custom")').done(function (result) {
            var TemplateColumn = "<span data-StudentID='${StudentID}' data-CourseName='${CourseName}' data-SpecialSubject='${SpecialSubject}'";
            TemplateColumn = TemplateColumn + " data-InstituteName='${InstituteName}'>${StudentName}</span>";

            $('#ddlStudent').kendoDropDownList({
                optionLabel: {
                    StudentID: " ",
                    StudentName: " ",
                    CourseName: " ",
                    SpecialSubject: " ",
                    InstituteName: " "
                },
                dataTextField: "StudentName",
                dataValueField: "StudentID",
                dataSource: { data: result },
                template: TemplateColumn,
                select: fnItemSelected
            });
        }).error(function (r) {
            alert('Try Again')
        });
    });

    function fnItemSelected(e) {
        debugger;
        var StudentID = e.item.find('span').attr('data-StudentID');
        var CourseName = e.item.find('span').attr('data-CourseName');
        var SpecialSubject = e.item.find('span').attr('data-SpecialSubject');
        var InstituteName = e.item.find('span').attr('data-InstituteName');
        var StudentName = e.item.text();
        $('#StudentID').text(StudentID);
        $('#StudentName').text(StudentName);
        $('#CourseName').text(CourseName);
        $('#SpecialSubject').text(SpecialSubject);
        $('#InstituteName').text(InstituteName);
    }
</script>

Now just execute the code and the result will be as below: