Base solution for your next web application
Open Closed

KENDO UI GRID no work - AJAX response is wrapped by ABP #370


User avatar
0
klainer created

Hello,

I have problem with using KENDO UI componets with ABP. I have test home controller :

public ActionResult CategoriesRead([DataSourceRequest]DataSourceRequest request)
        {

            List<Work> lissOfWorks = new List<Work>() {
                new Work { Name = "Martin", SureName = "HAHA1", ProjectName = "Projekt A", Date = DateTime.Today },
                new Work { Name = "Ondřej", SureName = "HAHA2", ProjectName = "Projekt B", Date = DateTime.Today },
                new Work { Name = "Tomáš", SureName = "HAHA3", ProjectName = "Projekt A", Date = DateTime.Today },
                new Work { Name = "Lukáš", SureName = "HAHA4", ProjectName = "Projekt B", Date = DateTime.Today },
            };

            DataSourceResult result = lissOfWorks.ToDataSourceResult(request, work => new {
                work.Name,
                work.SureName,
                work.ProjectName,
            });

            return Json(result);
        }

In home view this:

@(Html.Kendo().Grid<BB.BB.Web.Models.Work>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(work => work.Name);
          columns.Bound(work => work.SureName);
          columns.Bound(work => work.ProjectName);
      })
      .DataSource(dataSource =>
        dataSource.Ajax().Read(read => read.Action("CategoriesRead", "Home"))
      )
      .Pageable() // Enable paging
      .Sortable() // Enable sorting
)

ABP covert ajax response with custom wrapper data and GRID no work:

error: null
result: {data: [{name: "Ondřej", sureName: "HAHA1", projectName: "Projekt A"},…], total: 4,…}
success: true
unAuthorizedRequest: false

The response should look like this:

AggregateResults: null
Data: [{Name: "Ondřej", SureName: "Pětník", ProjectName: "HAHA1 B"},…]
Errors: null
Total: 4

How solve this issue ? thanks !


10 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Doesn't KenduUI Grid have an option to intercept and manipulate AJAX response? Please check it's documentation. Then you can unwrap incoming data before KendoUI use it.

  • User Avatar
    0
    paddyfink created

    Hello,

    I have the same problem. I can't find a way to use Kendo Grid.

    @Klainer did u found a solution?

    @hikalkan Is it possible to deactivate abp ajax wrapper?

    Thank you.

  • User Avatar
    0
    hikalkan created
    Support Team

    I will implement it soon: <a class="postlink" href="https://github.com/aspnetboilerplate/aspnetboilerplate/issues/731">https://github.com/aspnetboilerplate/as ... issues/731</a>

  • User Avatar
    0
    paddyfink created

    Excellent. Thanks

    I will follow you on twitter to be notify when there is a new version.

  • User Avatar
    0
    paddyfink created

    For those having the same issue, the solution is to set a Custom DataSource configuration. This will allow you to set a custom function for the schema.parse and return the appropriate portion of the response. For example:

    @(Html.Kendo().Grid<MyModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(typeof(string), "column1");
            columns.Bound(typeof(string), "column2");
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
                .Custom()
                .ServerFiltering(true)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                    transport.Read(read => read.Action("action", "controller"))
                )
                .Schema(schema => schema
                .Model(m=>m.Id("columId"))
                  .Parse(@<text>
                        function(response) {
                        return response.result;
                        }
                    </text>)
                .Data("data")
                .Total("total")
                )
            )
        )
    

    Be aware that if a property of you Model is "PropertyName" it will became "propertyName" in ajax response. so columns.Bound(p => p.PropertyName) wont' work.

  • User Avatar
    0
    hikalkan created
    Support Team

    That's good.

    I also released v0.7.7 with a DontWrapResult attribute. You can use this in MVC actions, Web APİ actions or application service methods (in serivce interfaces).

  • User Avatar
    0
    proovit created

    Hi Paddyfink,

    Can you let me know how you managed to use Kendo in abp? Standard Telerik instructions do not seem to work and their support sends me to their kendo "getting started" page... :roll:

    Would be glad with any pointers Paddyfink!

    Regards,

    Erik

  • User Avatar
    0
    proovit created

    With help of Telerik: <a class="postlink" href="http://www.telerik.com/forums/kendo-ui-and-asp-net-boilerplate---getting-started#6t2XDg8rok2CnYbDDJ4hUg">http://www.telerik.com/forums/kendo-ui- ... nYbDDJ4hUg</a>

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks proovit, it's really appreciated.

  • User Avatar
    0
    ultimatemm created

    Working on spa but not working on mpa. I tried to work on mpa but no luck :)