Can't seem to get the grid to populate from a kendo.data.DataSource

[Sam Phillips]

I'm trying to build an interface where I change the grid's datasource based on a drop down.  The datasource is dynamic (meaning I don't know what columns will returned).

If I use the kendo.data.DataSource set to a static set of JSON data, it populates during the on_change event properly. 

If I use an external source... nothing happens.  The data is fetched from the server, but nothing renders.  I'm really stuck.  

I dumbed it down to raw basics... but still no progress.  Can someone spot my mistake or give me advice?  

I suspect something to do with the DataSourceRequest parameter.... but I can't spot it.

Thanks!

Sam

 

 @(Html.Kendo().Grid<dynamic>()    
            .Name("logViewGrid")
            .Pageable(pager => pager
                    .Input(false)
                    .ButtonCount(4)
                    .PageSizes(new int[] {5, 10, 20, 100, 500})
                    .AlwaysVisible(false)
            )
            .Sortable()
            .ToolBar(t => {
                    t.Excel();
                    t.Search();
            })
            .Excel(excel => excel
                .AllPages(true)
            )
            .Scrollable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
            .HtmlAttributes(new { style = "height:430px;" })
           
        )

 

<script>

 var logDataSource2 = new kendo.data.DataSource({
            data: [
                { name: "John Doe", age: 33 },
                { name: "Joe Smith", age: 55 }
            ]
        });

    var logDataSource;

    function logViewDropdown_change() {
       var value = $("#logViewDropdown").val();
       if (value != "")
       {
           logDataSource = new kendo.data.DataSource({
                                type: "odata",
                                serverFiltering: true,
                                serverPaging: true,
                                serverSorting: true,
                                pageSize: 10,
                                transport: {
                                    read: {
                                        url: "/Log/GetLogDataForOne" 
                                    }
                                }
                            });   

            var grid = $("#logViewGrid").data("kendoGrid");
            grid.setDataSource(logDataSource); // this works if I set it to logDataSource2

       }

</script>

 

Here's my test controller:

    [Authorize(Roles = "Log Admin")]
    public IActionResult GetLogDataForOne([DataSourceRequest] DataSourceRequest request)
    {
        System.Collections.Generic.IEnumerable<dynamic> dynamicList;
        dynamicList = Global.SqlDataAccess.GetDynamicData("SELECT TOP 2 ActivityInformation FROM log.WebsiteActivity");
        return Json(dynamicList.ToDataSourceResult(request)); //
    }

[Aleksandar]

Hello Sam,

If I understand correctly you would like to update more than the dataSource for the Grid - I see the different dataSources also have different models and the Gird is supposed to have different columns. In this case I can suggest using the setOptions method:

function onChange(e){
    var grid = $("#logViewGrid").data("kendoGrid");
    grid.columns=[]
    if(e.sender.value() == 1){
         grid.setOptions({
             dataSource:logDataSource
            }); 
    }
    if(e.sender.value() == 2){
         grid.setOptions({
             dataSource:logDataSource2
            });  
    }
}

Here is a sample REPL.

You may also find useful the following articles demonstrating how you can create dynamic grids on the client:

Generate DataSource Model from Retrieved Data

Create Grids with Dynamic Columns and Data Types

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Sam Phillips]

This worked nicely, thanks for the REPL.  I ran into an issue with my Column Name having spaces.  For now its not a big deal.  Thanks again!