I am trying to bind my KendoUI grid and I am getting a 500 server error in the console. The only thing I can think of is that it doesn't like "#(Html.Kendo().Grid()" but intellisense does not error out. Does it seem like something is setup wrong with my project? Any advice would be greatly appreciate. Below is what I have in my controller and Index.cshtml page.
public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request) {
using (var ctx = new DataEntities()) {
IQueryable<Customer> customers = ctx.Customers;
DataSourceResult result = customers.ToDataSourceResult(request);
return Json(result);
}
#(Html.Kendo().Grid<DataLibrary.Customer>()
.Name("grid")
.Columns(columns => {
columns.Bound(c => c.Name);
columns.Bound(c => c.Phone);
columns.Bound(c => c.Fax);
columns.Bound(c => c.Website);
})
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Customers"))
)
)
Does your Customer_Read method work ok?
Is the result variable populated with the results of the search?
Try adding AllowGet property.
return Json(result, JsonRequestBehavior.AllowGet);
Related
my project is asp.net core 3.1 and i tried to binding kendo grid with read action. my kendo grid is empty and doesn't show any data
this is my action:
public JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
var data = _context.Products.OrderByDescending(c => c.Id);
DataSourceResult result = data.ToDataSourceResult(request,
model => new Product
{
Id=model.Id,
Title=model.Title
});
//return Json(result, JsonRequestBehavior.AllowGet);
return Json(result);
}
and this is my kendo grid:
#model IEnumerable<DomainModel.Product>
#addTagHelper *, Kendo.Mvc
#using Kendo.Mvc.UI
#(Html.Kendo().Grid<DomainModel.Product>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.Title);
})
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Products"))
.PageSize(15)
)
)
thanks
I have been working on this Issue for quite some time now.
Basically, I'm using Kendo Grid to display data from Controller to the ViewPage.
But, when I run the view, I Keep getting this error
maxJsonLengthError
How do i rectify this problem?? Appreciate all the help in advance.
Refer to my EDIT
Here is my ControllerCode:-
public ActionResult Index()
{
ViewData["DealsList"] = objDealerModel.listDeals;
return View();
}
And Here is my ViewPage Code:-
#(Html.Kendo().Grid((IEnumerable<WCB.Models.DealerQueue>)ViewData["DealsList"])
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.DealId).Visible(false);
columns.Bound(p => p.DealRefNo).Title("Deal No");
columns.Bound(p => p.CustomerName).Title("Customer Name");
columns.Bound(p => p.DealType).Title("Deal Type");
columns.Bound(p => p.Location).Visible(false);
columns.Bound(p => p.CreatedDate).Title("Created Date");
columns.Bound(p => p.Currency).Title("Currency");
columns.Bound(p => p.Amount).Title("FCY Amount");
columns.Bound(p => p.DealValue).Title("Deal Amount").ClientTemplate("#= kendo.toString(DealValue, 'n') #");
columns.Bound(p => p.Status);
columns.Command(command => command.Custom("ViewDetails").Click("ViewDealDetails")).Title("View");
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(20))
.Sortable()
.Scrollable(scr => scr.Height("auto"))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
EDIT:
i've tried using this piece of code in myController:-
var jsonResult = Json(objDealerModel.listDeals, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Can anyone suggest based on this what changes need to be made in my viewPage for KENDO GRID?? Not too familiar with Kendo
I have a same problem and i solve this by setting a higher value for aspnet:MaxJsonDeserializerMembers in the appSettings:
<appSettings>
<add key="aspnet:MaxJsonDeserializerMembers" value="150000" />
</appSettings>
If those options are not working you could try creating a custom json value provider factory using JSON.NET as specified in this thread.
Edit:
Or if this is related to the Kendo Grid binding then you can try this.
public class MySerializer : Kendo.Mvc.Infrastructure.JavaScriptInitializer
{
public override IJavaScriptSerializer CreateSerializer()
{
var serializer = base.CreateSerializer() as DefaultJavaScriptSerializer;
serializer.MaxJsonLength = serializer.MaxJsonLength * 100;
return serializer;
}
}
Kendo.Mvc.Infrastructure.DI.Current.Register<Kendo.Mvc.Infrastructure.IJavaScriptInitializer>( () => newMySerializer() );
I have two <section> in the Index view of my MVC application and I want to render two partial views in these sections. There is no problem rendering a Kendo grid to one Index. However, in order to render data on Kendo Grid, could I use the two methods returning Json in the controller as shown below. Could you give me an example how to achieve this?
Controller:
public ActionResult Index()
{
return View();
}
public ActionResult Issues_Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<Issue> issues = db.Issues;
DataSourceResult result = issues.ToDataSourceResult(request, c => new IssueViewModel
{
ID = c.ID,
ProjectID = c.ProjectID
});
return Json(result);
}
View:
#(Html.Kendo().Grid<IssueViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ProjectID);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("Issues_Read", "Issue"))
.Create(create => create.Action("Issues_Create", "Issue" ))
.Update(update => update.Action("Issues_Update", "Issue"))
.Destroy(destroy => destroy.Action("Issues_Destroy", "Issue"))
)
)
In order to use the same partial view multiple times, grid ID should be unique so passing the ID in partial view data is one possible solution. In your case
Partial view first call:
#Html.Partial("grid", new ViewDataDictionary { { "id", "grid1" }})
Partial view second call:
#Html.Partial("grid", new ViewDataDictionary { { "id", "grid2" }})
Partial view content:
#(Html.Kendo().Grid<IssueViewModel>()
.Name(#ViewData["id"].ToString())
...
I have a sorting problem with kendo ui grid.
I have a Entity class Port, in partial class I added additional property:
public partial class Port {
[NotMapped]
[XmlIgnore]
[ScriptIgnore]
public string CountryName { get; set; }
}
I am using this property in other program parts.
In controller I have:
public ActionResult Index()
{
if (!CanViewPorts())
return new EmptyResult();
ViewBag.CanEditPorts = CanEditPorts();
return View();
}
public ActionResult Ports([DataSourceRequest] DataSourceRequest request)
{
if (!CanViewPorts())
return new EmptyResult();
var all = _classificatoryService.GetAllPorts();
return Json(all.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
I'am using method Ports in my view to populate kendo ui grid.
My view:
#(Html.Kendo().Grid<Port>()
.Name("Ports")
.ToolBar(toolbar => toolbar.Template(Toolbar().ToString()))
.Columns(columns =>
{
columns.Bound(c => c.PortId);
columns.Bound(c => c.Code);
columns.Bound(c => c.Name);
columns.Bound(c => c.AlternativeName);
columns.Bound(c => c.SubDivision);
columns.Template(#<text></text>).ClientTemplate("<a class='k-button k-button-icontext' href='" + Url.Action("Details", "Port") + "/#=PortId#'><span class='glyphicon glyphicon-edit mr5'></span>Details</a>").Width(110); //"<#=PortId#>"
columns.Template(#<text></text>).ClientTemplate("<a class='newPortBtn k-button k-button-icontext' href='" + Url.Action("NewPort", "Port") + "/?portId=#=PortId#'><span class='glyphicon glyphicon-edit mr5'></span>Edit</a>").Visible(canEditPorts).Width(110);
})
.Sortable()
.ColumnMenu()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(x => x.PortId))
.Read(read => read.Action("Ports", "Port"))
.Sort(sort => sort.Add(x => x.ChartererId).Descending())
.Create(c => c.Action("NewPort", "Port"))
))
As you can see I'a not using additional property Countryname in this view.
Ok, grid gets ports and show it properly.
Then I'am trying to sort and click column header.
First click (ASC) - Ok, grid sorted by this column in ascending order.
Second click (DESC) - Ok, grid sorted by this column in descending order.
Third click (unsort) - Grid must be unsorted, but I have 500 (Internal Server Error).
In chrome/Network/Preview I have:
Server Error in '/' Application. The specified type member 'CountryName' is not supported in LINQ to Entities. Only initializers,
entity members, and entity navigation properties are supported.
How to fix this problem?
Problem: When clicking on Update Button it does not call the controller Action. But the same work perfectly fine for Create/Read/Destroy. Anything that i am missing???? Please let me know.
View Code:
#(Html.Kendo().Grid<Model>()
.Name("XGrid")
.HtmlAttributes(new { style = "height: 525px;" })
.Columns(columns =>
{
//Columns...
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Events(events =>
{
events.Edit("onEdit");
events.Save("onSave");
})
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(12)
.ServerOperation(true)
.Model(model =>
{
model.Id(ex => ex.User_ID);
})
.Update(update => update.Action("UpdateUser", "ViewUser"))
.Read(read => read.Action("UsersRetreive", "ViewUser"))
.Create(create => create.Action("CreateUser", "ViewUser"))
)
)
Controller Code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateUser([DataSourceRequest] DataSourceRequest request,Login objUpdate)
{
if (ModelState.IsValid)
{
//Saving Code
}
else
return Json(objUpdate);
}
For GridEditMode.Inline, you have to use toolbar.Save() to save the data and hit the controller
Sure, It will not hit until you change event a one letter of any inline cell. It means if you not do modification it will not hit the action.
Try adding the HttpPost attribute to the action method, like this:
[HttpPost]
public ActionResult UpdateUser([DataSourceRequest] DataSourceRequest request,Login objUpdate)
{
}
Kendo is sending a POST and that current method is only accepting GET requests.
Also, make sure that the method is returning:
return Json(objUpdate.ToDataSourceResult(request, ModelState));