Log in to like this post! Under the hood of new Aikido WebDataGrid (Contd...) [Infragistics] Murtaza Abdeali / Thursday, November 13, 2008 This is a continuation of a post I wrote earlier….. Modular Architecture The behaviors architecture of the WebDataGrid makes it easy to understand and code. In order to enable a behavior within the grid, all you need to do is add the behavior to grid’s behaviors collection. Once a behavior is added you can now customize it within the designer dialog, markup or in code. Figure 1: Customize Behavior in Markup Figure 2: Add/Customize Behavior in Code Any grid item state that is related to a certain behavior (e.g. active cell, sorted columns, selection), you will find it within the behavior itself. The APIs at both client and server are structured in a similar manner, so once you get a hang of one side of the story, you’ve learned the other one as well. Here are few examples of client and server code snippets. Server Code: //Get Active Cell on Server WebDataGrid1.Behaviors.Activation.ActiveCell // Get Selected Cells on Server WebDataGrid1.Behaviors.Selection.SelectedCells //GetSorted Columns on Server WebDataGrid1.Behaviors.Sorting.SortedColumns Client Code: //Get Active Cell on Client $ find(‘WebDataGrid1’).get_behaviors().get_activation().get_activeCell() //Get Selected Cells on Client $find(‘WebDataGrid1’).get_behaviors().get_selection().get_selectedCells() //Get Sorted Colums on Client $find(‘WebDataGrid1’).get_behaviors().get_sorting().get_sortedColumns() And so on…. Intelligent Column Resizing Depending on how you setup your column widths, the column resizing behavior will act accordingly. If you setup column widths in percentages such that it covers your entire grid area (column widths equals 100%), then the grid will make sure that it stays that way even when a user resizes a column. In a percentage width scenario, when a user resizes one column, the grid will let the user change the width of that column, the total width gain or loss from the user action is then used to adjust other columns while maintaining their column widths to grid width ratio. If you set the entire grid’s width in percentage and resize the browser window, all columns maintain their column width to grid width ratio within the grid as well. If you want pixel based column sizing or implement your own column sizing for the grid, set up the column width in pixels to begin with. Upon column resizing by the user, the grid will use scrollbar if needed when the user expand column width beyond grid’s width. You can even use the min and max column width settings to make sure user remains within certain width range. To customize it, simply listen to column sizing client event and change the default behavior. Check it out in action here. Control Templates If you have been developing web applications and used grid controls, I am sure you know about the Column templates for header, footer and cell contents. Also, if you’ve used WebGrid you must have come across row edit template too. Well, the WebDataGrid comes with all of that, but in addition it introduces two new templates, Empty Rows Template and Error Template. These templates are special purpose template and are shown automatically when specific cases are met. Error Template can let your application continue its execution even if an exception is occurred within the grid. As soon as grid acknowledges this case, it will look for an error template, and if one is defined, the grid will replace its content area with the error template. This will have your application users see the rest of the page and let you supply a friendly message letting them know something went wrong. Empty Rows Template are shown whenever there are no rows to display, its that simple. This can happen when user puts a filter condition that returned no rows, or you have a search box within your page and the search result bound to the grid contains no data, or even when a user goes ahead and deletes all rows within the grid. When any of these cases are met, grid will check for Empty Rows Template and if there is one defined, it will display it within the grid area. Can’t wait to see it in action, check out the following video. Enable Data ViewState If you don’t want to query your data store on every page load, then you can enable data view state on the grid. Enabling this will have the grid keep its data state so there is no need to get data on every page refresh. This can have consequences though, if you have a lot of data that you are displaying in the grid and have this feature enabled (by default, it is disabled), the grid will carry that data across postbacks and it might hit your page performance.