Grid with Dependent ListView (Master Detail Screen)

[Jon]

Hello,

I'm having a problem doing something that should be very simple, but for some reason it's not hooking up for me.

I just have an ej:Grid that shows a couple of columns, and a ListView that will show the details for the selected item. Normally, I'd expect to just bind the key value of the dependent form directly to the DataKeys value of an asp:Grid, but I see that that value is not exposed by ej:Grid... When configuring the sqlDataSource for the dependent/detail view, the ej:Grid does not appear as a choice in the pulldown menu.

I did some searching and did not find an obvious solution, so right now I'm thinking of placing a hidden field in the page, and then using a select event of the grid to assign the value to that field, which then SqlDataSource can then be bound to and work correctly, OR to use that same event to manually update the sqlDataSource directly.

Or am I thinking about this the wrong way? Advice?

Thanks!

--Jon

[Dinesh Rajendiran]

Hi Jon, 

  

Thanks for using Syncfusion Products. 

  

We require more details  about the requirement to provide optimal solution. So please share us the following details. 

  

1. Please share us the currently using product version.

  

2. Please share us your complete code snippet.

  

3. Do you want to show data in the listview(bound with sqldatasource control) based on row selected in grid.

  

Regards, 

Dinesh Rajendiran 

[Jon]

Hello,

I'm not sure of the syncfusion version, but I'm working in C# with webforms. Both the grid and view are definitely data driven using sqlDataSource objects.

This is the old method that I would like to replace with sf components to clean it up:

                <div class="form-row">

                    <div class="col">

                        <asp:GridView ID="GridViewList" runat="server" AutoGenerateColumns="False" DataKeyNames="TourID" DataSourceID="dsTours" AllowPaging="True">

                            <Columns>

                                <asp:CommandField ShowSelectButton="True" />

                                <asp:BoundField DataField="TourID" HeaderText="TourID" />

                                <asp:BoundField DataField="FileName" HeaderText="FileName" SortExpression="FileName" />

                                <asp:BoundField DataField="StartDate" HeaderText="StartDate" SortExpression="StartDate" />

                            </Columns>

                        </asp:GridView>

                    </div>

                    <div class="col">

                        <asp:ListView ID="ListView1" runat="server" DataKeyNames="TourID" DataSourceID="dsTour">

                            <ItemTemplate>

                                <tr style="">

                                    <td>

                                        <asp:Label ID="TourIDLabel" runat="server" Text='<%# Eval("TourID") %>' />

                                    </td>

                                    <td>

                                        <asp:Label ID="FileNameLabel" runat="server" Text='<%# Eval("FileName") %>' />

                                    </td>

                                    <td>

                                        <asp:Label ID="StartDateLabel" runat="server" Text='<%# Eval("StartDate") %>' />

                                    </td>

                                </tr>

                            </ItemTemplate>

                            <LayoutTemplate>

                                <table runat="server">

                                    <tr runat="server">

                                        <td runat="server">

                                            <table id="itemPlaceholderContainer" runat="server" border="0" style="">

                                                <tr runat="server" style="">

                                                    <th runat="server">TourID</th>

                                                    <th runat="server">FileName</th>

                                                    <th runat="server">StartDate</th>

                                                </tr>

                                                <tr id="itemPlaceholder" runat="server">

                                                </tr>

                                            </table>

                                        </td>

                                    </tr>

                                    <tr runat="server">

                                        <td runat="server" style=""></td>

                                    </tr>

                                </table>

                            </LayoutTemplate>

                        </asp:ListView>

                        <br />

                    </div>

                </div>

And then the actual linking is done via the data sources:

                <asp:SqlDataSource ID="dsTours" runat="server" ConnectionString="<%$ ConnectionStrings:SonshineDBV2ConnectionString %>" SelectCommand="SELECT TourID, FileName, StartDate FROM tblTours WHERE (StartDate &gt;= GETDATE()) ORDER BY StartDate"></asp:SqlDataSource>

                <asp:SqlDataSource runat="server" ID="dsTour" ConnectionString='<%$ ConnectionStrings:SonshineDBV2ConnectionString %>' SelectCommand="SELECT TourID, FileName, StartDate FROM tblTours WHERE (TourID = @TourID)">

                    <SelectParameters>

                        <asp:ControlParameter ControlID="GridViewList" PropertyName="SelectedValue" Name="TourID" Type="Int32"></asp:ControlParameter>

                    </SelectParameters>

                </asp:SqlDataSource>

It's this bottom part that gives a problem because it will not recognize the ejGrid in order to pick a value from it.

Ideas?

Thanks!

[Farveen Sulthana Thameeztheen Basha]

Hi Jon, 

We have created sample with ejGrid and ejListView with sql dataSources bind to it. Refer to the code example:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowSorting="True" /> 

            <Columns> 

                <ej:Column Field="OrderID" HeaderText=" Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75"> 

                    <ValidationRule> 

                        <ej:KeyValue Key="required" Value="true" /> 

                        <ej:KeyValue Key="number" Value="true" /> 

                    </ValidationRule> 

                </ej:Column> 

                 

            </Columns> 

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 

        </ej:Grid> 

                 <asp:SqlDataSource ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 

            SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource> 

           

                 

                 </ContentTemplate> 

        </asp:UpdatePanel> 

        <ej:ListView ID="List" runat="server" ShowHeader="true" DataTextField="ShipCity"  HeaderTitle="GridList"  ShowHeaderBackButton="true" HeaderBackButtonText="Back" Height="450" Width="400"> 

            

    </ej:ListView> 

Serverside:- 

     protected void Page_Load(object sender, EventArgs e) 

            { 

                if (!IsPostBack) 

                { 

                    SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString()); 

                    dt = new DataTable("Order"); 

                    SqlCommand cmd = new SqlCommand(); 

                    cmd.Connection = myConnection; 

                    cmd.CommandText = "select * from Orders"; 

                    cmd.CommandType = CommandType.Text; 

                    SqlDataAdapter da = new SqlDataAdapter(); 

                    da.SelectCommand = cmd; 

                    if (myConnection.State == ConnectionState.Closed) 

                    { 

                        myConnection.Open(); 

                    } 

                    da.Fill(dt); 

                    Session["SqlDataSource"] = dt; 

                    listdataBind(); 

                } 

                griddataBind(); 

            } 

            protected void griddataBind() 

            { 

                

                OrdersGrid.DataSource = (DataTable)Session["SqlDataSource"]; 

                OrdersGrid.DataBind(); 

            } 

            protected void listdataBind() 

            { 

                List.DataSource = Utils.DataTableToJson(dt); 

                List.DataBind(); 

            } 

Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/directtrac/148767/ze/Sample1477227181.zip 

Demo Link:- 

https://asp.syncfusion.com/demos/web/listview/databinding-sqldata.aspx 

https://asp.syncfusion.com/demos/web/grid/sqlbinding.aspx 

We need some more additional details about your requirement. Share us the following details. 

1. Screenshot of the issue you have faced.
2. Detailed Explanation of your requirement.
3. Have you rendered Grid and listView as like above code example.

Regards, 

Farveen sulthana T