Example of a typical grid element:

Attributes

• k-columns: Grid columns. See seperate section below.
• k-data-source: Data source of the items. See seperate section below.
• k-on-change: Event triggered when selection change. See seperate section below.
• k-reorderable: Allows the columns to be reordered by the user. Ex. "true"
• k-resizable: Allows the columns to be resized. Ex. "true"
• k-row-height: Changes the row height. Default value is 37. Ex. "44"
• k-toolbar: The value "false" removes the filter search and settings area. Default value is "true"
• k-auto-bind: The value "false" prevents reading of data until a read()-call is made in the viewmodel.
• rb-multiselect: Turns on multiselect in the grid. Will only work in the first grid-component of the application. Typically the grid to the left. Ex. rb-multiselect="orderId,itemId"
• rb-message-field: Ex. "highlightedNotification.translatedMessage"
• rb-addnewlabel: The create new item button label to show in the bottom left corner of the grid. Ex. "{{'Create new quote request' | translate}}"
• rb-addnewcomponent: Specifies component to use as create new popover. See seperate section below.
• rb-addnewparams: Specifies parameters to use together with the rb-addnewcomponent-attribute. See seperate section below.
• rb-addnewpopover: Template for create new popover. See seperate section below.
• paging-info-style: The value "records" changes the paging info to display record count instead of the default page count.
• predefined-filter: Applies a filter box to the grid. See seperate section below.
• access-rule: Access rule (ARU) for enabling/disabling the create new item button. See seperate section below.
• access-doc: Defines which document to use for the access-rule-attribute. See seperate section below.
• default-filter: Filterfields to use when searching. Should always be specified! This simplifies the filter usage. Ex. value: "Name,FirstName". If the user types John in the search area it will end with this syntax: Name Contains "John" Or FirstName Contains "John".
• lookupcomponents: Specify lookup-components for filterable fields. See seperate section below.
• data-selectrow: Makes sure the last selected row is remembered when the user returns to the application after a navigation event, or after a reload/refresh of the application. It works by finding the item ID in the grid which matches the url parameter.In the example below orderId needs to be defined as a parameter in the config file. Example value: "quoteRequestId"

Grid columns

Which columns to show is typical defined in a declarative column definition, but the columns can also be defined in javascript by using an angular binding like this: k-columns="{{vm.myColumns}}". The valid attributes is:

• Field: The value field you want to display from the dataset
• Title: Column header title. Specify translate to mark this as a translateable label.
• Width: Fixed width in pixels. If not specified the field will get auto width which allows it to grow and shrink in size.
• Hidden: Boolean value which tells whether the field should be hidden or visible by default.
• Template: Use a template if you need a more complex html structure. Bindings are specified by the #=FIELDNAME# syntax, or by using dataItem.FIELDNAME
• Type: Datatype. Supported types are: decimal, date, datetime, icon. Default value is string.
• Lookup-component: If the end user types CustomerId = in the search area,- a selection named Lookup CustomerId appears. This will open a popup list where they can search on additional customer data to find the preferred CustomerId.
• Format: Used together with type decimal. In the example totalAmount is of type number with 2 decimal points.
• Attributes/headerAttributes: Used for styling the header and field cells.
• ExportField: Used in cases where two fields is combined in one column, but where both fields must be able to be exported to excel.

Example:

Datasource

Examples of datasource definitions. In the simplest form all you need to specify is an url. CreateKendoDatasource immediately executes a GET request on the specifyed API resource when the component has loaded. Use k-auto-bind="false" if you want to prevent that behaviour.

<div rb-grid k-data-source="vm.dataSource"> </div>

vm.dataSource = ds.CreateKendoDatasource({ url: config.dataSources.orders.url }); vm.dataSource = ds.CreateKendoDatasource({ url: "sales/orders", schema:{ data: function(data){ return data.salesOrders; // Here you can "manipulate" the dataset before its rendered in the browser }, total: function(data){ return data.paging.size; // Used to calculate the paging information }, model: { id: "salesOrderId" // API field which is used as an unique id } } });

Datasource methods:

• vm.dataSource.read() : Read dataitems from the API resource.
• vm.dataSource.reloadCurrentPage() : Read dataitems from the API resource while keeping the current state (like the page number, filters etc)
• vm.dataSource.setUrl() : Programatically set the grid url. Does not trigger a read.
• vm.dataSource.setFilter() : Sets a filter in the search area and executes a read.
• vm.dataSource.setSystemFilter() : Sets a filter and executes a read. The filter will not be visible to the end user.

On-change event (select row)

The on-change event fires when a user clicks or press the enter key on an item in the grid.

Lookup components

Same as the lookup-component property described under Grid columns. But here you can also specify lookup-components for filterable fields which are not returned as part of the dataset from the API. And there is support for passing parameters to the lookup-component. Homer has a template type which can generate the lookup component markup: rb app myLookupComponent -lookup

Create new item using inline script template

The rb-addnewpopover will generate a "create new" button on the left side of the pager area. Clicking on the button will open a popover containing the markup from the popovertemplate. You can also specify action events like ok, cancel, create-another and disable. The markup for this actions will automatically be prepended to the popover.

The rb-addnewlabel lets you put custom label for the "create new" button. Default value is Create new item

Create new item using component template

The rb-addnewcomponent lets you define a component to be used as a create new popover. In this example CreateNewItem is the name of the component that will be included. You can pass parameters to the component by using rb-addnewparams.

<div rb-grid rb-addnewcomponent="CreateNewItem" rb-addnewparams="vm.params" rb-addnewlabel="Create new order"> </div>

vm.params = { itemCreated: function(item) { //Callback function //Refresh grid? } };

Set permission on create new

The access-rule attribute lets you set permission on when and who can create new items. In the example 100143 is the number of the access-rule defined in the API. The access-rule can also require access-doc to be filled. In this case access-doc provides information about which order you want to create items on.

Predefined filters

This attribute applies a filter box to the grid. The FilterName property will be displayed in the filter box, and the filter property will be added to the grid url. The filter can also be defined in javascript by using an angular binding like this: predefined-filter='{{vm.predefinedFilter}}'