CODEWITHSUNDEEP
jqueryasp.netajaxvb.netgridview
Nalaka526
Nalaka526

Reputation: 11464

ASP.NET GridView with lazy loading collapsible panel data

In a vb.net asp.net webforms project I need to load a list of records in to a gridview & once the user click on a row in needs to expand a panel which displays the details of the record, below the row. There I need to load the details of the record only when a record is selected. What is the best method to achive this? Can I use jQuery collapsible panel plugin with gridview and load data only when row is selected ? or should I use ajax CollapsiblePanel?

Upvotes: 3

Views: 2276

Answers (2)

Ravi
Ravi

Reputation: 320

if you want to use gridview then you need to use single item template to bind all fields and you can assign proper class name to any field by which you want to collapse and expand. then you can use slideToggle function to show/hide next element which contains details for the selected record. Please check the following example.

 <asp:GridView ID="GridView1"
 runat="server" AutoGenerateColumns="False" dataSourceID="ObjectDataSource1"> 
 <Columns>

<asp:TemplateField HeaderText="columname" >

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" cssclass="expand"
        Text='<%# Bind("fieldname") %>'></asp:Label>
 <div class="details">
 your detail binding
 </div>
</ItemTemplate>
</asp:TemplateField>
</Columns> 
</asp:GridView>

---------------jquery to collapse/expand---------------

$(".expand").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }
        $(this).next(".details").slideToggle();

    })

    $(".collapse").click(function () {
        if ($(this).attr("class") == "collapse") {
            $(this).attr("class", "expand")
        }
        else {
            $(this).attr("class", "collapse")
        }

        $(this).next(".details").slideToggle()

    })

Upvotes: 1

Brian Webster
Brian Webster

Reputation: 30855

Your question is lacking detail and the answer depends on exactly the makeup of the "details" that may be shown per row.

However, I would do the following, utilizing jquery with an asp.net ajax handler to grab the data (on demand) and inject it into a new gridview row.

Upon the click event that causes your row to go into "selected" mode, I would fire off a jquery function.

This jquery function would trigger an ajax hit to GrabRowDetails.aspx.

GrabRowDetails.aspx would take input in the querystring.

Based upon this input, it would query the database.

Ultimately, GrowRowDetails.aspx must package the relevant data into JSON, which will be rendered back to the client.

Response.ContentType = "application/json"
Response.Write(SB.ToString()) 'emits the JSON

Finally, your ajax-success handler will take care of creating a new table row and jamming the relevant data into that new row.

How will it know where to put the new row? The click handler mentioned at the top should pass a reference to the control firing off the click event.

Using this reference, you can use the nearest function. this.nearest("tr").after(..new_row_with_max_colspan_cell..).

The after function will insert an element after the selected element(s). So, you just need to insert a new TR with a single TD with maximum colspan. Then, you can work inside that area.

When it comes to doing stuff like this, I have better luck using raw jquery rather than a ASP.NET control.

Notes

  • An .ashx is more performant than a .aspx for handling ajax requests, but I've run into some debugging issues with http handlers. So, I use a full-blown .aspx. If speed were an issue, I'd definitely use the ashx.
  • Your jquery function should also delete any previously opened details rows. This can be done by setting a specific css class on the details rows, such as details, then using the remove function to get rid of any persisting details rows.

Upvotes: 1

Related Questions