Hello.
Which is the appropriate way to set up Kendo UI for Asp.net MVC Ajax binding?
http://demos.telerik.com/aspnet-mvc/grid/index (demo link from the products page)
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-editing (google that result)
https://github.com/telerik/kendo-examples-asp-net-mvc/blob/master/grid-crud/Controllers/HomeController.cs (On github and hasn't been updated to mvc 5)
Anyone know for sure? I just find it confusing that when I google I get multiple answers for the same topic. I appreciate the assistance.
16 Answers, 1 is accepted
Hello Jeff,
How to setup AJAX binding when using UI for ASP.NET MVC wrappers is described in this help article.
You can also use the first two links from your message. Where the first link demonstrates AJAX binding with in-memory operations (ServerOperation set to false) and the second one demonstrates AJAX editing setup.
The third link, the one to GitHub, demonstrates how to populate a Kendo UI Grid without using the ASP.NET MVC wrappers.
Rosen
Telerik
Rank 1
Hello,
I have a further question regarding data model with Ajax.
In the samples, the complete data access requests are done within the Controller action, returning a JSON result object.
Maybe the question sounds a bit wear but Is it possible to use AJAX binding / JSON having the complete data loading logic outside the Controller? My intention is to have all data related access requests centralized within one model class.
I tried the following and it doesn't work:
public DataSourceResult GetListLanguage(ICore core, DataSourceRequest request, PaltrConnect db)<br> { <br> var l_query = from lang in db.C_Language<br> join texts in db.CT_Language on lang.LanguageId equals texts.LanguageId<br> where texts.LangId == core.Language<br> select new RuLanguageDto<br> {<br> Is_active = lang.Is_active,<br> LanguageId = lang.LanguageId,<br> Title = texts.Title == null ? lang.LanguageId : texts.Title<br> };<br> DataSourceResult l_result = l_query.ToDataSourceResult(request);<br> return l_result;<br> }This method will be called within the Controller action:
<p>public JsonResult Customizing_Language_Read([DataSourceRequest]DataSourceRequest request)<br> {<br> using (var db = new PaltrConnect())<br> {</p><p>DataSourceResult l_result = l_query.ToDataSourceResult(request);<br> return Json(l_result);<br> }</p><p>}</p>The grid is empty doing in this way.
Yours
Stephan
Rank 1
Hello,
Sorry for the bad formatting from above. Here again with a userfriendly version.
Method:
public DataSourceResult GetListLanguage(ICore core, DataSourceRequest request, PaltrConnect db)
{
var l_query = from lang in db.C_Language join texts in db.CT_Language on lang.LanguageId equals texts.languageId
where texts.LangId == core.Language
select new RuLanguageDto { Is_active = lang.Is_active, LanguageId = lang.LanguageId,
Title = texts.Title == null ? lang.LanguageId : texts.Title };
DataSourceResult l_result = l_query.ToDataSourceResult(request);<br> return l_result;
}
Controller action:
public JsonResult Customizing_Language_Read([DataSourceRequest]DataSourceRequest request)
{
using (var db = new PaltrConnect())
{
DataSourceResult l_result = l_query.ToDataSourceResult(request);
return Json(l_result);
}
}
Rank 1
So if I want to do inline editing then I would chose the second link? I tried the update action and it does not update and the changes go away after a refresh. Please advise or what do I need to provide to make assistance easier?
Here is my Grid helper:
public static Kendo.Mvc.UI.Fluent.GridBuilder<T> SSSGridEnabled<T> (this System.Web.Mvc.HtmlHelper helper , string name , string height ) where T : class{ return helper.Kendo().Grid<T>() .Name(name) .Pageable(pager => pager.Enabled(true).Refresh(false).PageSizes(true).Input(true).Numeric(false).PageSizes(new[] { 10, 25, 50, 100, 250, 500, 1000 })) .Filterable(f => f.Enabled(true).Mode(GridFilterMode.Menu)) .ColumnMenu() //.Excel(excel => excel.AllPages(true).Filterable(true)) // //.Groupable() .Mobile() .Navigatable() //.Pdf(pdf => pdf.AllPages().Landscape()) //.Reorderable() .Resizable(resize => resize.Columns(true)) //.Selectable() .Sortable(o => o.SortMode(GridSortMode.SingleColumn)) // .Editable(e => e.Enabled(true)) .Editable(editable => editable.Mode(GridEditMode.InLine)) //.HtmlAttributes(new { style = "height: 400px;" })c .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Batch(true) ) .Scrollable(s => s.Height(height)) //Auto=no scrolbars make as tall as necessary .ToolBar(toolbar => { toolbar.Create(); //toolbar.Save(); //toolbar.Excel(); //toolbar.Pdf(); //toolbar.Template(//Lots of other options....) });}
Here is my Controller Code:
01.public ActionResult CustomerClassGrid_Update([DataSourceRequest] DataSourceRequest request, CustomerClass cc)
02. {
03. if (ModelState.IsValid)
04. {
05. using (var context = new ApplicationDbContext())
06. {
07. var entity = new CustomerClass
08. {
09. CompanyId = cc.CompanyId,
10. CustomerId = cc.CustomerId,
11. ClassType = cc.ClassType,
12. ClassCode = cc.ClassCode
13. };
14.
15. context.CustomerClass.Attach(entity);
16.
17. context.Entry(entity).State = EntityState.Modified;
18.
19. context.SaveChanges();
20. }
21. }
And here is the view:
@(Html.SSSGridEnabled<IncentViz.Models.CustomerClass>("MainGrid2", "250px") .Columns(columns => { columns.Bound(o => o.CustomerId); columns.Bound(o => o.ClassType); columns.Bound(o => o.ClassCode); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("CustomerClass_Read", "CustomerClass").Data("{ CustomerId: " + @Model.CustomerId + "}")) .Create(create => create.Action("CustomerClassGrid_Create", "CustomerClass")) .Update(update => update.Action("CustomerClassGrid_Update", "CustomerClass")) .Destroy(destroy => destroy.Action("CustomerClassGrid_Delete", "CustomerClass")) .Model(model => { model.Id(o => o.ClassType); //PK model.Field(o => o.CustomerId).Editable(false); } ) ))Any help is appreciated
Hello Jeff,
Indeed, you could follow the second link also look at this online demo.
Could you please clarify what you mean by "does not update". The CustomerClass passed into the action is not populated? There are ModelState errors? Or the actual code to save the entity does not produce the expected result? Providing a small sample which demonstrates the issue will be appreciated.
Regards,Rosen
Telerik
Rank 1
Rosen.
"Could you please clarify what you mean by "does not update". The CustomerClass passed into the action is not populated? There are ModelState errors? Or the actual code to save the entity does not produce the expected result?"
The Update action
You fill in the information, click Update, and the change is shown on the grid. You refresh the page and the change is not there...so I believe the changes are not persisting to the database.
I tried using the online demo with my current app, but it did not work. I will try it again in a sample app.
Thanks.
Jeff
Hello Jeff,
Let me rephrase my message. Could you please check:
- if the update action method is executed.
- if the CustomerClass parameter in the action method is populated? You could do this by placing a breakpoint in the action method and inspect the variable.
- If there are ModelState errors returned by the server. Look at the server response using the browser developer tools network tab.
- or the actual EntityFramework call is not succeeding
Indeed, it will be welcomed if you could provide a small runnable sample.
Regards,Rosen
Telerik
Rank 1
Rosen.
Sorry to keep posting, but as I get more information I want to make sure I provide it to you. I setup a sample project using the following criteria:
Asp.net Telerik Asp.net Application
EF6
Database is a SQL Azure (I thought maybe this was the problem, but I was able to get the Telerik scaffold app to work)
I used code first from database to create the models
I am able to get the CRUD operations to work from the Ajax grids. I try the same code in my project and I am not able to Create/Update at all. I noticed that the ModelState is invalid. I am attaching two screenshots. The first one shows the response when the grid is populated and the second one shows what is posted (nothing...ModelState.IsValid = false) to the server. I did not set up the app that is having the problem. I am trying to figure out what is different from the Example App and the app we are developing. I appreciate any suggestions.
Thank you.
Jeff
Rank 1
More answers
Update Action method is firing (jumps straight to the return Json)
CustomerClass or Whatever class is null
Class is null so ModelState.IsValid = false
....wonder why it is not getting any values
Rank 1
Hello Jeff,
Unfortunately, I'm not sure what is causing the issue you have described looking at the provided information. Could you please show how the update request posted data looks like. Still if you could isolate the issue in a small sample it will be appreciated.
Regards,Rosen
Telerik
Rank 1
I am attaching another screenshot showing the post data (the model ItemClass ic in the ActionResult never gets populated does in both of the sample apps). The data from the I made a simple app from the Telerik Asp.net MVC app (works fine) and I have created a non-Telerik Asp.net MVC simple (works fine). They both are using the same Azure database. I don't understand why we are having such a hard time getting this to work with this project.
// Grid Edit[AcceptVerbs(HttpVerbs.Post)]public ActionResult ItemClass_Update([DataSourceRequest]DataSourceRequest request, ItemClass itemClass){ if (ModelState.IsValid && itemClass != null) { var entity = new ItemClass { CompanyId = itemClass.CompanyId, ItemId = itemClass.ItemId, ClassType = itemClass.ClassType, ClassCode = itemClass.ClassCode }; db.ItemClass.Attach(entity); db.Entry(entity).State = EntityState.Modified; db.SaveChanges(); } return Json(new[] { itemClass }.ToDataSourceResult(request, ModelState));}The above is the Update statement that is working in the other two projects. I am at a loss at this point. I will try some other things. I could attach one of the two simple apps I put together, but they work so there is no point.
Hello Jeff,
Could you please send me a screenshot of how the request's posted data looks like. This is from the network tab of the browser's developer tools. Similar to the screenshots of the server response you have sent us, but from the request tab.
Regards,Rosen
Telerik
Rank 1
Ok I have some additional screenshots displaying the posted data from Chrome/Firefox Developer/IE dev tools. I am hoping you or someone over there has seen something similar.
Thanks.
Hello Jeff,
The issue is due to setting the Batch mode to true, but having the action method configured for single entry. Setting Batch to false should address the issue in question.
Regards,Rosen
Telerik
Rank 1