Kendo UI grid Batch Editing need to Display boolean value true(checkbox need to checked) false(checkbox need to uncheck) - asp.net-mvc-4

Question

The Class Employee.cs is like that
public class Employee
{
public int EmployeeID;
public string Name;
}
The Class Order.cs is like that
public class Order
{
public int OrderID { get; set; }
public DateTime OrderDate { get; set; }
public string OrderDescription { get; set; }
public int EmployeeID { get; set; }
public bool checker { get; set; }
public bool Maker { get; set; }
public bool Supervisor { get; set; }
}
The Home Controller is like that
public class HomeController : Controller
{
public static List<Order> orderList = new List<Order> {
new Order {OrderID = 1, OrderDate = new DateTime(2012,8,1), EmployeeID = 1, OrderDescription = "Order Food",checker=true,Maker=true,Supervisor=true },
new Order {OrderID = 2, OrderDate = new DateTime(2012,8,1), EmployeeID = 2, OrderDescription = "Order Office Materials",checker=false,Maker=true,Supervisor=true },
new Order {OrderID = 3, OrderDate = new DateTime(2012,8,2), EmployeeID = 1, OrderDescription = "Order Production Materials",checker=true,Maker=true,Supervisor=true },
new Order {OrderID = 4, OrderDate = new DateTime(2012,8,3), EmployeeID = 4, OrderDescription = "Order Food",checker=true,Maker=true,Supervisor=true },
new Order {OrderID = 5, OrderDate = new DateTime(2012,8,4), EmployeeID = 3, OrderDescription = "Order Production Materials" ,checker=false,Maker=true,Supervisor=true},
new Order {OrderID = 6, OrderDate = new DateTime(2012,8,5), EmployeeID = 3, OrderDescription = "Order Production Materials" ,checker=true,Maker=true,Supervisor=true},
new Order {OrderID = 7, OrderDate = new DateTime(2012,8,5), EmployeeID = 4, OrderDescription = "Order Food", checker=true,Maker=true,Supervisor=true},
new Order {OrderID = 8, OrderDate = new DateTime(2012,8,6), EmployeeID = 1, OrderDescription = "Order Food", checker=true,Maker=true,Supervisor=true},
new Order {OrderID = 9, OrderDate = new DateTime(2012,8,6), EmployeeID = 1, OrderDescription = "Order Office Materials" ,checker=false,Maker=true,Supervisor=true},
new Order {OrderID = 10, OrderDate = new DateTime(2012,8,7), EmployeeID = 2, OrderDescription = "Order Production Materials",checker=true,Maker=true,Supervisor=true },
};
public static List<Employee> employeeList = new List<Employee> {
new Employee {EmployeeID = 1, Name = "Anrew"},
new Employee {EmployeeID = 2, Name = "John"},
new Employee {EmployeeID = 3, Name = "Peter"},
new Employee {EmployeeID = 4, Name = "Ivan"},
new Employee {EmployeeID = 5, Name = "Nancy"},
};
public ActionResult Index()
{
ViewData["employees"] = employeeList.Select(e => new {
EmployeeID = e.EmployeeID,
Name = e.Name
});
return View();
}
public ActionResult About()
{
return View();
}
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
var allOrders = from orders in orderList
select new Order{
OrderID = orders.OrderID,
OrderDate = orders.OrderDate,
EmployeeID = orders.EmployeeID,
OrderDescription = orders.OrderDescription,
checker=orders.checker,
Maker=orders.Maker
};
return Json(allOrders.ToDataSourceResult(request));
}
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, Order order)
{
if (order != null && ModelState.IsValid)
{
var target = orderList.Where(o => o.OrderID == order.OrderID).FirstOrDefault();
if (target != null)
{
orderList.Remove(target);
}
}
return Json(ModelState.ToDataSourceResult());
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update([DataSourceRequest] DataSourceRequest request, Order order)
{
if (order != null && ModelState.IsValid)
{
var target = orderList.Where(o => o.OrderID == order.OrderID).FirstOrDefault();
if (target != null)
{
int targetIndex = orderList.IndexOf(target);
orderList[targetIndex].OrderDate = order.OrderDate;
orderList[targetIndex].EmployeeID = order.EmployeeID;
orderList[targetIndex].OrderDescription = order.OrderDescription;
orderList[targetIndex].checker = order.checker;
orderList[targetIndex].Maker = order.Maker;
orderList[targetIndex].Supervisor = order.Supervisor;
}
}
return Json(ModelState.ToDataSourceResult());
}
public ActionResult Create([DataSourceRequest] DataSourceRequest request, Order order)
{
order.OrderID = orderList[orderList.Count - 1].OrderID + 1;
orderList.Add(order);
return Json(new[] { order }.ToDataSourceResult(request, ModelState));
}
public ActionResult UpdateCreateDelete(
[Bind(Prefix = "updated")]List<Order> updatedOrders,
[Bind(Prefix = "new")]List<Order> newOrders,
[Bind(Prefix = "deleted")]List<Order> deletedOrders)
{
if (updatedOrders != null && updatedOrders.Count > 0)
{
for (int i = 0; i < updatedOrders.Count; i++)
{
var target = orderList.Where(o => o.OrderID == updatedOrders[i].OrderID).FirstOrDefault();
if (target != null)
{
int targetIndex = orderList.IndexOf(target);
orderList[targetIndex].OrderDate = updatedOrders[i].OrderDate;
orderList[targetIndex].EmployeeID = updatedOrders[i].EmployeeID;
orderList[targetIndex].OrderDescription = updatedOrders[i].OrderDescription;
orderList[targetIndex].checker = updatedOrders[i].checker;
orderList[targetIndex].Supervisor = updatedOrders[i].Supervisor;
orderList[targetIndex].Maker = updatedOrders[i].Maker;
}
}
}
if (newOrders != null && newOrders.Count > 0)
{
for (int i = 0; i < newOrders.Count; i++)
{
newOrders[i].OrderID = orderList[orderList.Count - 1].OrderID + 1;
orderList.Add(newOrders[i]);
}
}
if (deletedOrders != null && deletedOrders.Count > 0)
{
for (int i = 0; i < deletedOrders.Count; i++)
{
var target = orderList.Where(o => o.OrderID == deletedOrders[i].OrderID).FirstOrDefault();
if (target != null)
{
orderList.Remove(target);
}
}
}
return Json("Success!");
}
The html page Index.cshtml is like that
#(Html.Kendo().Grid<GridSyncChangesWithOneRequest.Models.Order>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.OrderID);
columns.ForeignKey(p => p.EmployeeID,(System.Collections.IEnumerable)ViewData["employees"], "EmployeeID", "Name");
columns.Bound(p => p.OrderDescription);
columns.Bound(p => p.Maker);
columns.Bound(p => p.checker);
//columns.Bound(p => p.checker).HeaderTemplate("Checker").ClientTemplate("<input type='checkbox' id='#= ID#,#= Name#' class='grid_checkbox'/>");
columns.Bound(p => p.Supervisor);
columns.Bound(p => p.OrderDate).Format("{0:d}");
columns.Command(c => {
c.Destroy();
});
})
.ToolBar(toolBar => toolBar.Create())
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model => {
model.Id(p => p.OrderID);
model.Field(p => p.OrderDescription).Editable(false);
model.Field(p => p.EmployeeID).Editable(false);
model.Field(p => p.OrderID).Editable(false);
model.Field(p => p.Maker).Editable(false).DefaultValue(true);
model.Field(p => p.OrderDate).Editable(false);
})
.Create(create => create.Action("Create", "Home"))
.Destroy(destroy => destroy.Action("Delete", "Home"))
.Read(read => read.Action("Read", "Home"))
.Update(update => update.Action("Update", "Home"))
) )
Pressing the saveChanges will send all current changes to the
server:
<button onclick="sendData()">Save Changes</button>
<script>
function sendData() {
var grid = $("#Grid").data("kendoGrid"),
parameterMap = grid.dataSource.transport.parameterMap;
//get the new and the updated records
var currentData = grid.dataSource.data();
var updatedRecords = [];
var newRecords = [];
for (var i = 0; i < currentData.length; i++) {
if (currentData[i].isNew()) {
//this record is new
newRecords.push(currentData[i].toJSON());
} else if(currentData[i].dirty) {
updatedRecords.push(currentData[i].toJSON());
}
}
//this records are deleted
var deletedRecords = [];
for (var i = 0; i < grid.dataSource._destroyed.length; i++) {
deletedRecords.push(grid.dataSource._destroyed[i].toJSON());
}
var data = {};
$.extend(data, parameterMap({ updated: updatedRecords }), parameterMap({ deleted: deletedRecords }), parameterMap({ new: newRecords }));
$.ajax({
url: "/Home/UpdateCreateDelete",
data: data,
type: "POST",
error: function () {
//Handle the server errors using the approach from the previous example
},
success: function () {
alert("update on server is completed");
grid.dataSource._destroyed = [];
//refresh the grid - optional
grid.dataSource.read();
}
})
} </script>
Instead of True of False i need to show only checkBox while
Editing.Is there any possible solutions? !enter image description
here

Answer 1

Check the checker field for true and false in client template
columns.Bound(p=> p.checker).ClientTemplate("# if(checker==true){#" + "<input type='checkbox' checked='checked' />" + "#}else{#" + "<input type='checkbox' />" + "#}#");

Answer 2

You could either use this Telerik answer
or this from the documentation :
columns.Bound(p => p.Enabled).ClientTemplate(
"<input type='checkbox' value='#= ProductID #' " +
"# if (Enabled) { #" +
"checked='checked'" +
"# } #" +
"/>"
);