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 :
  1. public class Student  
  2.  {  
  3.      public int StudentID { getset; }  
  4.      public string StudentName { getset; }  
  5.      public string CourseName { getset; }  
  6.      public string SpecialSubject { getset; }  
  7.      public string InstituteName { getset; }             
  8.  }  
Now, add a controller class and the following actionresult to populate the data for the DropDown List: 
  1. public ActionResult GetStudentList()    
  2. {    
  3.      List<Student> lstStudent = GetStudentData();    
  4.      return Json(lstStudent, JsonRequestBehavior.AllowGet);    
  5. }    
  6.   
  7.  public List<Student> GetStudentData()    
  8.  {    
  9.      List<Student> lstData = new List<Student>();    
  10.      Student objStudent =null;    
  11.   
  12.      objStudent=new Student();    
  13.      objStudent.StudentID = 1;    
  14.      objStudent.StudentName = "Suman Roy";    
  15.      objStudent.CourseName = "B.Com";    
  16.      objStudent.SpecialSubject = "Accountancy";    
  17.      objStudent.InstituteName = "Calcutta University";    
  18.      lstData.Add(objStudent);    
  19.   
  20.      objStudent = new Student();    
  21.      objStudent.StudentID = 2;    
  22.      objStudent.StudentName = "Aritra Sharma";    
  23.      objStudent.CourseName = "B.A.";    
  24.      objStudent.SpecialSubject = "History";    
  25.      objStudent.InstituteName = "Jadavpur University";    
  26.      lstData.Add(objStudent);    
  27.   
  28.      objStudent = new Student();    
  29.      objStudent.StudentID = 3;    
  30.      objStudent.StudentName = "Rajat Dassharma";    
  31.      objStudent.CourseName = "MCA";    
  32.      objStudent.SpecialSubject = "Computer Science";    
  33.      objStudent.InstituteName = "Calcutta University";    
  34.      lstData.Add(objStudent);    
  35.   
  36.      objStudent = new Student();    
  37.      objStudent.StudentID = 4;    
  38.      objStudent.StudentName = "Srinjay Sen";    
  39.      objStudent.CourseName = "B.Com";    
  40.      objStudent.SpecialSubject = "Accountancy";    
  41.      objStudent.InstituteName = "Calcutta University";    
  42.      lstData.Add(objStudent);    
  43.   
  44.      objStudent = new Student();    
  45.      objStudent.StudentID = 5;    
  46.      objStudent.StudentName = "Ayantika Das";    
  47.      objStudent.CourseName = "B.Sc.";    
  48.      objStudent.SpecialSubject = "Phisics";    
  49.      objStudent.InstituteName = "Jadavpur University";    
  50.      lstData.Add(objStudent);    
  51.   
  52.      return lstData;    
  53.  }    
  54.   
  55.  public ActionResult DropDownWithCustomAttr()    
  56.  {    
  57.      return View();    
  58.  }   
Now, we add some references to the _Layout.cshtml file under the shared folder as in the following:
  1. <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.common.min.css")" rel="stylesheet" type="text/css" />  
  2.    <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />  
  3.    <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />  
  4.    <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.default.min.css")" rel="stylesheet" type="text/css" />  
  5.    <link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />  
  6.    <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/jquery.min.js")"></script>  
  7.    <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/jszip.min.js")"></script>  
  8.    <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/kendo.all.min.js")"></script>  
  9.    <script src="@Url.Content("~/Scripts/kendo/2014.3.1119/kendo.aspnetmvc.min.js")"></script>  
  10.    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>  
Now we create the view as below:
  1. @{  
  2.     ViewBag.Title = "Drop Down List with Custom Attribute Column";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5.   
  6. <h2>Drop Down List with Custom Attribute Column</h2>  
  7. <div>  
  8.     <table>  
  9.         <tr>  
  10.             <td style="width:20%;">  
  11.                 Select Student  
  12.             </td>  
  13.             <td style="width:40%;">  
  14.                 <input id="ddlStudent" style="width:95%" />  
  15.             </td>  
  16.             <td style="width:30%;"></td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td>  
  20.                 Student ID  
  21.             </td>  
  22.             <td>  
  23.                 <span id="StudentID"></span>  
  24.             </td>  
  25.             <td></td>  
  26.         </tr>  
  27.         <tr>  
  28.             <td>  
  29.                 Student Name  
  30.             </td>  
  31.             <td>  
  32.                 <span id="StudentName"></span>  
  33.             </td>  
  34.             <td></td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>  
  38.                 Course Name  
  39.             </td>  
  40.             <td>  
  41.                 <span id="CourseName"></span>  
  42.             </td>  
  43.             <td></td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td>  
  47.                 Special Subject  
  48.             </td>  
  49.             <td>  
  50.                 <span id="SpecialSubject"></span>  
  51.             </td>  
  52.             <td></td>  
  53.         </tr>  
  54.         <tr>  
  55.             <td>  
  56.                 Institute Name  
  57.             </td>  
  58.             <td>  
  59.                 <span id="InstituteName"></span>  
  60.             </td>  
  61.             <td></td>  
  62.         </tr>  
  63.     </table>  
  64. </div>  
  65. <script type="text/javascript">  
  66.     $(document).ready(function () {  
  67.         $.post('@Url.Action("GetStudentList", "Custom")').done(function (result) {  
  68.             var TemplateColumn = "<span data-StudentID='${StudentID}' data-CourseName='${CourseName}' data-SpecialSubject='${SpecialSubject}'";  
  69.             TemplateColumn = TemplateColumn + " data-InstituteName='${InstituteName}'>${StudentName}</span>";  
  70.   
  71.             $('#ddlStudent').kendoDropDownList({  
  72.                 optionLabel: {  
  73.                     StudentID: " ",  
  74.                     StudentName: " ",  
  75.                     CourseName: " ",  
  76.                     SpecialSubject: " ",  
  77.                     InstituteName: " "  
  78.                 },  
  79.                 dataTextField: "StudentName",  
  80.                 dataValueField: "StudentID",  
  81.                 dataSource: { data: result },  
  82.                 template: TemplateColumn,  
  83.                 select: fnItemSelected  
  84.             });  
  85.         }).error(function (r) {  
  86.             alert('Try Again')  
  87.         });  
  88.     });  
  89.   
  90.     function fnItemSelected(e) {  
  91.         debugger;  
  92.         var StudentID = e.item.find('span').attr('data-StudentID');  
  93.         var CourseName = e.item.find('span').attr('data-CourseName');  
  94.         var SpecialSubject = e.item.find('span').attr('data-SpecialSubject');  
  95.         var InstituteName = e.item.find('span').attr('data-InstituteName');  
  96.         var StudentName = e.item.text();  
  97.         $('#StudentID').text(StudentID);  
  98.         $('#StudentName').text(StudentName);  
  99.         $('#CourseName').text(CourseName);  
  100.         $('#SpecialSubject').text(SpecialSubject);  
  101.         $('#InstituteName').text(InstituteName);  
  102.     }  
  103. </script>  
Now just execute the code and the result will be as below:


Similar Articles