Local Binding Not Working, Issues Ajax Call

2 posts, 0 answers
  1. Andy
    Andy avatar
    15 posts
    Member since:
    Oct 2012

    Posted 04 Aug 2020 Link to this post

    I have a grid that I want to bind to local data.  When I try to add a record, the widget tries to make an Ajax post back, instead of adding to the IEnumerable<T>.

    I'm running ASP Dot Net Core 3.1 with Razor Pages and Telerik 2020.2.617

    My Razor Page is as follows:

    @(Html.Kendo().Grid<CreateModel.ModelItem>().Name("grid")
        .AutoBind(true)
        .BindTo((IEnumerable<CreateModel.ModelItem>)Model.Data.LineItems)
        .Columns(cols =>
        {
            cols.Bound(c => c.Id);
            cols.Bound(c => c.Line);
            cols.Bound(c => c.Description);
            cols.Bound(c => c.Qty);
            cols.Bound(c => c.Value);
            cols.Command(c =>
            {
                c.Edit();
                c.Destroy();
            });
        })
        .Editable(GridEditMode.InLine)
        .Pageable()
        .DataSource(ds=>
            ds.Ajax()
            .Batch(false)
            .ServerOperation(false)
            .Model(m=>
            {
                m.Id(id => id.Id);
                m.Field(f => f.Id).DefaultValue(Guid.Empty);
                m.Field(f => f.Line).DefaultValue(1);
                m.Field(f => f.Description);
                m.Field(f => f.Qty).DefaultValue(1);
                m.Field(f => f.Value).DefaultValue(0.00m);
            })
        )
        .ToolBar(t=>
        {
            t.Create().Text("Add Line Item");
            t.Save();
        })
    )
  2.
  3. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 07 Aug 2020 Link to this post

    Hello, Andy,

    Apologize for the delay and thank you for the provided code snippet.

    After a thorough examination of the code, I noticed that the grid uses both BindTo and Ajax binding which is actually not supported. Since the grid seems to enable data editing I would recommend using only Ajax binding. Attached you can find a sample project (that can be used as a starting point) that follows the described scenario and illustrates a possible realization.

    Furthermore, try setting the CRUD operations in the grid's DataSource. Here is an example:

     .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
            .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
            .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
            .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
            .Model(m => m.Id(id => id.OrderID))
        .PageSize(10)
    )

    Let me know if further assistance is needed.

     

    Best Regards,
    Anton Mironov
    Progress Telerik

Back to Top