Child Row with Gridview Asp.Net

Child Row with Gridview Asp.Net

FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

Hi,

I want to add the row().child to my Gridview table in c#

My ideia was to have 'n' hiden columns in my gridview where i'd store the child data and upon clicking the parent row it would render those hidden columns as a child below that row. Child Rows.

I wasnt able to, using the example above mentioned, translate it to the gridview table since my data is collected directly from the sqldatasource of the gridview (won't be using ajax).

How can i change my script to function as described above?

Here is my gridview

<asp:SqlDataSource ID="SqlDataSourcePart" runat="server"
            ConnectionString="<%$ ConnectionStrings:VIPSalesConnectionString %>">
            <SelectParameters>                
                <asp:Parameter DefaultValue="QUOTE" Name="ActType" Type="String" />
                <asp:Parameter DefaultValue="RFQ%" Name="ActType2" Type="String" />
                <asp:Parameter DefaultValue="False" Name="StandardProduct" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>

<asp:GridView ID="GridViewParts" OnRowDataBound="GridViewQuotes_RowDataBound" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourcePart" Visible="true">
                    <Columns>
                        <asp:BoundField DataField="MasterQuote" HeaderText="Quote" SortExpression="MasterQuote" />
                        <asp:BoundField DataField="PartID" HeaderText="Part ID" SortExpression="PartID" />
                        <asp:BoundField DataField="PartNum" HeaderText="Part Name" SortExpression="PartNum" />
                        <asp:BoundField DataField="Material" HeaderText="Material" SortExpression="Material" />
                        <asp:BoundField DataField="CurLead" HeaderText="Lead Time" SortExpression="CurLead" />
                        <asp:BoundField DataField="ActDate" HeaderText="Last Quoted" SortExpression="ActDate" />
                    </Columns>
                </asp:GridView>

The code that i have running on my script is for enabling the row selection and sending that selected information to the code behind

<script>       

        $(document).ready(function () {
            var table = $('#<%= GridViewParts.ClientID %>').DataTable();

           $('#<%= GridViewParts.ClientID %>').on('click', 'tr', function () {
               $(this).toggleClass('selected');
           });

           $('#<%= NextBtn.ClientID %>').click(function () {

               var result = table.cells('.selected', 1).data().toArray().toString();
               var result2 = table.cells('.selected', 0).data().toArray().toString();

               document.getElementById('<%= HiddenFieldOrder.ClientID%>').value = result;
               console.log(document.getElementById('<%= HiddenFieldOrder.ClientID%>').value);

               document.getElementById('<%= HiddenFieldQty.ClientID%>').value = result2;
               console.log(document.getElementById('<%= HiddenFieldQty.ClientID%>').value);

           });
       });

    </script>

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    I'm not seeing any calls to row.child as shown in the example you linked to. You need to call row().child.show() when the row is clicked upon.

    Colin

  • FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

    Hi Colin,
    I tried the code as shown in the example, but it was not working, in this case i was trying to repeat the information that i already had in the parent table, it is not clear how can i define which data is going to be the child:

    <script>              
            function format(d) {
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td>Full name:</td>' +
                    '<td>' + d.Quote + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extension number:</td>' +
                    '<td>' + d.Material + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extra info:</td>' +
                    '<td>And any further details here (images etc)...</td>' +
                    '</tr>' +
                    '</table>';
            }
            $(document).ready(function () {
                var table = $('#<%= GridViewParts.ClientID %>').DataTable({
                    "columns": [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    { "data": "Quote" },
                    { "data": "Part ID" },
                    { "data": "Part Name" },
                    { "data": "Material" },
                    { "data": "Lead Time" },
                    { "data": "Last Quoted" }
                ],
                    "order": [[1, 'asc']]
        } );
               $('#<%= GridViewParts.ClientID %>').on('click', 'tr', function () {
                   $(this).toggleClass('selected');
               });
               $('#<%= NextBtn.ClientID %>').click(function () {
                   var result = table.cells('.selected', 1).data().toArray().toString();
                   var result2 = table.cells('.selected', 0).data().toArray().toString();
    
                   document.getElementById('<%= HiddenFieldOrder.ClientID%>').value = result;
                   console.log(document.getElementById('<%= HiddenFieldOrder.ClientID%>').value);
                   document.getElementById('<%= HiddenFieldQty.ClientID%>').value = result2;
                   console.log(document.getElementById('<%= HiddenFieldQty.ClientID%>').value);
               });
                $('#<%= NextBtn.ClientID %> tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
    
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
           });
        </script>
    
    

    Here is an image of how it looks, also the click functionaly stopped working when i added this part of the code

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    it is not clear how can i define which data is going to be the child:

    Line 51 as var row = table.row(tr); which uses row() to get the Datatable API for the row clicked on.

    Line 60 has row.child(format(row.data())).show(); which passes the row data to the format() function. You can use the browser's debugger or console.log statements in the format() function to see what data is passed in.

    click functionaly stopped working when i added this part of the code

    Check the browser's console for errors.

    Kevin

  • FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

    Kevin and Colin, first of all thank you very much for the help.

    I have found some errors thanks to your help kevin, here is where i am at the moment:

    Using gridviews i was only able to add the child data using this format:

    <asp:GridView ID="GridViewParts" OnRowDataBound="GridViewQuotes_RowDataBound" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourcePart" Visible="true">
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <img alt="" style="cursor: pointer;width:30px;height:30px" src="../References/Images/DataTable/plus-flat.png" />
                            
                                    <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                        <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
                                            <Columns>
                                                <asp:BoundField ItemStyle-Width="150px" DataField="recid" HeaderText="Quote" />
                                                <asp:BoundField ItemStyle-Width="150px" DataField="Subject" HeaderText="Material" />
                                            </Columns>
                                        </asp:GridView>
                                    </asp:Panel>
                                </ItemTemplate>
                            </asp:TemplateField>
    

    With that i have stored the child data in a table that stays hidden, the click functionality works again but when i click the + sign nothing happens, what is wrong in the script? (I'm really sorry my javascript is not really good)

    <script>           
            function format(d) {
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td>Full name:</td>' +
                    '<td>' + d.recid + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extension number:</td>' +
                    '<td>' + d.Subject + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extra info:</td>' +
                    '<td>And any further details here (images etc)...</td>' +
                    '</tr>' +
                    '</table>';
            }
            $(document).ready(function () {
                var table = $('#<%= GridViewParts.ClientID %>').DataTable();
    
                $('#<%= GridViewParts.ClientID %>').on('click', 'tr', function () {
                    $(this).toggleClass('selected');
                });
                $('#<%= NextBtn.ClientID %>').click(function () {
                    var result = table.cells('.selected', 1).data().toArray().toString();
                    var result2 = table.cells('.selected', 0).data().toArray().toString();
    
                   document.getElementById('<%= HiddenFieldOrder.ClientID%>').value = result;
                   console.log(document.getElementById('<%= HiddenFieldOrder.ClientID%>').value);
                   document.getElementById('<%= HiddenFieldQty.ClientID%>').value = result2;
                   console.log(document.getElementById('<%= HiddenFieldQty.ClientID%>').value);
                }); 
                $('#<%= GridViewParts.ClientID %> tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
    
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
            });
        </script>
    

    Here is a picture of the table now

    And this one with the information hidden

  • FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

    Update:

    It is working now, i had some conflicts with the gridviews, i just need 1 last help!

    1- Since i have both child.row and row selection at the same time I'd like to disable the possibility to select the row for the child data, how can that be done?
    I want the seleciton to only work when clicking the parent row, and the row selection happens when i click any field on the child row data


    2- Also how can i change the icon? When the class is added the icon changes to this "flag" icon, where can i change it?

    <script>           
            function format(d) {
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td>Full name:</td>' +
                    '<td>' + d.cliid + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extension number:</td>' +
                    '<td>' + d.Body + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Extra info:</td>' +
                    '<td>And any further details here (images etc)...</td>' +
                    '</tr>' +
                    '</table>';
            }
            $(document).ready(function () {
                var table = $('#<%= GridViewParts.ClientID %>').DataTable(
                    {
                        "columnDefs": [
                            {
                                "targets": [7,8],
                                "visible": false,
                                "searchable": false
                            }
                        ],             
                        "columns": [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                            { "data": "MasterQuote" },
                            { "data": "PartID" },
                            { "data": "PartNum" },
                            { "data": "Material" },
                            { "data": "CurLead" },
                            { "data": "ActDate" },
                            { "data": "cliid" },
                            { "data": "Body" }
                        ],
                        "order": [[1, 'asc']]
                    } );
    
                $('#<%= GridViewParts.ClientID %>').on('click', 'tr', function () {
                    $(this).toggleClass('selected');
                });
                $('#<%= NextBtn.ClientID %>').click(function () {
                    var result = table.cells('.selected', 1).data().toArray().toString();
                    var result2 = table.cells('.selected', 0).data().toArray().toString();
    
                   document.getElementById('<%= HiddenFieldOrder.ClientID%>').value = result;
                   console.log(document.getElementById('<%= HiddenFieldOrder.ClientID%>').value);
                   document.getElementById('<%= HiddenFieldQty.ClientID%>').value = result2;
                   console.log(document.getElementById('<%= HiddenFieldQty.ClientID%>').value);
                }); 
    
                $('#<%= GridViewParts.ClientID %> tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
    
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
            });
        </script>
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Since i have both child.row and row selection at the same time I'd like to disable the possibility to select the row for the child data, how can that be done?

    Doesn't look like you are using the Select Extension for row selection. Since you are using something else for row selection you will need to look at the code's documentation to narrow down what can be used for selection.

    Also how can i change the icon? When the class is added the icon changes to this "flag" icon, where can i change it?

    Sounds like you have another CSS styling for the details-control class. Take a look at the example and click on the CSS tab to see how to get the plus and minus signs.

    Kevin

  • FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

    Hi Kevin!

    1- I am using the code from RowSelect on line 48. On line 51 i am just getting information from 2 cells and sending it to the code behind. But i belive the problem can be fixed on the row selection funciton.

    2- Thank you i found it, fixed

  • FranciscoSouzaFranciscoSouza Posts: 8Questions: 2Answers: 0

    Update:

    Made it work by selecting only odd and even tr's :).

    Thank you all for the support!

    $('#<%= GridViewParts.ClientID %>').on('click', "tr.odd, tr.even", function () {
                    $(this).toggleClass('selected');
                });
    
This discussion has been closed.