Once you do this, below is the screenshot you should see: That's much better! The power of the product is coming into view! Below is the markup that you should have so far: <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>Simple</title> <!--These are jquery and plugins that we use from jquery--> <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" <script type="text/javascript" <!--End--> <!--These are specific to htmltreegrid--> <script type="text/javascript" src="http://htmltreegrid.com/demo/minified-compiled-jquery.js"></script> <script type="text/javascript" <script type="text/javascript" src="http://htmltreegrid.com/demo/themes.js"></script> <!--End--> <!--css imports--> <link rel="stylesheet" href="http://htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css"/> <link rel="stylesheet" type="text/css"/> >
External Filters and Filter Functions In addition to embedded filters, you can also have a function external to the grid, that determines if a particular object matches a filter. So, for example, you could have an external filter panel, that would filter the records on basis of a column that is not shown in the grid, or some custom logic that cannot be easily wrapped in a filter control. The way you do this, is to specify a filterFunction for the level you are interested in filtering. So if you want to filter the top level records, you would set the filterFunction and the top level. If you are interested in filtering inner level records, you would navigate to the level you are interested in, and then specify a filterFunction there. This is particularly applicable for hierarchical grids (as opposed to flat grids) because hierarchical grids don't have a filter bar for sub grids. For a running example of this functionality, please review myCompanyNameSpace.externalFilter_filterDeviceTypes=function(item){ if(SOME_LOGIC_HERE) return true; else return false; }; Export Options - Deep Dive Flexicious, out of the box, offers you the ability to Export the data grid data to Word, Excel, HTML, Text and XML. We also provide a plug-in based mechanism, where in you can add your own exporters. There are certain aspects of the Export mechanism that require some additional insight, which we will cover in this chapter. Built in Exporters Out of the box, there are the following Exporters available: CsvExporter DocExporter HtmlExporter XmlExporter TxtExporter ExcelExporter, (which basically creates HTML, but names the file as XLS, which excel will open) All these exporters can be found in the export namespace. They all inherit from the Exporter class. By default when you do an export, you will see the following popup:
PERSIST_COLUMN_LOCKMODES:String="columnLockModes": The lock modes of the column - left, right or unlocked. PERSIST_COLUMN_VISIBILITY:String="columnVisiblity" : Whether or not the column is hidden. PERSIST_COLUMN_WIDTH:String="columnWidth": The width of the columns. PERSIST_FILTER:String="filter": The filter values that the user currently has entered into the filter controls. PERSIST_SORT:String="sort" : The sort settings. PERSIST_VERTICAL_SCROLL:String="verticalScroll": The vertical scroll position of the grid. PERSIST_HORIZONTAL_SCROLL:String="horizontalScroll": The horizontal scroll position of the grid. PERSIST_FOOTER_FILTER_VISIBILITY:String="footerFilterVisiblity" : Whether or not the user has chosen to show or hide the footer and filter bars. PERSIST_PAGE_SIZE:String="pageSize" : The page size that the user has chosen. PERSIST_PRINT_SETTINGS:String="printSettings": Print settings, currently not applicable for HTML version of grid. Built in features If you set enablePreferences=true, you see the following icons in the grid: These are the settings and save settings pop-ups. When you click on the Settings Popup button, you see the below popup. When you click on the Save Settings Popup button, you see the following window: Together, these two windows allow you to configure the grid, as well as save the state of the grid. With client preferences, these are stored in local storage on the browser. For server based preference persistence, please refer to the next chapter. Persisting Preferences on the Server When you save preferences, where are the preferences persisted to?? The grid has a robust persistence preference mechanism that "just works" out of the box, but the preferences are stored on the client machine's localstorage by default. This enables the preference persistence mechanism to work without any additional coding on the part of the developers utilizing the library. While this may be sufficient for most people, this will not work in scenarios when the same user uses multiple machines to access your application, or if multiple users access the application using the same machine. For this, you will need to store preferences in the backend, and this post aims to show you how this is done. Attached is a simple example