Search code examples
javascriptjqueryfilteringshieldui

Shield UI Grid Toolbar button click filters grid

So I have a grid that I am using a template for the toolbar. I have a column named Status. When Status = Request to Reschedule, Cancelled, Office Call Required, or Invalid Number, we want only those rows to show. So when the user click the button on the tool bar it automatically filters the grid and only shows the rows where the Status column equals the above.

I emailed shield support and they gave me this link: https://www.shieldui.com/documentation/datasource/javascript/api/settings/filter

Based on the link shield support gave me, I have added the button and tested all kinds of code and can't get this to work. Here some of what I have tried:

function templateFunc(item) {
      var grid = this;

                 $("<button type='button' id='showActionRequired' class='sui-button'><span class='sui-sprite sui-grid-icon-export-excel'></span> <span class='sui-grid-button-text'>Show Action-Required Items</span></button>")
                     .click(function () {

                      var dataSource = grid.DataSource({
                            filter: {
                                filter: { path: "CommStatusText", filter: "eq", value: "Cancelled" }
                            }
                         });

                   }).appendTo(item);
            }

I tried: var dataSource = $("#newGrd").swidget().DataSource({ - this is like my filter grid I already have on there

var dataSource = new shield.DataSource({ - what is in shield's examples. This does nothing. Not detecting the grid.

and var dataSource = grid.DataSource({ - based on what I am using for the export buttons.

I also get this error a lot:

enter image description here

Please help!!!

Solution

  • Ok Finally got this figured out with a bit of help from shield ui support and a lot of testing. Wanted to post what worked for me to help anyone else with this issue. 

    $("<button type='button' id='showActionRequired' class='sui-button'><span class='sui-sprite sui-grid-icon-export-excel'></span> <span class='sui-grid-button-text'>Show Action-Required Items</span></button>")
                     .click(function () {                             
                         var dataSource = $("#newGrd").swidget().dataSource;
                         dataSource.filter = {
                                or: [
                                    { path: "CommStatusText", filter: "eq", value: "Cancelled" },
                                    { path: "CommStatusText", filter: "eq", value: "Invalid Number" },
                                    { path: "CommStatusText", filter: "eq", value: "Request to Reschedule" },
                                    { path: "CommStatusText", filter: "eq", value: "Office Call Required" }
                                ]
                            }
                         dataSource.read();

                    }).appendTo(item);