HxGrid

Displays tabular data from data source. Includes support for client-side and server-side paging & sorting.

Properties

  • Columns
    Columns to display, see HxGridColumn below.
  • DataProvider

    Provider for access server-side data.

    It should return data count and data items for the specified page in the specified order.

    See client-side and server-side paging & sorting demo below.

  • CurrentUserState, CurrentUserStateChanged
    Current state of the grid (page index, sorting).
  • SelectedDataItem, SelectedDataItemChanged
    Currently selected item.
  • EmptyDataTemplate

    Template to render when there are empty data (but not null).

Setting (loading) data to the grid

No paging & sorting or client-side paging & sorting

  • Create a field/property for the data.
  • Set data to this field/property. Do not sort data.
  • Use the extension method ApplyTo (request.ApplyTo(data)) in the DataProvider method to automaticky sort and page data from the field/property. While the result of the DataProvider method is a generic Task, the result must be wrapped using Task.FromResult. It is easy, see the demo source code.
Client-side paging and sorting
Display NameName
Loading data...

Server side paging & sorting

  • Implement the DataProvider method to delegate the paging & sorting to the server side. The sample code does not have this implementation.
Server-side paging and sorting
Display NameName
Loading data...

Empty data

Empty data
Display NameName
Loading data...

HxGridColumn

Properties

  • ItemTextSelector
    Function to get text to display as grid cell content. Use to display simple text content.
  • ItemTemplate
    Template to display as grid cell content. Can be used to display complex HTML content.
  • ItemCssClass
    CSS class to be added to every content cell.
  • ItemCssClassSelector
    Function to get CSS class for the content cell (based on the data item).
  • HeaderText, HeaderTemplate, HeaderCssClass
    Column header.
  • FooterText, FooterTemplate, FooterCssClass
    Column footer.

Sorting properties

  • SortKeySelector

    To be used for "strongly typed" setting of sorting, required for client-side sorting.

    Must be IComparable.

    Sorting of the column does not support multiple expressions. Create an artifial property and implement IComparable.

  • SortString

    Use to set sorting as a string, ie. to get value to pass to backend.

    Ignored for client-side sorting.

  • SortDirection

    Initial sorting direction. Default is Ascending.

  • IsDefaultSortColumn

    Set true for the column which is to be used for default sorting.

If sorting is enabled (client-side or server-side), there must be a single column with IsDefaultSortColumn set to true (otherwise InvalidOperationException is thrown)!