Question

Can somebody help me in implementing Expand/Collapse functionality?

On clicking the Expand button, I need to get related data for that corresponding record and display it as a child row.

grid.Column(header: "Expand", 
    format: @<text>
        <a href='#' class="expandable-open-button" rel="1" >&gt;</a> 
        <div class="expandable-child-row"></div> 
     </text>)

I am thinking of using jQuery. On click of ‘Expand’ link can we get the data from the database and set the webgrid html to element.

Answer 1

Using JQuery next to select the “child” element (actually a sibling); and slideToggle to expand the element:

// add the click handler
$(".expandable-open-button").on("click", function(e) {

    // prevent the default action on the link
    e.preventDefault();

    // select the details row and toggle its visibility
    $(this).next(".expandable-child-row").slideToggle();
});

Edit You can pass the item ID by adding it to the markup as a data attribute.

format: (item) => @<text><a data-id='@item.ID'>

Then retrieve it using attr in JQuery:

.on("click", function(e) {

    var id = $(this).attr("data-id");   
    alert(id);
... }