Webforms Grid 不显示它的数据绑定数据

Question

我正在为 Webforms 使用 Syncfusions Grid 控件（请参阅我基于的 Demo）。我有一个非常简单的 UserControl，上面有以下内容：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NAVPrices.ascx.cs" Inherits="Q5.NAVPrices" %>
<ej:Grid ID="PriceListGrid" runat="server" ClientIDMode="Static" AllowSelection="True">
    <Columns>
        <ej:Column Field="ID" HeaderText="ID" IsPrimaryKey="True" TextAlign="Right" Width="125"></ej:Column>
        <ej:Column Field="Description" HeaderText="Description" Width="100" />
        <ej:Column Field="CustomerNo" HeaderText="Customer Number" Width="100" />
        <ej:Column Field="CustomerName" HeaderText="Customer" Width="150" />
        <ej:Column Field="Status" HeaderText="Status" Width="100" />
        <ej:Column Field="CreatedBy" HeaderText="Created" Width="100" />
        <ej:Column Field="ApprovedBy" HeaderText="Approved" Width="100" />
    </Columns>
</ej:Grid>
Details Grid
<ej:Grid ID="PriceLineGrid" runat="server" ClientIDMode="Static">
    <Columns>
        <ej:Column Field="ID" HeaderText="ID" IsPrimaryKey="true" TextAlign="Right" Width="75" />
        <ej:Column Field="PriceListId" HeaderText="PriceList ID" Width="80" />
        <ej:Column Field="Description" HeaderText="Description" Width="75" />
        <ej:Column Field="LastCost" HeaderText="Last Cost" TextAlign="Right" Width="75" Format="{0:C}" />
        <ej:Column Field="SubGroup" HeaderText="Sub Group" Width="80" />
        <ej:Column Field="MfgName" HeaderText="Mfg Name" Width="110" />
        <ej:Column Field="Comment" HeaderText="Comment" Width="110" />
    </Columns>
</ej:Grid>

<script type="text/javascript">
        $(function () {
            $("#PriceListGrid").ejGrid({
                selectedRowIndex: 0,
                rowSelected: function (args) {
                    var priceListId = args.data.ID;
                    var detaildata = window.ej.DataManager(window.gridData).executeLocal(window.ej.Query().where("PriceListId", window.ej.FilterOperators.equal, priceListId, false).take(10));
                    var gridObj = $("#PriceLineGrid").ejGrid("instance");
                    gridObj.dataSource(window.ej.DataManager(detaildata.slice(0, 5)));
                }
            });
        });
</script>

然后后面的代码在Page_Load()上调用了下面的方法

    public void GetPriceLists()
    {
        if (this.EntityId != null)
        {
            SetCustomerNoFromId(this.EntityId, this.EntityType);

            var priceLists = BusinessLayer.Company.GetPriceLists(this.CustomerNo);
            this.PriceListGrid.DataSource = priceLists;
            this.PriceListGrid.DataBind();
        }

    }

    private void GetPriceLineItems()
    {
        if (this.CurrentPriceListItem != null)
        {
            var priceLineItems = BusinessLayer.Company.GetPriceLineItems(this.CurrentPriceListItem);
            this.PriceLineGrid.DataSource = priceLineItems;
            this.PriceLineGrid.DataBind();
        }
    }

我已逐步完成代码，并且我的 IList<PriceList> 正在填充我的数据层中的对象，正如我所期望的那样，它的格式正确，我可以看到。

这是 2 个对象的样子：

    [Serializable]
public class PriceList
{
    public string ID { get; set; }
    public string Description { get; set; }
    public string CustomerNo { get; set; }
    public string CustomerName { get; set; }
    public string Status { get; set; }
    public string CreatedBy { get; set; }
    public string ApprovedBy { get; set; }  
}

[Serializable]
public class PriceLineItems
{
    public string ID { get; set; }
    public string PriceListId { get; set; }
    public string Description { get; set; }
    public string LastCost { get; set; }
    public string SubGroup { get; set; }
    public string MfgName { get; set; }
    public string Comment { get; set; }
}

编辑

作为参考，这是有效的 JavaScript：

    $(function() {
    var $data = $("#PriceLineGrid").ejGrid("instance")._dataSource();
    $("#PriceListGrid").ejGrid({
        selectedRowIndex: 0,
        rowSelected: function(args) {
            var priceListId = args.data.ID;
            var detaildata = ej.DataManager($data).executeLocal(ej.Query().where("PriceListId", ej.FilterOperators.equal, priceListId, false).take(10));
            var gridObj = $("#PriceLineGrid").ejGrid("instance");
            gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));
        }
    });
});

我现在的问题是，我实际上并没有用所有行填充 PageLoad 上的 Grid2，因为实在是太多了。所以我需要更改它以在我的代码后面调用一个方法...我将为此打开一个新线程。

Answer 1

将您的 IList 变量转换为 List:

public void GetPriceLists()
{
    if (this.EntityId != null)
    {
        SetCustomerNoFromId(this.EntityId, this.EntityType);

        var priceLists = BusinessLayer.Company.GetPriceLists(this.CustomerNo);
        this.PriceListGrid.DataSource = priceLists.ToList(); // here
        this.PriceListGrid.DataBind();
    }
}

private void GetPriceLineItems()
{
    if (this.CurrentPriceListItem != null)
    {
        var priceLineItems = BusinessLayer.Company.GetPriceLineItems(this.CurrentPriceListItem);
        this.PriceLineGrid.DataSource = priceLineItems.ToList(); // and here
        this.PriceLineGrid.DataBind();
    }
}

Answer 2

在您的情况下，如果两个 grids 都没有填充网格，则原因如下。

初始渲染时

Syncfusion 网格与 IEnumerable 配合良好，正如 Chris Schiffhauer 建议的那样，将 priceLists 和 priceLineItems 更改为 List

priceLineItems.ToList();

 and

priceLists.ToList();

在主行 selected

并且在 PriceListGrid 的 rowSelected 事件中，您使用 window.gridData 作为数据源来过滤详细信息网格 (PriceLineGrid) 数据。但是 window.gridData 将不包含 PriceListId 字段，因此也不会在行 select 上填充任何数据。

 var detaildata = window.ej.DataManager(window.gridData).executeLocal(window.ej.Query().where("PriceListId", window.ej.FilterOperators.equal, priceListId, false).take(10));

window.gridData (which is reffered from jsondata.min.js) will contain JSON array which is used by Syncfusion samples grid.

因此，要根据主网格的 selected 行值过滤详细网格数据源，请使用以下代码。

$("#PriceListGrid").ejGrid({
            selectedRowIndex: 0,
            rowSelected: function (args) {
                var priceListId = args.data.ID;
                var gridObj = $("#PriceLineGrid").ejGrid("instance");
                var detaildata = window.ej.DataManager(gridObj.model.dataSource).executeLocal(window.ej.Query().where("PriceListId", window.ej.FilterOperators.equal, priceListId, false).take(10));

                gridObj.dataSource(window.ej.DataManager(detaildata.slice(0, 5)));
            }
        });

在上面将ej.DataManager(window.gridData)更改为ej.DataManager(gridObj.model.dataSource)。

Webforms Grid 不显示它的数据绑定数据

Webforms Grid doesn't display it's databound data

.net

c#

asp.net

syncfusion