Webforms Grid doesn't display it's databound data

Question

I am using Syncfusions Grid control for Webforms(See Demo that I based from). I have a very simple UserControl with the following on it:

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

and then the following methods are called on Page_Load() in the code behind.

    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();
        }
    }

I have stepped through the code and my IList<PriceList> is being populated with objects from my Data Layer as I would expect and it's formed correctly that I can see.

This is what the 2 objects look like:

    [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; }
}

---

EDIT

For reference this is the JavaScript that works:

    $(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)));
        }
    });
});

My issue now is that I don't actually populate Grid2 on PageLoad with all rows because there are simply too many. So I need to change this to call a method in my code behind...I will open a new thread for this.

Answer 1

In your case, if both grids are not populated with grid then the following will be the reason.

On Initial rendering

The Syncfusion grid works well with IEnumerable and as Chris Schiffhauer suggested, change the priceLists and priceLineItems to List

priceLineItems.ToList();

 and

priceLists.ToList(); 

On Master row selected

And in the rowSelected event of PriceListGrid you have used window.gridData as the datasource to filter the detail grid(PriceLineGrid) data. But the window.gridData will not contain the PriceListId field and hence no data will be populated on row select too.

 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.

So to filter the detail grid datasource based on master grid`s selected row value use the following code.

$("#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)));
            }
        });

In the above changed the ej.DataManager(window.gridData) to ej.DataManager(gridObj.model.dataSource).