Question

目前我在我的应用程序上使用Kendo网格，但现在我有一个要求，即只需将数据源与数据一起传递，不同的数据需要绑定到单个KendoGrid。

目前为具有预定义标题的单个DataSource提供单独的网格。 HTML代码：

<div id="divShowAllReports">

</div>

AJAX调用从数据库获取数据

  <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>

成功将数据绑定到网格：

 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>")
        }
    }

但是现在面临的问题是无法将另一个数据绑定到此网格（数据与旧网格不相似）。我想只使用一个网格而不是不同的网格。

请帮助我，

谢谢你们......

Answer 1

要将新数据项设置到网格，可以使用grid的setDataSource方法

所以，首先要初始化网格。

关于ajax的成功，请调用类似的东西

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

Answer 2

您可以像这样更改网格的数据源。

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

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

grid.dataSource.read();

Answer 3

通过删除架构实现并将对象数组形式的值传递给列

$.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>")
        }
    }

根据选择将不同的DataSource绑定到单个Kendo网格

3 个答案: