Kendo Grid Paging doesn't work in Asp.Net MVC - asp.net-mvc

I am trying to bind a Kendo Grid in Asp.Net MVC but the paging doesn't work. The PageSize and the Total records are correct, the problem is that it isn't possible to navigate to the next page. All the buttons are displayed but they are disabled.
The view's code is:
<% Html.Kendo().Grid(Model)
.Name("PartListGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Title("Id").Visible (false);
columns.Bound(p => p.Quantity).Title("Quantity")).Width(130);
columns.Bound(p => p.PartNumber).Title("Part Number").Width(130);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p=>p.Id))
.PageSize(5)
.ServerOperation(false)
)
.Pageable()
.Render();
%>
The Controller's code :
public ActionResult GetPartListInfo(string id)
{
List<PartListViewModel> partList = new List<PartListViewModel>();
XrmServiceContext xrmServiceContext = new XrmServiceContext();
f1_workorder workOrder = xrmServiceContext.f1_workorderSet.Where(i => i.Id == new Guid(workOrderId)).FirstOrDefault();
PartListViewModel partViewModel = null;
foreach (f1_workorderproduct workorderproduct in xrmServiceContext.f1_workorderproductSet.Where(i => i.f1_WorkOrder.Id == workOrder.Id).ToList())
{
Product product = xrmServiceContext.ProductSet.Where(j => j.Id == workorderproduct.f1_Product.Id).FirstOrDefault();
partViewModel = new PartListViewModel();
partViewModel.Id = workorderproduct.f1_Product.Id.ToString();
partViewModel.Quantity = workorderproduct.f1_EstimateQuantity.GetValueOrDefault(0);
partViewModel.PartNumber = workorderproduct.f1_name;
partList.Add(partViewModel);
}
return View("PartList",partList);
}
Any advice is appreciated!
Thank you very much for your help!
Mimi

I bet you have to throw in a data source read configuration so that the dataset can fetch the data on paging when needed.
.DataSource(dataSource => dataSource
...
.Read(read => read.Action("YourAction", "YourController))
...

Related

Kendo Grid edit command not reaching controller

Can someone please help with my question:
The edit command in kendo grid isn't reaching my controller.
Am I missing something?
#(Html.Kendo().Grid<WEEKLY_ORDERS_LINES>()
.Name("orderDetails_edit" + Model.OrderID)
.Columns(columns =>
{
columns.Bound(e => e.ID).Hidden(true);
columns.Bound(e => e.INGRED_NAME).Title("Ingredient Name").Width(120).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Command(command => { command.Edit(); }).Width(60);
})
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("INGRED_NAME").Ascending())
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).DefaultValue(new Guid());
model.Field(f => f.INGRED_NAME).Editable(true);
})
.Update(update => update.Action("Update", "Food"))
.Read(read => read.Action("Read", "Food").Data("additionalInfo"))
)
.Events(events => events.Cancel("refreshView"))
)
And my controller is like this:
public ActionResult Update([DataSourceRequest] DataSourceRequest request, WEEKLY_ORDERS_LINES model)
{
if (model != null && ModelState.IsValid)
{
WEEKLY_FOOD dbFood = _db.WEEKLY_FOOD.Find(model.ID);
dbFood.INGRED_NAME = model.INGRED_NAME;
_db.SaveChanges();
}
ActionResult a = Json(new[] { model }.ToDataSourceResult(request, ModelState));
return a;
}
I'm a colleague of Rute.
The problem that was ocurring was that the kendo Update was calling other controller and not the right one. This was happening because all the results of the data that were being rendered didn't have an unique identifier.
This unique identifier is now assign to the model.Id and the problem is solved. I understood this after seeing this link http://www.telerik.com/forums/wrong-methods-are-fired.
Thanks for the help.

DatasourceRequest always return null when Kendo grid is in PopUp

I am trying to open kendo grid in popup on clicking of link. Kendo grid Opens in popup perfectly, but filtering and sorting functionality is not working. I am using server side Operation. When I sort particular column In controller side in DatasourceRequest I always gets value as null.
Any help is highly appreciated..
<div class="panel-body" id="countryImageData">
#(Html.Kendo().Grid(Model.GlobalInventoryImages)
.Name("InventoryCountryImageDetailsGrid")
.Columns(columns =>
{
columns.Bound(p => p.SmartInventoryID).Hidden().Title("SPC #").HtmlAttributes(new { #id = "CountrySmartInventory_Grid" });
columns.Bound(p => p.SubwayProductCode).Width(50).Title("SPC #").HtmlAttributes(new { #id = "CountrySubwayProductCode_Grid" });
columns.Bound(p => p.GlobalCaseImageName).Width(100).Title("Case Images").HtmlAttributes(new { #id = "GlobalCaseGraphicName_Grid" }).ClientTemplate(" #=GlobalCaseImageName# ");
columns.Bound(p => p.GlobalInnerImageName).Width(100).Title("Inner Images ").HtmlAttributes(new { #id = "GlobalInnerImageName_Grid" }).ClientTemplate(" #=GlobalInnerImageName# ");
columns.Bound(p => p.CountryNames).Width(100).Title("Country").HtmlAttributes(new { #id = "CountryNames_Grid" });
})
.Pageable(pager => pager.PageSizes(new int[] { 25, 50, 75, 100 }).Input(true))
.Sortable(e => e.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Scrollable()
.ColumnMenu()
.NoRecords("No Records")
.Selectable(e => e.Mode(GridSelectionMode.Multiple))
.Filterable()
.ColumnResizeHandleWidth(10)
.ColumnResizeHandleWidth(10)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.HtmlAttributes(new { #class = "custom-kendo-grid custom-kendo-grid-inv" })
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.PageSize(25)
.Read(read => read.Action("InventoryImage_Read", "Inventory").Data("function onCountryAdditonalData(){ return {subwayProductCode: $('#SubwayProductCode').val()};}"))
)
)
</div>
With MVC you have to add the following in your dataSource:
type: 'aspnetmvc-ajax'
for the filter and sort not to be null. Also, your Action method in your MVC Controller must have parameters set up like so:
public async Task<ActionResult> InventoryImage_Read([DataSourceRequest] DataSourceRequest )
You didn't post your MVC Controller Action so I wasn't sure if you had that part set up correctly. I hope this helps.

Kendo Datasource filter not working as expected

I'm using Kendo MVC grid to display data. I have to filter the data based on the url clicked by the user. Below is the code for Kendo grid
View
#(Html.Kendo().Grid<WebApplication2.ApplicationViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ApplicationStatus).Width(150);
columns.Bound(c => c.StartDate).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("equals")));
columns.Bound(c => c.EndDate).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("equals"))).Groupable(false);
})
.HtmlAttributes(new { style = "height: 500px;width:100%" })
.Groupable()
.Scrollable()
.Filterable(ftb => ftb.Mode(Kendo.Mvc.UI.GridFilterMode.Row)) // Filter Code
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("FetchData", "Home"))
.Filter(f => f.Add(p => p.ApplicationStatus).IsEqualTo(ViewBag.ApplicationStatus))
.Filter(f => f.Add(p => p.StartDate).IsGreaterThanOrEqualTo(Convert.ToDateTime(ViewBag.FromDate)))
.Filter(f => f.Add(p => p.StartDate).IsLessThanOrEqualTo(Convert.ToDateTime(ViewBag.ToDate)))
.PageSize(KendoGridConstants.KendoGridDefaultPageSize)
)
)
Controller Code:
public ActionResult ApplicationGrid(string ApplicationStatus, string fromDate, string toDate)
{
ViewBag.ApplicationStatus = ApplicationStatus == null ? "All" : ApplicationStatus;
ViewBag.FromDate = fromDate == null ? DateTime.Now.ToShortDateString() : Convert.ToDateTime(fromDate).ToShortDateString();
ViewBag.ToDate = toDate == null ? DateTime.Now.ToShortDateString() : Convert.ToDateTime(toDate).ToShortDateString();
return View();
}
public ActionResult FetchData([DataSourceRequest]DataSourceRequest request)
{
var applicationList = Dbcontext.ApplicationStatus;
return Json(applicationList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
If I keep only one filter on StartDate it works fine but if I keep both the filters, it is showing me some irrelevant data. I need to filter on date range. Any other alternative is also fine.
I know this is really old, but I had the same problem, couldn't find documentation, and ended up, as always, on Stack Overflow. So I'm contributing my solution.
Need to add additional and / or operators to the Filter statement on the DataSource:
.Read(read => read.Action("FetchData", "Home"))
.Filter(f => f.Add(p => p.StartDate).IsGreaterThanOrEqualTo(Convert.ToDateTime(ViewBag.FromDate)))
.And().IsLessThanOrEqualTo(Convert.ToDateTime(ViewBag.ToDate)))

Kendo Grid not showing data with Index action

I am using Kendo Grid for MVC.
Following is my controller and actions.
public class ComplainController : Controller
{
private MSMContext db = new MSMContext();
public ActionResult Index([DataSourceRequest]DataSourceRequest request)
{
var cOMPLAINs = db.COMPLAINs.Include(c => c.MASTER_FAULT);
var model = cOMPLAINs.Select(o => new
{
JOBSHEET_NO = o.JOBSHEET_NO,
CUSTOMER_NAME = o.CUSTOMER_NAME,
CUSTOMER_MOBILE = o.CUSTOMER_MOBILE,
COMPANY_NAME = o.COMPANY_NAME,
MODEL_NAME = o.MODEL_NAME
});
return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
public ActionResult GetData([DataSourceRequest]DataSourceRequest request)
{
var model = db.COMPLAINs.Select(o => new
{
JOBSHEET_NO = o.JOBSHEET_NO,
CUSTOMER_NAME = o.CUSTOMER_NAME,
CUSTOMER_MOBILE = o.CUSTOMER_MOBILE,
COMPANY_NAME = o.COMPANY_NAME,
MODEL_NAME = o.MODEL_NAME
});
return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
}
Now Following is my Kendo Grid Code I am using in a view.
#(Html.Kendo().Grid<WebMSM.Models.COMPLAIN>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.JOBSHEET_NO).Width(150);
columns.Bound(p => p.CUSTOMER_NAME).Width(400);
columns.Bound(p => p.CUSTOMER_MOBILE).Width(200);
columns.Bound(p => p.COMPANY_NAME).Width(200);
columns.Bound(p => p.MODEL_NAME).Width(150);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetData", "Complain"))
)
)
If I use GetData action, Kendo Grid is working fine with all data shown.
But if I use Index action, Kendo Grid displays but without data.
While using Index action, following json data is displayed without any page layout and HTML.
{"Data":[{"JOBSHEET_NO":1018,"CUSTOMER_NAME":"HEMAL RATHOD","CUSTOMER_MOBILE":"9825369987","COMPANY_NAME":"SAMSUNG","MODEL_NAME":"NOTE 3"},{"JOBSHEET_NO":1019,"CUSTOMER_NAME":"MUKESH CHAUHAN","CUSTOMER_MOBILE":"9825305305","COMPANY_NAME":"APPLE","MODEL_NAME":"IPHONE 6"}],"Total":2,"AggregateResults":null,"Errors":null}
What am I missing?
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetData", "Complain"))
)
)
needs to be changed to
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Index", "Complain"))
)
)
if you want to get it working with "Index". If your datasource never calls "Index" action method, then your grid will always be empty.

Kendo MVC Grid Within a Window DataSource Read

I'm trying to populate a kendo grid within a kendo window in MVC and am unable to find what is wrong. The window is created, and the grid is created within the window... however the DataSource's Read method is never called.
Window:
#{
Html.Kendo().Window()
.Name("DListing")
.Title("Listing")
.Draggable()
.Resizable()
.Width(1000)
.Height(500)
.Visible(true)
.Modal(true)
.Actions(actions => actions
.Maximize()
.Close())
.LoadContentFrom("Dispatch", "Listing", new { Number = #ViewBag.Number })
.Render();}
The Dispatch method in the Listing controller returns back a partial view that contains the grid.
Grid:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Events(events => events.Change("onChange"))
.HtmlAttributes(new { style = "height:400px;" })
.Columns(columns =>
{
columns.Bound(p => p.Number);
columns.Bound(p => p.DateTime).Format("{0:MM/dd/yyyy hh:mm tt}");
columns.Bound(p => p.Location);
columns.Bound(p => p.Name);
columns.Bound(p => p.Elapsed_Hours);
})
.Groupable()
.Pageable(pageable => pageable
.Numeric(false)
.Input(true)
.PageSizes(new[] { 5, 10, 25 }))
.Sortable()
.Scrollable(scrollable => scrollable
.Virtual(true))
.Filterable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(13)
.Sort(sort => { sort.Add(p => p.DateTime).Descending(); })
.Model(model => { model.Id(p => p.Number); })
.Read(read => read.Action("Listing_Read", "Listing", new { Number = #ViewBag.Number })))
)
Listing_Read Method:
public ActionResult Listing_Read([DataSourceRequest] DataSourceRequest request, int Number)
{
return Json(GetListing(branchNumber).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Also, it should be noted that I went through and verified that the viewbag data is available for both the window and later on in the grid.
For a little more back info, I initially had the grid on it's own page and it was able to call the read method and populated with the data with no issues. After moving it to populate in the window is when this became a problem.
Monitoring the http requests, the grid never attempts to call the read method (so the request isn't failing). I tried manually refreshing the datasource after the window has loaded thinking that might force the call, but that doesn't call the read method either.
I've been scratching my head on this one for a few hours now trying different things, hoping someone can spot what the problem is :)
Here's what worked for me:
1) View (~/Views/Home/Index.cshtml)
#(Html.Kendo().Window()
.Name("myWindow")
.Title("Title")
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
//.Content(Html.Partial("gridCat").ToHtmlString())
.LoadContentFrom("Load_gridCat", "Home")
)
2) Partial View (~/Views/Shared/gridCat.cshtml)
#(Html.Kendo().Grid<TelerikMvcApp1.Models.Category>()
.Name("CategoriesGrid")
.Columns(columns =>
{
columns.Bound(c => c.CategoryID).Title("Category").Width("10%");
columns.Bound(c => c.CategoryName);
columns.Bound(c => c.Description);
})
.Filterable()
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.CategoryID))
.Read(r => r.Action("Categories_Read", "Home"))
)
.HtmlAttributes(new { style = "height:250px" })
)
3) Controller (~/Controllers/HomeController.cs)
public ActionResult Load_gridCat()
{
return PartialView("gridCat");
}
public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request)
{
using (var ctx = new NWindContext())
{
IQueryable<Category> categories = ctx.Categories;
DataSourceResult result = categories.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}

Resources