Set initial filter on a boolean field column on load - kendo-grid

Telerik Kendo MVC Grid - How do I set onload/initial filter equals True with checkbox columns?
I am trying to set a True/False column filter to True on initial load. My Viewmodel has a bool property called IsHoliday. I have followed the example in the link above but i don't have any records showing in the grid at startup. My read action returns a JSON of IEnumerable as suggested in the referenced link. My View is as follows:
#(Html.Kendo().Grid<HolidayVM>()
.Name("h_grid")
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.ServerOperation(false)
.Events(events => events.Error("grid_error")) // Handle the "error" event
.Model(model =>
{
model.Id(m => m.Date);
model.Field(m => m.Date).Editable(false);
})
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))
.Read(read => read.Action("Holiday_Read", "Holiday"))
.Update(up => up.Action("Holiday_Update", "Holiday").Data("grid_sendAntiForgery"))
)
.Columns(columns =>
{
columns.Bound(p => p.Date).Width(30).Format("{0:dd-MMMM}");
columns.Bound(p => p.HolidayText).Width(100).Filterable(false);
columns.Bound(p => p.IsHoliday)
.ClientTemplate("<input type='checkbox' #= IsHoliday ? '' : checked='checked' # disabled='disabled' />")
.Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
.Width(30);
columns.Command(cmd =>
{
cmd.Edit().HtmlAttributes(new { title = "Edit" });
}).Title("Commands").Width(25);
})
.Pageable()
.Sortable()
)
Ideally I will like my grid to look like in attached image, on load, with IsHoliday set to True

I finally figured it out.
.Filter(f => f.Add(m => m.IsHoliday).IsEqualTo(true))
instead of
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))

use this easily:
columns.Bound(p => p.ISProperty).ClientTemplate("#= ISProperty? 'Yes' : 'No' #")

Related

Show 2 child grids at the same level in a single parent grid in ASP.NET Kendo MVC

Can anyone please provide me the similar solution using kendo MVC as in the below link?
Creating 2 child kendo grids at the same level
Thanks!
Use the client template features. So on your grid:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(130);
columns.Bound(e => e.LastName).Width(130);
columns.Bound(e => e.Country).Width(130);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
>> refer to the template
.ClientDetailTemplateId("template")
... etc
Then make the template with the 2 grids:
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(150);
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
columns.Bound(o => o.ShipName).Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid2_#=EmployeeID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(150);
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
columns.Bound(o => o.ShipName).Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
The .ToClientTemplate() is important. Also need to have different grid names for each row. You can mix in other HTML for organization if desired. See here.

MVC Telerik grid not binding only displaying json data in browser

I am trying to get a telerik grid to display json data that is being return from a controller action but the only it displays the actual json data in the browser window.
Am i supposed to call .BindTo after read?
Am i doing something wrong in my action?
am i going about this all wrong?
[HttpGet]
public ActionResult ReadLeads([DataSourceRequest]DataSourceRequest request)
{
var model = new RecordLookupViewModel();
using (var db = new RGI_MasterEntities())
{
db.Configuration.ProxyCreationEnabled = false;
var results = db.tblMasterLeads
.Where(
x => (model.FirstName == null || x.FirstName.Equals("Eric"))
&& (model.RecordType == null || x.MasterLeadType.Equals("Responder"))
)
.Select(s => new LookupGridResults
{
FirstName = s.FirstName,
LastName = s.LastName,
City = s.city,
State = s.state,
County = s.county,
Zip = s.zip
}).Take(10);
var result = results.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
Hers is my view code for the grid.
#(Html.Kendo().Grid<LookupGridResults>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Width(225);
columns.Bound(p => p.LastName).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.City).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.County).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.State).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(p => p.Zip).Width(225).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Read(read => read.Action("ReadLeads", "LeadsManagement").Type(HttpVerbs.Get))
)
)
Here are my results btw.
{"Data":[{"LastName":"COFFEY","FirstName":"EDWARD","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2304"},{"LastName":"DESPAIN","FirstName":"TONY","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-9397"},{"LastName":"HALBIG","FirstName":"RONALD","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-1556"},{"LastName":"KRAUS","FirstName":"REBECCA","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2714"},{"LastName":"LAWLESS","FirstName":"MEREDITH","City":"CAMPBELLSVILLE","County":"TAYLOR","State":"KY","Zip":"42718-1556"},{"LastName":"RANKIN","FirstName":"PAULINE","City":"LAWRENCEBURG","County":"ANDERSON","State":"KY","Zip":"40342-1374"},{"LastName":"SHIRLEY","FirstName":"LORRAINE","City":"CAMPBELLSVLLE","County":"TAYLOR","State":"KY","Zip":"42718-1557"},{"LastName":"STAPLES","FirstName":"DAMON","City":"HODGENVILLE","County":"LARUE","State":"KY","Zip":"42748-1208"},{"LastName":"WILLIAMS","FirstName":"LUCY","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-2308"},{"LastName":"WILSON","FirstName":"BELIDA","City":"FRANKFORT","County":"FRANKLIN","State":"KY","Zip":"40601-1321"}],"Total":10,"AggregateResults":null,"Errors":null}
Thanks for all the help, it seemed i was missing a reference to a bundle. I do credit Mark Schultheiss for pointing me in the right direction.
Got it completly working today. Here is what fixed it.
I changed my actionresult to a JsonResult.
I had filtering turned on in the grid but none of my columns had filtering attributes.
I think thats about it. It works great now.

Kendo Grid simple ajax binding and sorting

The error that i have received when tried to sort the Kendo grid by clicking on the Customer ID column is: {"Invalid property or field - 'CustomerID' for type: OMS_CUSTOMER"}. What else is needed to bind the columns of grid, model view and model. Thanks
controller _read function:
IQueryable<OMS_CUSTOMER> CustomerList = this.dbContext.OMS_CUSTOMERs;
DataSourceResult result = CustomerList.ToDataSourceResult(request
, ModelState
, c => new CustomerViewModel
{
CustomerID = c.OMS_CUSTOMER_ID,
CustomerName = c.CUSTOMERNAME
});
return Json(result);
View:
#model IEnumerable<NCBA.ViewModels.CustomerViewModel>
#(Html.Kendo().Grid<NCBA.ViewModels.CustomerViewModel>()
.Name("grid-CustomerViewModel")
.DataSource(dataSource => dataSource
.Ajax()
.Model(
model =>
{
model.Id(cust => cust.CustomerID);
}
)
.Create(create => create.Action("_Create", "Customer"))
.Read(read => read.Action("_Read", "Customer"))
.Update(update => update.Action("_Update", "Customer"))
.Destroy(destroy => destroy.Action("_Delete", "Customer"))
)
.Columns(columns =>
{
columns.Bound(c => c.CustomerID);
columns.Bound(c => c.CustomerName);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("Commands").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
)

Kendo Grid Read Action Not Passing Data To Controller Via the .Data Method Call

I have a Kendo Grid (MVC Razor) that I am trying to have pass extra data to the controller via the .Data call off of the Read method:
#(Html.Kendo().Grid<AssignedSiteGridPoco>()
.Name("UnAssignedSiteGrid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Columns(columns =>
{
columns.Bound(p => p.SiteId).Hidden();
columns.Bound(p => p.SiteName).Title("Site Name").Width(180);
columns.Bound(p => p.City).Title("City").Width(80);
columns.Bound(p => p.StateName).Title("State Name").Width(100);
columns.Command(command => command
.Custom("Add")
.Click("unassignedSiteGridClick")
).Width(90);
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Events(events =>
{
//events.Change("GridChange");
//events.DataBound("OnDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SiteId);
model.Field(p => p.SiteName);
model.Field(p => p.City).Editable(false);
model.Field(p => p.StateName).Editable(false);
})
.PageSize(15)
.Read(read => read.Action("GetUnassignedSiteGridDataList", "Manager").Data("getUserRightName"))
))
The Javascript block, placed above the grid div, is as follows:
function getUserRightName() {
return
{
UserRightName : "2"
};
}
And the controller:
public JsonResult GetUnassignedSiteGridDataList([DataSourceRequest]DataSourceRequest request, string UserRightName)
{
var model = new AssignedSiteGridPoco();
var siteList = _managerPresentationService.GetUnassignedSiteGridDataList(model);
return Json(siteList.ToDataSourceResult(request));
}
The string value being passed from the view's read method is null in the "UserRightName" string. According to the examples, it should pass back the text value "2" My Version of Kendo is: 2014.2.807 InternalBuild. Is there a problem in this build in this area?
Thanks,
Steven
Wrap the key name in the json structure into quotes i.e.
change your js function to this:
function getUserRightName() {
return {'UserRightName':"2"};
}

Kendo Grid Custom Filter Dropbox

I am trying to use the custom filtering features of the Kendo Grid. Using Telerik's documentation, I attempted to code the grid per the script below. Notice the "filterable" property on the "Image Type" column. When I pass in a simple boolean true or false, it works. When I use the documentation provided on Telerik's site and pass in a delegate value, it breaks. We're on Kendo version v2013.3.1324. Is this a known issue? Was this area improved after this release?
#(Html.Kendo().Grid<OKN02.Models.ImagingEvent>()
.Name("grid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Columns(columns =>
{
columns.Bound(p => p.ImagingEventId).Hidden();
columns.Bound(p => p.PatientName).Title("Patient Name").Width(90);
columns.Bound(p => p.PatientDOB).Title("DOB").Width(40);
columns.Bound(p => p.Prescriber).Title("Prescriber").Width(80);
columns.Bound(p => p.Site).Title("Site").Width(60);
columns.Bound(p => p.ConfirmationsComplete).Title("Confirmations Complete").Width(90);
columns.Bound(p => p.ImagingDate).Title("Imaging Date").Format("{0:yyyy/MM/dd hh:mm tt}").Width(80);
columns.Bound(p => p.ImageType)
//.Title("Image Type")
.Filterable(filterable => filterable.UI("ImageTypeFilter"))
//.Filterable(true)
.Width(40);
columns.Bound(p => p.OverallStatus).Title("Overall Status").ClientTemplate("#= buildStatusTemplate(OverallStatus) #").Width(40);
})
.Filterable(filterable => filterable
.Extra(true)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
.Events(events =>
{
events.Change("GridChange");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ImagingEventId);
model.Field(p => p.PatientName);
model.Field(p => p.PatientDOB);
model.Field(p => p.Prescriber);
model.Field(p => p.Site);
model.Field(p => p.ImagingDate);
model.Field(p => p.ImagingType);
})
.PageSize(15)
.Read(read => read.Action("MDPortalFiles_Read", "MDPortal").Type(HttpVerbs.Post))
))