Search code examples
javascriptshieldui

Expanding Shield UI JavaScript grid rows by clicking a button

I am in need of some help with a Shield UI JavaScript Grid. I investigated the available sources but I can’t find an answer to the question how to expand certain rows of the grid by clicking a button for instance. There are similar examples for sorting the grid, but not this particular one. I tried to figure it out my way and put some code on the page like the one below:

 function expandRows() {
        alert("Function");
        $("#grid2").swidget().expandRow([0]);
        $("#grid2").swidget().expandRow([1]);
    }

I included the alert statement in order to test and the function is actually being called. After I close the prompt window I don’t get any debugging errors, however there are no rows expanded as well.

Solution

  • You are missing a declaration so that you can properly reference the grid’s rows which are not directly accessible. For that purpose you may use a variable like the following:

            var rows = $(".sui-expandable").find(".sui-row");

    and the amended function will look similar to the following:

        function expandRows() {  
        var rows = $(".sui-expandable").find(".sui-row");
        $("#grid2").swidget().expandRow(rows[0]);
    }

    You may further expand any row by referencing it by its index:

    rows[0]