1. Home
  2. Forum
  3. ASP.NET MVC
  4. Grid - can we do a one click check/uncheck box

Grid - can we do a one click check/uncheck box

Whenever I hover over the checkbox the mouse cursor is the "Invalid" cursor as shown in the image.

I want to be able to just click once and toggle the checkbox ,instead of clicking the row, selecting the cell, then check/uncheck.  (that's 3 clicks).

My view is here:
    @(Html.EJ().Grid<Object>("FlatGrid")
                                 //                .Datasource(ds => ds.URL("GetData").CrudURL("Crud").Adaptor(AdaptorType.UrlAdaptor))
                                 .Datasource(ds => ds.URL("GetData").UpdateURL("Update").Adaptor(AdaptorType.UrlAdaptor))
                                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); })
                                .EnablePersistence(true)
                                .ToolbarSettings(toolbar =>
                                {
                                    toolbar.ShowToolbar().ToolbarItems(items =>
                                    {
                                        items.AddTool(ToolBarItems.Add);
                                        items.AddTool(ToolBarItems.Edit);
                                        items.AddTool(ToolBarItems.Delete);
                                        items.AddTool(ToolBarItems.Update);
                                        items.AddTool(ToolBarItems.Cancel);
                                    });
                                })
                                .Columns(col =>
                                {
                                    col.Field("Id").HeaderText("ID").IsPrimaryKey(true).Visible(false).Width(1).TextAlign(TextAlign.Left).Add();
                                    col.Field("Assignee").HeaderText("Patient").AllowEditing(false).TextAlign(TextAlign.Left).Type("string").Add();
                                    col.Field("Referral").HeaderText("Referral").TextAlign(TextAlign.Left).Type("boolean").EditType(EditingType.BooleanEdit).DisplayAsCheckbox(true).Add();
                                    col.Field("Authorization").HeaderText("Authorization").TextAlign(TextAlign.Left).Type("boolean").EditType(EditingType.BooleanEdit).DisplayAsCheckbox(true).Add();
                                })
                                .ClientSideEvents(events => events.TemplateRefresh("refresh"))
    )

And controller:
 public class GridController : Controller
    {
        private NORTHWNDEntities1 db = new NORTHWNDEntities1();

        // GET: Grid
        public GridController()
        {
           db = new NORTHWNDEntities1();
        }

        public ActionResult Index()
        {
            return View(db.Tasks.ToList());
        }

        public ActionResult Grid()
        {
            ViewBag.DataSource = db.Tasks.ToList();
            return View();
        }

        public ActionResult GetData(Syncfusion.JavaScript.DataManager value)
        {
            var DataSource = db.Tasks.ToList();
            DataResult result1 = new DataResult();
            DataOperations operation = new DataOperations();
            result1.result = DataSource;
            result1.count = DataSource.AsQueryable().Count();
            if (value.Skip > 0)
                result1.result = operation.PerformSkip(result1.result, value.Skip);
            if (value.Take > 0)
                result1.result = operation.PerformTake(result1.result, value.Take);
            if (value.Select != null && value.Select.Count > 0)
                return Json(result1.result, JsonRequestBehavior.AllowGet);
            return Json(result1, JsonRequestBehavior.AllowGet);
        }

        public ActionResult Update(Task value)  //the value param only contains a entity with values that only appear in grid (the rest are null), NOT the original entity with updated values.
        {
            Task req = db.Tasks.Single(o => o.Id == value.Id);
            db.Entry(req).CurrentValues.SetValues(value);
            db.Entry(req).State = EntityState.Modified;
            //req.BU = value.BU;
            try
            {
                db.SaveChanges();
            }
            catch (Exception ex)
            {
                throw;
            }
            var result = db.Tasks.ToList();
            return Json(new { result = result, count = result.Count }, JsonRequestBehavior.AllowGet);
        }
}





1 Reply
TS Thavasianand Sankaranarayanan Syncfusion Team October 17, 2018 12:22 PM UTC

Hi Robert, 

Thanks for contacting Syncfusion support. 

As per your given detail we suspect that you want to check/uncheck the checkbox in Grid column by a single click. So, we suggest you to use the batch edit mode in Grid. When we enable batch edit mode then we are able to edit the grid checkbox column in a single click. 

Refer the below code example. 

[GridFeatures.cshtml] 

@(Html.EJ().Grid<OrdersView>("Grid") 
                  
                    .Datasource(ds => ds.URL("/Grid/DataSource").BatchURL("/Grid/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)) 
                    .AllowPaging() 
                    .ToolbarSettings(a => a.ShowToolbar().ToolbarItems(b => 
                    { 
                        b.AddTool(ToolBarItems.Add); 
                        b.AddTool(ToolBarItems.Edit); 
                        b.AddTool(ToolBarItems.Delete); 
                        b.AddTool(ToolBarItems.Update); 
                        b.AddTool(ToolBarItems.Cancel); 
 
                    })) 
                     
                    .EditSettings(edit=> edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch)) 
                  .Columns(col => 
                     { 
                         
                         col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(80).Add(); 
                         col.Field("EmployeeID").HeaderText("Employee ID").Width(85).Add(); 
                         col.Field("CustomerID").HeaderText("Customer ID").TextAlign(TextAlign.Left).Width(90).Add(); 
                         col.Field("Verified").Type("boolean").EditType(EditingType.BooleanEdit).Width(85).Add(); 
                         col.Field("Attendance").Type("boolean").EditType(EditingType.BooleanEdit).Width(85).Add(); 
                     }) 
) 

------------------------------------------------------------------------------------------------------ 
[GridController.cs] 

public ActionResult BatchUpdate(List<Orders> changed, List<Orders> added, List<Orders> deleted) 
        { 
            if (changed != null) 
            { 
                for(var i = 0; i < changed.Count(); i++) 
                { 
                    var val = order.Where(or => or.OrderID == changed[i].OrderID).FirstOrDefault(); 
                    val.OrderID = changed[i].OrderID; 
                    val.EmployeeID = changed[i].EmployeeID; 
                    val.CustomerID = changed[i].CustomerID; 
                    val.Freight = changed[i].Freight; 
                    val.Verified = changed[i].Verified; 
                    val.Attendance = changed[i].Attendance; 
                } 
            } 
            if (deleted != null) 
            { 
                for(var j = 0; j < deleted.Count(); j++) 
                    order.Remove(order.Where(or => or.OrderID == deleted[j].OrderID).FirstOrDefault()); 
            } 
            if (added != null) 
            { 
                for(var k = 0; k < added.Count(); k++) 
                    order.Insert(0, added[k]); 
            } 
            var data = order; 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 


We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 



If you want normal editing with your requirement then please get back to us. 

Regards, 
Thavasianand S. 


Loader.
Up arrow icon