2 Answers, 1 is accepted
0
Dhaval
Top achievements
Rank 1
answered on 16 Apr 2014, 04:17 AM
I have a Kendo MVC Grid. In which I have Pagination which is Server Event and a Filter Option which Calls the Read of the Grid. But when I Include a Grouping It say's a error in the Browser Console " Cannot readproperty 'length' ". I have tried the solutions given on the other forum threads.
1)Giving .ServerOperation(false) which makes Pagination and Filtration nonfunctional. But I need .ServerOperation(true) to make my Pagination and Filtration to work.
The code is below :
#######################Kendo Grid#############################
@(Html.Kendo().Grid(Model.UpcomingMilestone)
.Name("grd_UpcomingMilestone")
.Columns(columns =>
{
columns.Bound(c => c.ProjectName).Title("Project Name").Groupable(false);
columns.Bound(c => c.NextMilestone).Title("Next Milestone Name").Groupable(false);
columns.Bound(c => c.NextMilestoneDate).Title("Next Milestone Date").ClientTemplate("#= kendo.toString(NextMilestoneDate, \"MM/dd/yyyy\") #").Groupable(false);
columns.Bound(c => c.ProjectManagerName).Title("Project Manager Name").Groupable(false);
columns.Bound(c => c.TeamLeadName).Title("Team Lead Name").Groupable(false);
columns.Bound(c => c.WeekStartDate).ClientTemplate("#= kendo.toString(WeekStartDate, \"MM/dd/yyyy\") #");
})
.Pageable(pageable => pageable
.Refresh(true)
.ButtonCount(5)) // Enable paging
//.Groupable()
.HtmlAttributes(new { @class = "grd_UpcomingMilestone" })
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Data("filterGridParams").Action("FilteredUpcomingMilestone", "UpcomingMilestone"))// Set the action method which will return the data in JSON format
.PageSize(10)
//.Group(group => group.Add(c => c.WeekStartDate))
//.ServerOperation(false)
)
)
###############################Filter Expression###############################################
function filterGridParams() {
return {
TeamLeadPersonId: $("#ddlTeamLead").data("kendoDropDownList").value(),
ProjectManagerPersonId: $("#ddlProjectManager").data("kendoDropDownList").value()
};
}
#################################Button Click For Filteration##########################################
<input id="GoButton" onclick="fun_FilteredUpcomingMilestone()" type="button" class="GoButton" value="Go" />
function fun_FilteredUpcomingMilestone() {
UpdateHiddenFieldValues();
//call the read method of the Grid, with Parameters and set the page Index to one
var grd_UpcomingMilestone = $("#grd_UpcomingMilestone").data("kendoGrid");
grd_UpcomingMilestone.dataSource.page(1);
}
###############################Action #################################
public ActionResult FilteredUpcomingMilestone([DataSourceRequest] DataSourceRequest request, string TeamLeadPersonId, string ProjectManagerPersonId)
{
var UpcomingMilestoneModel = new UpcomingMilestoneModel();
var upcomingMilestoneModel = new PagedDataResult<UpcomingMilestoneData>();
if (UpcomingMilestoneModel.FirstTimeLoad)
{
//First time call, do not load the data
UpcomingMilestoneModel.UpcomingMilestone = new List<UpcomingMilestoneData>();
}
else
{
//Load the data, for other events
upcomingMilestoneModel = UpcomingDAL.GetUpcomingMilestoneData (request.ToPageDataInfo<UpcomingMilestoneData>(), TeamLeadPersonId, ProjectManagerPersonId);
UpcomingMilestoneModel.UpcomingMilestone = upcomingMilestoneModel.ResultList;
}
UpcomingMilestoneModel.FirstTimeLoad = false;
return Json(new DataSourceResult
{
Data = UpcomingMilestoneModel.UpcomingMilestone, // Process data (paging and sorting applied)
Total = upcomingMilestoneModel.TotalRecords // Total number of records
});
}
1)Giving .ServerOperation(false) which makes Pagination and Filtration nonfunctional. But I need .ServerOperation(true) to make my Pagination and Filtration to work.
The code is below :
#######################Kendo Grid#############################
@(Html.Kendo().Grid(Model.UpcomingMilestone)
.Name("grd_UpcomingMilestone")
.Columns(columns =>
{
columns.Bound(c => c.ProjectName).Title("Project Name").Groupable(false);
columns.Bound(c => c.NextMilestone).Title("Next Milestone Name").Groupable(false);
columns.Bound(c => c.NextMilestoneDate).Title("Next Milestone Date").ClientTemplate("#= kendo.toString(NextMilestoneDate, \"MM/dd/yyyy\") #").Groupable(false);
columns.Bound(c => c.ProjectManagerName).Title("Project Manager Name").Groupable(false);
columns.Bound(c => c.TeamLeadName).Title("Team Lead Name").Groupable(false);
columns.Bound(c => c.WeekStartDate).ClientTemplate("#= kendo.toString(WeekStartDate, \"MM/dd/yyyy\") #");
})
.Pageable(pageable => pageable
.Refresh(true)
.ButtonCount(5)) // Enable paging
//.Groupable()
.HtmlAttributes(new { @class = "grd_UpcomingMilestone" })
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax() // Specify that ajax binding is used
.Read(read => read.Data("filterGridParams").Action("FilteredUpcomingMilestone", "UpcomingMilestone"))// Set the action method which will return the data in JSON format
.PageSize(10)
//.Group(group => group.Add(c => c.WeekStartDate))
//.ServerOperation(false)
)
)
###############################Filter Expression###############################################
function filterGridParams() {
return {
TeamLeadPersonId: $("#ddlTeamLead").data("kendoDropDownList").value(),
ProjectManagerPersonId: $("#ddlProjectManager").data("kendoDropDownList").value()
};
}
#################################Button Click For Filteration##########################################
<input id="GoButton" onclick="fun_FilteredUpcomingMilestone()" type="button" class="GoButton" value="Go" />
function fun_FilteredUpcomingMilestone() {
UpdateHiddenFieldValues();
//call the read method of the Grid, with Parameters and set the page Index to one
var grd_UpcomingMilestone = $("#grd_UpcomingMilestone").data("kendoGrid");
grd_UpcomingMilestone.dataSource.page(1);
}
###############################Action #################################
public ActionResult FilteredUpcomingMilestone([DataSourceRequest] DataSourceRequest request, string TeamLeadPersonId, string ProjectManagerPersonId)
{
var UpcomingMilestoneModel = new UpcomingMilestoneModel();
var upcomingMilestoneModel = new PagedDataResult<UpcomingMilestoneData>();
if (UpcomingMilestoneModel.FirstTimeLoad)
{
//First time call, do not load the data
UpcomingMilestoneModel.UpcomingMilestone = new List<UpcomingMilestoneData>();
}
else
{
//Load the data, for other events
upcomingMilestoneModel = UpcomingDAL.GetUpcomingMilestoneData (request.ToPageDataInfo<UpcomingMilestoneData>(), TeamLeadPersonId, ProjectManagerPersonId);
UpcomingMilestoneModel.UpcomingMilestone = upcomingMilestoneModel.ResultList;
}
UpcomingMilestoneModel.FirstTimeLoad = false;
return Json(new DataSourceResult
{
Data = UpcomingMilestoneModel.UpcomingMilestone, // Process data (paging and sorting applied)
Total = upcomingMilestoneModel.TotalRecords // Total number of records
});
}
0
Hello Dhaval,
If you have further questions please send them in the other forum thread that you opened on the same subject.
http://www.telerik.com/forums/mvc-kendo-grid-with-server-side-pagination-and-grouping#jWLOwHobVUGG09menSdC4w
Kind Regards,
Petur Subev
Telerik
If you have further questions please send them in the other forum thread that you opened on the same subject.
http://www.telerik.com/forums/mvc-kendo-grid-with-server-side-pagination-and-grouping#jWLOwHobVUGG09menSdC4w
Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!