Post
Ask Question

Allow Only Single Checkbox To Be Checked At A Time In Kendo MVC

Download source code from https://drive.google.com/open?id=0BzEHbuq5Ys-lVHBlSDRPYWd3akk
 
Step 1

Create a new MVC Empty Project, using Visual Studio. This example shows how to allow only one item to be allowed to be selected in the grid.

Add new Layout.cshtml into shared folder. Add references of Kendo, CSS and JavaScript into this Layout.cshtml. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>@ViewBag.Title - My Kendo UI MVC Application</title>  
  5.         <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
  6.         <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />  
  7.     <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />  
  8.     <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />  
  9.     <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />  
  10.     <link href="@Url.Content("~/Content/kendo/2016.2.504/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />  
  11.     <script src="@Url.Content("~/Scripts/kendo/2016.2.504/jquery.min.js")"></script>  
  12.     <script src="@Url.Content("~/Scripts/kendo/2016.2.504/angular.min.js")"></script>  
  13.     <script src="@Url.Content("~/Scripts/kendo/2016.2.504/jszip.min.js")"></script>  
  14.     <script src="@Url.Content("~/Scripts/kendo/2016.2.504/kendo.all.min.js")"></script>  
  15.     <script src="@Url.Content("~/Scripts/kendo/2016.2.504/kendo.aspnetmvc.min.js")"></script>  
  16. </head>  
  17.     <body>  
  18.         <header>  
  19.             <div class="content-wrapper">  
  20.                 <div class="float-left">  
  21.                     <p class="site-title" style="margin-left: 30%;">@Html.ActionLink("www.CoderFunda.com", "Index", "Home")</p>  
  22.                 </div>                  
  23.             </div>  
  24.         </header>  
  25.         <div id="body">  
  26.             @RenderSection("featured", required: false)  
  27.             <section class="content-wrapper main-content clear-fix">  
  28.                 @RenderBody()  
  29.             </section>  
  30.         </div>  
  31.   
  32.         <footer>  
  33.             <div class="content-wrapper">  
  34.                 <div class="float-left">  
  35.                     <p>© @DateTime.Now.Year - My Telerik MVC Application</p>  
  36.                 </div>  
  37.             </div>  
  38.         </footer>  
  39.     </body>  
  40. </html>  
Step 2

Now, add one model into a Model folder & give name as Company. Add some properties into it.
  1. public class Company  
  2. {  
  3. public int Id { get; set; }  
  4. public string Name { get; set; }  
  5. public bool IsValid { get; set; }  
  6. }  
Add HomeController in Controller. There is one action method, which will bind the data to the grid, using model.
  1. public class HomeController : Controller  
  2.   {  
  3.       public ActionResult Index()  
  4.       {  
  5.   
  6.           return View();  
  7.       }  
  8.   
  9.       public ActionResult BindGrid([DataSourceRequest]DataSourceRequest request)  
  10.       {  
  11.           try  
  12.           {  
  13.               List<Models.Company> objCmp = new List<Models.Company>();  
  14.               objCmp.Add(new Models.Company() { Id = 1, Name = "Rupesh Kahane", IsValid = false });  
  15.               objCmp.Add(new Models.Company() { Id = 2, Name = "Vithal Wadje", IsValid = false });  
  16.               objCmp.Add(new Models.Company() { Id = 3, Name = "Jeetendra Gund", IsValid = false });  
  17.               var lst = objCmp.ToList();  
  18.   
  19.               DataSourceResult result = lst.ToDataSourceResult(request, p => new Models.Company  
  20.               {  
  21.                   Id = p.Id,  
  22.                   Name = p.Name,  
  23.                   IsValid = p.IsValid,  
  24.               });  
  25.               return Json(result, JsonRequestBehavior.AllowGet);  
  26.           }  
  27.           catch (Exception ex)  
  28.           {  
  29.               var errorMsg = ex.Message.ToString();  
  30.               return Json(errorMsg, JsonRequestBehavior.AllowGet);  
  31.           }  
  32.       }  
  33.   }  
Step 3

Add View by right clicking on Action Method Index, which will show a grid with the details. In our grid, I am going to add a template to show a checkbox for the property of IsValid.
 
Now, add a JavaScript code into a document.ready function for onchange event of grid checkbox, which will uncheck all checkboxes & check only single checkbox on which an event is fired. 
  1. @using System.Web.Optimization  
  2. @using Kendo.Mvc.UI  
  3. @using Kendo.Mvc.Extensions  
  4. @{  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <div style="width:450px;">  
  9.     @(Html.Kendo().Grid<Grid.Models.Company>()  
  10.         .Name("DetailGrid")  
  11.         .Columns(columns =>  
  12.         {  
  13.             columns.Bound(p => p.Id).Title("Id").Width(2).Filterable(false);  
  14.             columns.Bound(p => p.Name).Title("Name").Width(10).Filterable(false);  
  15.             columns.Bound(p => p.IsValid).ClientTemplate("# if(IsValid==true){#" + "<input  type='checkbox' checked='checked' id='chboxSelect' class='checkBox' />" + "#}else{#" + "<input type='checkbox' id='chboxSelect' class='checkBox'/>" + "#}#").Title("Valid").Width(5).Filterable(false);  
  16.         })  
  17.             .Scrollable()  
  18.             .Filterable(ftp => ftp.Mode(GridFilterMode.Row))  
  19.             .Resizable(resize => resize.Columns(true))  
  20.             .Pageable(x => x.PageSizes(new List<object> { 10, 20, 100, 200, 500, "all" }).Refresh(true))  
  21.             .HtmlAttributes(new { style = "height: 100%" })  
  22.             .DataSource(dataSource => dataSource  
  23.             .Ajax()  
  24.             .Model(model => model.Id(p => p.Id))  
  25.             .ServerOperation(false)  
  26.             .Read(read => read.Action("BindGrid", "Home"))  
  27.      )  
  28.     )  
  29. </div>  
  30.   
  31. <script>  
  32.     $(document).ready(function () {  
  33.         $("#DetailGrid").on("change", "input.checkBox", function (e) {  
  34.             var currentEventFired = $(this).is(":checked");  
  35.             $("input.checkBox", "#DetailGrid").prop("checked", false);  
  36.             $(this).prop("checked", currentEventFired);  
  37.         });  
  38.     });  
  39. </script>  
Step 4

Now, run the application. In the controller, I have assigned False values to IsValid property. Now, I am selecting checkbox of  the first one and our result will be, as shown below.



Now, click another checkbox, so first checkbox will get unchecked & current one will get checked.


Summary

In this article, you learnt the basics of how to allow only single checkbox to be checked at a time in Kendo MVC.


Similar Articles