LightSwitch HTML 101: Creating a SearchBar and Filtering the Grid

In this tutorial, I will show you how to integrate a custom search bar into your Screen to filter the grid. Also, using the built in functionality of Wijmo, I will also show you how to filter each column within the grid itself. Much like my last sample, I will use the same carsModels database table. We will create a new Wijmo Grid Screen (Scrolling). This will bring you to the designer for the Screen. As of right now, the query is bringing in all of the data for the table. We can use the query to help use do a Search. Click on Edit Query, and click on Add Filter. Say, for instance, we want to be able to search the grid for a specific make of car. We will change this filter to a Parameter, which we can inject onto the page. Select Parameter from the 4th dropdown, and do an Add New on the 5th dropdown. This will create a new Parameter automatically: In the Properties of this Parameter, make sure to set the IsOptional Boolean to true (otherwise the Grid will appear blank on load). (Note: the 3rd dropdown can be changed to “contains” if you want to do that kind of search) Save the query, and go back to the Screen Designer. Underneath the Query, you will now see a Query Parameters tab with your Parameter you create listed. Drag and drop the Parameter right underneath your Command Bar. Give your project a run. In the TextBox at the top, you will be able to enter any Make. Once enter is hit, the grid will automatically update with the correct filter. If you are not a fan of the SearchBar, you can also use the properties of the Wijmo Grid to implement a filter for each column. Back in your project, open the JavaScript File for your screen. In here you will see the code generated for the Grid, as well as a showFilter option (which defaults to false). Set this option to true.

table.wijgrid({  
            // initialization  
            columns: grid.Columns,  
            data: grid.Rows(),  

            // sorting  
            allowSorting: true,  
            sorting: grid.Sorting,  

            // filtering  
            showFilter: true,  
            filtering: grid.Filtering,  

            // selection  
            selectionMode: "singleRow",  
            showRowHeader: grid.ShowRowHeader,  
            showSelectionOnRender: false,  
            cellClicked: grid.OnCellClicked,  
            cellStyleFormatter: grid.OnCellFormat  
        });  

Save, and give your project another run. Now, underneath each header, is a Filter bar. Within here, you can type your filter criteria, and using the dropdown, you can specify the filter type (Equals, GreaterThan, etc.) Simple as that! You can choose to use basic LightSwitch functionality, or use the properties of the Wijmo grid to implement the filtering however you would like. Reference: http://blogs.msdn.com/b/lightswitch/archive/2013/03/26/signed-in-part-5-search-screen-and-dynamic-ui-andy-kung.aspx