This is a migrated thread and some comments may be shown as answers.

Correct way to apply different datasources to a grid

1 Answer 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 24 Jul 2018, 12:51 PM

Hi,

In my current implementation I have a page that is set up as stated in my previous post:
https://www.telerik.com/forums/autobind(false)-not-adding-a-new-row-when-grid-is-empty 

The above implementation sets up my datasource in the initialization of the grid and populates the grid with the data from the API.

What am I trying to achieve?

I am looking for a way to design 2 sets of datasources and apply the selected datasource to the grid based on a button click.

My current attempt looks like this:

@(Html.Kendo()
                .Grid<CoreMVC.ViewModels.SysuserViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                   ...

                })
                    .ToolBar(toolbar =>
                    {
                        toolbar.Create();
                        toolbar.Save();
             })
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Filterable(filterable => filterable
                            .Extra(false)
                            .Operators(operators => operators
                                .ForString(str => str.Clear()
                                    .StartsWith("Starts with")
                                    .EndsWith("Ends with")
                                    .IsEqualTo("Is equal to")
                                    .IsNotEqualTo("Is not equal to")
                                    .Contains("Contains")
                                    .DoesNotContain("Doesn't contain")
                                ))
                            )
                .Pageable()
                .Navigatable()
                .ColumnMenu()
                .AutoBind(false)
                .Sortable()
                .Editable()
                .Resizable(resizable => resizable.Columns(true))
                .Scrollable(scr => scr.Height(800))
                .Reorderable(reorderable => reorderable.Columns(true))
                .DataSource("dataSource1")
)

 

@(Html.Kendo().DataSource<CoreMVC.ViewModels.SysuserViewModel>()
        .Name("dataSource1")
        .Ajax(dataSource => dataSource
           .PageSize(10)
           .Model(m =>
           {
               m.Id(p => p.userid);
               m.Field(p => p.role).DefaultValue(ViewData["defaultRole"] as CoreMVC.ViewModels.RoleViewModel);
           })

           //.Events(ev => ev

           //.Error("error_handler")
           //.Push("onPush")
           //.Sync("sync_handler")

           //)
           .Read(read => read
           .Url(Base.APIHostAddress + "/api/user/getall")
           .Type(HttpVerbs.Get)
           )
        )
)

This datasource successfully hits my API and returns JSON but the grid is not populated and there is no error message. Is this because I am not specifying a DataType as "json" on the datasource? If so, I am unable to find the correct place to state the datatype with this datasource.

The return of the API looks like this: "return Json(userList);" where userList isa  List<userDTO>.

I have commented out the events, but i am also receiving errors on the events saying that the methods cannot be found even though they are present and work when I use the implementation from the forum post i created stated above.

Thank you in advance!

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 27 Jul 2018, 11:58 AM
Hi Adam,

I would suggest you to try moving the DataSource and event handler scripts before the Grid declaration. It is possible that the Grid initialization scripts run before the DataSource is created and before the event handlers are rendered in the page (especially if this is a partial view).
Also, I see the Grid is declared with AutoBind(false) setting, could you show me where you actually trigger DataSource read() to do the binding?

Additionally, by default the Grid is configured to bind to a response produced by a DataSourceResult object. You can try returning your response like this:
var result = userList.ToDataSourceResult();
return Json(result);
 
// or if you do not want the ToDataSourceResult method to do the filtering for you, use
 
 var result = new DataSourceResult()
{
      Data = userList,
      Total = userList.Count()
};

Let me know how this goes.

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or