Kendo UI for Asp.net MVC Ajax binding

17 posts, 2 answers
  1. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 19 Aug 2015 Link to this post

    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.

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 21 Aug 2015 Link to this post

    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.

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Stephan
    Stephan avatar
    6 posts
    Member since:
    Dec 2010

    Posted 23 Aug 2015 Link to this post

    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

  4. Stephan
    Stephan avatar
    6 posts
    Member since:
    Dec 2010

    Posted 23 Aug 2015 Link to this post

    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);

                }

             }

  5. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 24 Aug 2015 in reply to Rosen Link to this post

    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

  6. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 25 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 25 Aug 2015 in reply to Rosen Link to this post

    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

     

  8. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 26 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 26 Aug 2015 in reply to Rosen Link to this post

    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 

  10. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 26 Aug 2015 in reply to Rosen Link to this post

    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

  11. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 26 Aug 2015 in reply to Jeff Link to this post

    It is not grabbing the values from the cells and that is why it is false
  12. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 27 Aug 2015 in reply to Rosen Link to this post

    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.  

  14. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 27 Aug 2015 in reply to Rosen Link to this post

    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.

  16. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jul 2015

    Posted 27 Aug 2015 in reply to Rosen Link to this post

    Massive Thank you!!!!!!!!!!!!!!!!!!!!!  Wow
Back to Top