Add rows to a gridview using JavaScript

Question

Is there a way to add rows to a gridview using JavaScript? Right now I have the GridView's onclick method set to sortTrGrid(gridviewname) with the sortTrGrid method structured as below. I can get the rows in the tables set in the proper order, however nothing changes on the web page.

    function sortTrGrid(sender) {
        var table = document.getElementById(sender.id);
        var rows = new Array(table.rows);

        for (var i = 0; i < table.rows; i++) {
            rows[i] = table.rows[i];
        }

        for (var i = table.rows; i > 0; i--) {
            table.deleteRow(document.getElementById(i));
            table.rows[i] = rows[i];
        }

    }//end GridSort

Why aren't you sorting on the server in your DataSource class or whatever it is you bind the GridView to? — Kev
– Kev, Commented Sep 13, 2012 at 22:33
I have 4 gridviews, two of which are collapsible. When the postback occurs and they are expanded, they automatically collapse. — NealR
– NealR, Commented Sep 14, 2012 at 16:13

Jupaol · Accepted Answer · 2012-09-14 02:10:11Z

Assuming your page contains all the rows from your data source (no-paging) and you want to order the GridView rows on the client to increase performance (without hitting the server), you can do the following:

(This code allows sorting numbers and text and sorting in ascending and descending mode when clicking the GridView headers)

If you want to check the full working example, I just uploaded to my GitHub site

Screenshot

Unordered

enter image description here

First click - ASC order

enter image description here

Second click - DESC order

enter image description here

Binding the GridView

<asp:LinqDataSource runat="server" ID="lds" 
    ContextTypeName="WebForms_1.DataAccess.PubsDataContext"
    TableName="jobs"
    EntityTypeName="WebForms_1.DataAccess.jobs">
</asp:LinqDataSource>
<asp:GridView runat="server" ID="gv" DataSourceID="lds" DataKeyNames="job_id">

</asp:GridView>

jQuery code

<script type="text/javascript">
    $(function () {
        var $gv = $("table[id$=gv]");
        var $headers = $("th", $gv);
        var $rows = $("> tbody > tr:not(:has(table, th))", $gv);

        $rows.addClass("grid-rows");
        $headers.addClass("grid-headers");

        $headers.toggle(function (e) {
            sortGrid($(this), 0);
        }, function (e) {
            sortGrid($(this), 1);
        });

        function sortGrid(row, direction) {
            var colIndex = $(row).parent().children().index($(row));
            var $rowsArray = $.makeArray($rows);
            var $sortedArray = $rowsArray.sort(function (o, n) {
                var $currentCell = $("td:nth-child(" + (colIndex + 1) + ")", $(o));
                var $nextCell = $("td:nth-child(" + (colIndex + 1) + ")", $(n));
                var currentValue = parseFloat($currentCell.text()) ? parseFloat($currentCell.text()) : $currentCell.text();
                var nextValue = parseFloat($nextCell.text()) ? parseFloat($nextCell.text()) : $nextCell.text();

                if (direction == 0) {
                    return currentValue < nextValue ? -1 : 1;
                }
                else {
                    return currentValue > nextValue ? -1 : 1;
                }
            });

            $("> tbody > tr:not(:has(table, th))", $gv).remove();
            $("tbody", $gv).append($sortedArray);
        }
    });
</script>

Collectives™ on Stack Overflow

Add rows to a gridview using JavaScript

1 Answer 1

Screenshot

Unordered

First click - ASC order

Second click - DESC order

Binding the GridView

jQuery code

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Screenshot

Unordered

First click - ASC order

Second click - DESC order

Binding the GridView

jQuery code

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related