We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toggle filter via button

Hi,

Has anyone got an example where you can toggle rows in the grid from a button somewhere else on the page?

I am trying to get when the page is loaded to hide the orders that are complete but show these orders if the user clicks on a "Show Completed" button.

Thanks,


John


7 Replies

SK Shanmugaraja K Syncfusion Team November 8, 2013 09:58 AM UTC

Hi John,

Thanks for using Syncfusion products.

Your requirement of Toggle filtering via button can be achieved by handling onclick  Event in button.

Please refer to the below code snippet to achieve this.

[CSHTML]

function hideGridRow() {

        var gridobj = $find("GenericListGrid");

        var visibleRows = gridobj._gridContentTable.children[1].rows;

        var colIndex = gridobj._MvcTable.get_columnIndexByName("valid");

        for (i = 0; i < visibleRows.length; i++)

        {

                if (visibleRows[i].cells[colIndex + 1].children.valid.checked == false)

                {

                    gridobj.hideRow(i);

                }

        }

    }

    function showGridRow() {

        var gridobj = $find("GenericListGrid");

       var visibleRows = gridobj._gridContentTable.children[1].rows;

        for (i = 0; i < visibleRows.length; i++)

        {

                gridobj.showRow(i);

        }

    }

Please refer to the attached sample application for further reference.

Please get back to us if you need further assistance.

Regards,

Shanmugaraja K



sample_51aac5dc.zip


JA John Ashton November 14, 2013 02:56 PM UTC

Hi Shanmugaraja,

Thanks for getting back to me but is there a way to use the grid while the rows are hidden? For example the rows which are not valid still wouldn't show even if you loop through the pages or group items?

Trying to get the invalid rows to be hidden from the start and to be loaded soon as the user click "show invalid".

Thanks for your help,

John



SK Shanmugaraja K Syncfusion Team November 18, 2013 10:56 AM UTC

Hi John,

Thanks for your update.

Your requirement of Toggle filtering via button can be achieved by handling OnActionSuccess  Event.

Please refer to the below code snippet to achieve this.

[CSHTML]

function Onsuccess(sender,args)

        {

            if ($("#btn1").is(':disabled')) {

                if (args.RequestType == "paging" || args.RequestType == "sorting") {

                    var gridobj = $find("GenericListGrid");

                    var visibleRows = gridobj._gridContentTable.children[1].rows;

                    var colIndex = gridobj._MvcTable.get_columnIndexByName("valid");

                    for (i = 0; i < visibleRows.length; i++) {

                        if (visibleRows[i].cells[colIndex + 1].children.valid.checked == false) {

                            gridobj.hideRow(i);

                        }

                    }

                }

            }

            else if ($("#btn2").is(':disabled'))

            {

                if (args.RequestType == "paging" || args.RequestType == "sorting") {

                    var gridobj = $find("GenericListGrid");

                    var visibleRows = gridobj._gridContentTable.children[1].rows;

                    for (i = 0; i < visibleRows.length; i++)

                    {

                        gridobj.showRow(i);

                    }

                }

            }

        }

Please refer to the attached sample application for further reference.

Please get back to us if you need further assistance.

Regards,

Shanmugaraja K

showhiderows_9c3d12e.zip


JA John Ashton November 28, 2013 09:01 AM UTC

Hi Shanmugaraja,

Thanks for that works great but how would you implement this for a hierarchical grid with where the parent has the active column?

Cheers mate,

John



SK Shanmugaraja K Syncfusion Team December 3, 2013 08:48 AM UTC

Hi John,

Thanks for your update.

Your requirement of Toggle filtering via button for a hierarchical grid can be achieved by handling onclick  Event in button.

Please refer to the below code snippet to achieve this.

[CSHTML]

function hideGridRow() {

        var gridobj = $find("GenericListGrid");

        var visibleRows = gridobj._gridContentTable.children[1].rows;

        var colIndex = gridobj._MvcTable.get_columnIndexByName("valid");

        for (i = 0; i < visibleRows.length; i++) {

            if (visibleRows[i].className == "")

                {

                if (visibleRows[i].cells[colIndex + 2].children.valid.checked == false)

                {

                    gridobj.hideRow(i);

                    if (visibleRows[i + 1].className == "GenericListGridChildRow")

                    {

                            $(visibleRows[i + 1]).hide()

                    }

                }

            }

            $("#btn1").attr("disabled", "disabled");

            $("#btn2").removeAttr("disabled", "disabled");

        }

    }

    function showGridRow() {

            var gridobj = $find("GenericListGrid");

            var visibleRows = gridobj._gridContentTable.children[1].rows;

            for (i = 0; i < visibleRows.length; i++)

            {

                gridobj.showRow(i);

            }

            $("#btn2").attr("disabled", "disabled");

            $("#btn1").removeAttr("disabled", "disabled");

        }

Please refer to the attached sample application for further reference.

Please get back to us if you need further assistance.

Regards,

Shanmugaraja K



showhide_977e261b.zip


JA John Ashton December 11, 2013 04:31 PM UTC

Thanks Shanmugaraja sorted.



SK Shanmugaraja K Syncfusion Team December 12, 2013 11:54 AM UTC

Hi John,

 

Thanks for your update.

 

we will wait to hear from you.

 

Please let us know if you need further assistance.

 

Regards,

Shanmugaraja K

Loader.
Up arrow icon