Question

我正在为Webforms使用Syncfusions网格控件（参见我所基于的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();

在选定的主排上

在rowSelected PriceListGrid事件中，您使用window.gridData作为数据源来过滤详细信息网格（PriceLineGrid）数据。但window.gridData不会包含PriceListId字段，因此也不会在行选择中填充数据。

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

window.gridData（来自jsondata.min.js）将包含Syncfusion样本网格使用的JSON数组。

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

$("#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不显示它的数据绑定数据

2 个答案: