Keep inner gridview after postback in Asp.net using Jquery

Cynthia

8y3.8k.NET

I have nested GridView with Expand Collapse feature in ASP.Net using VB.Net.Using Jquery i am able to expand collapse and show another gridview.

The expand collapse feature is working fine .

What my requirement is that even after postback i want to retain inner gridview in UI .

But it would not be there once postback happens.

I tried to use State saving option of Datatable but it will save the state of + icon but inner datagrid view wont be retained .

Is there anyway we can address this issue ?

Thanks

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Midhun Tp8y ago
Accepted answer
Hi,

I hope you are using code from below article -

https://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

If yes, you can achieve the desired functionality with below changes :-

1) Add a hidden field in your page -

2) Change the script as below -
"text/javascript">
     $("[src*=plus]").live("click", function () {
         $(this).closest("tr").after("" + $(this).next().html() + "")
         $(this).attr("src", "images/minus.png");
         var row = $(this).siblings("div").attr('id').split('_');
         $('#hdnchild').val($('#hdnchild').val().replace(row[row.length - 1] + ',', ''));
         $('#hdnchild').val($('#hdnchild').val() + row[row.length - 1] + ',');
     });
     $("[src*=minus]").live("click", function () {
         $(this).attr("src", "images/plus.png");
         var row = $(this).siblings("div").attr('id').split('_');
         $('#hdnchild').val($('#hdnchild').val().replace(row[row.length - 1] + ',', ''));
         $(this).closest("tr").next().remove();
     });
     $(document).ready(function () {
         if ($('#hdnchild').val() != "") {
             var childs = $('#hdnchild').val().trim(',').split(',');
             if (childs.length > 0) {
                 for (var i = 0; i < childs.length; i++) {
                     $("#gvCustomers").find('div#gvCustomers_pnlOrders_' + childs[i]).siblings('img').click();
                 }
             }
         }
     });

That's it!
Cynthia8y ago
Thanks Midhun , I have implemented the same way & its working .
But now the issue is that in pagination its not working.
If i go from page 1 to page 8 - & again come back to page 1 it wont retain the nested grid .
Any suggestion?
Cynthia8y ago
Hi Manav ,
Thanks for your reply . I went through the link but my case is different.
In my case the child gridview is dynamic & i am dynamically creating the child Gridviews
in the RowDataBound event of each parent row.So , i am finding it quite difficult to bind the
datasource of childgridview on every postback to retain it. Do you have any idea ?