Bind different DataSource's to a single Kendo grid, based on selection

Question

Currently i am using Kendo grids on my application, But now i got one requirement that different datasouces need to bind to a single KendoGrid by just passing datasource with data.

Currently having individual grids for individual DataSources with predefine Headers. HTML code:

<div id="divShowAllReports">

</div>

AJAX call to get Data from DB

  <script>
        $(function () {
            $.ajax({
                url: '@Url.Action("GetAndShowAdhocReports", "AdhocReport")',
                type: "POST",
                success: function (result) {
                    debugger;`enter code here`
                    BindGrid(result.lstAdhocReports);
                    //BindAdhocReport(result.lstAdhocReports);

                },
                error: function (error) {
                    alert("Failed");
                }
            })

        })
    </script>

on Success Binding Data to grid:

 function BindGrid(data) {
        if (data != "" || data != undefined) {
            $("#divShowAllReports").kendoGrid({
                dataSource: {
                    data: data,
                    schema: {
                        model: {
                            fields: {
                                ReportID: { type: "string" },
                                ReportName: { type: "string" },
                                ReportQuery: { type: "string" },
                                IsAccessToAll: { type: "string" },
                                CustomerID: { type: "string" },
                                CustUserID: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                pageable: true,
                columns: [{
                    field: "ReportName", title: "Report Name",
                    template: "<a value='#=ReportQuery#' href='javascript:void(0)' onclick=ShowAdhocGrid(this)>#=ReportName#</a>"
                },
                    { field: "ReportID", title: "ReportID", hidden: true },
                    { field: "ReportQuery", title: "Report Query" },
                    { field: "IsAccessToAll", title: "Is Access to All" },
                    { field: "CustUserID", title: "CustUserID", hidden: true },
                    { field: "CustomerID", title: "CustomerID", hidden: true },

                ]
            });
        }
        else {
            $("#divShowAllReports").html("<h4>No data Available</h4>")
        }
    }

But now the problem iam facing is unable to bind another data to this grid(data not similar to old one). I want to use only one grid instead of different grids.

Please help me,

Thank you guyss...

Answer 1

To set new data items to your grid, you can use grid's setDataSource method

So, first you initialize the grid.

And on ajax success, call something like this

var dataSource = new kendo.data.DataSource({
      data: yourRetrievedData
});
var grid = $("#divShowAllReports").data("kendoGrid");
grid.setDataSource(dataSource);

Answer 2

i Achieved by Removing Schema and passed the values in the form of array of objects to columns

$.ajax({
            url: '@Url.Action("ShowSelectedAdhocReports", "AdhocReport")',
            type: "POST",
            data: { QueryString: e.outerHTML.split('"')[1] },
            success: function (result) {
                debugger;
                var vData = result.lstAdhocReports;
                var vColumnName = [];
                var vMainList = [];
                for (var loop = 0; loop < vData.length; loop++) {
                    var vInnerList = {};
                    var vInnerData = vData[loop];
                    for (var innerloop = 0; innerloop < vInnerData.length; innerloop++) {
                        vInnerList[vInnerData[innerloop].Key] = vInnerData[innerloop].Value;
                        if (loop == 0) {
                            vColumnName.push(vInnerData[innerloop].Key);
                        }
                    }
                    vMainList.push(vInnerList);
                }
                //BindGridTest(vMainList);
                BindAdhocReport(vMainList, vColumnName);
            },
            error: function (error) {
                alert("Failed");
            }
        })


function BindAdhocReport(dataToBind, columnName) {
        $("#divAdhocReportGrid").html("");
        debugger;
        if (dataToBind != undefined) {
            var vBodyColumns = [];
            //body columns
            for (var i = 0; i < columnName.length; i++) {
                vBodyColumns.push({ field: columnName[i], title: columnName[i] });
            }
            debugger;

            $("#divAdhocReportGrid").kendoGrid({
                dataSource: {
                    data: dataToBind,
                    pageSize: 10,
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                pageable: true,
                columns: vBodyColumns

            });
        }
        else {
            $("#divAdhocReportGrid").html("<h4>No data Available</h4>")
        }
    }

Answer 3

You can change the data source of the grid like this.

var grid = $("#ProposalGridX").data("kendoGrid");

grid.dataSource.transport.options.read.url = "/Controller/Action";

grid.dataSource.read();