OneDealer XML Grid List Page is an extension of OneDealer XML Page that displays data in a grid list view. The definition of the page is similar to XML Pages as described in OneDealer XML Pages with extra definition regarding grid list configuration and data source.
The page type is declare in Page element in the attribute type as a OD Fully qualified assembly name
OneDealer XML Grid List Page Type
One.Core.UI.MVC.Pages.XmlPages.XmlGridListBasePage, One.Core.UI.MVC
Data Source
In the Common section of the XML page we need to declare the PageDataProvider element, which is the way that OneDealer understands what is needed to be executed in order to retrieve data and display them.
IncadeaGridListPageBinderProvider
OD Fully Qualified Assembly Name
OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaGridListPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer
This page data provider is specifically designed and implemented for the needs of Incadea and it is consisted from an IncadeaDataProvider
Property | Description | Value Type |
---|---|---|
Url | the url to retrieve the data | string |
RequestType | the request type GET/POST | string |
Cache | An object related to cache configuration | element |
PostParameters | If the request is a POST request declare here the required parameters | element |
Cache
Property | Description | Value Type |
---|---|---|
Duration | The duration of the result object which is kept in the cache | int |
PostParameters
Property | Description | Value Type |
---|---|---|
Key | The name of the parameter to sent | string |
Value | The value of the parameter to sent | string |
Javascript Bundles
As we have mentioned in OneDealer XML Pages, in the Javascript Bundles the developer can add an extra javascript file that contains any additional behavior to the page.
In the example below you will see that the following js files has been added `IncadeaPageDataManager.js` and has a logic related to Page Actions in order to facilitate development.
It adds a function named `PageActionToIncadeaDataProvider`, which when this used in the Page Action, in the `OnBeforeAjaxCallback` element it does the following:
- Adds to ManagerPageCallback with an default interface and method name
- Gets the declared Url element of the Page Action
- Sets the RequestType to POST
- Adds the PostParameters based on the declared action parameters
and then it proceeds to the execution of the request.
Alternatively, the developer should fill in the above required field in order execute the request.
<?xml version="1.0" encoding="utf-8"?> <Page type="One.Core.UI.MVC.Pages.XmlPages.XmlGridListBasePage, One.Core.UI.MVC"> <Common> <Title>Test Page</Title> <!-- GridList's data source is a Page Data Provider --> <PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaGridListPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer"> <IncadeaDataProvider> <Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url> <RequestType>GET</RequestType> </IncadeaDataProvider> </PageDataProvider> <!-- Javascript Bundles --> <!-- This javascript file adds additional features to the page, for example it makes easier to create Page Actions for Incadea --> <JavascriptBundles> <Item>~/Installations/IncadeaDemo/Scripts/IncadeaPageDataManager.js</Item> </JavascriptBundles> </Common> </Page>
IncadeaDataProvider
You can read more about IncadeaDataProvider in the OneDealer XML Pages - Incadea Reference
Xml Grid List Page
The Xml Grid List Page is a xml definition with the name XmlGridListPage
and it contains an array of columns
Column
A column in the xml grid list is consisted from the following basic elements
Name | Description | Required | Value Type |
---|---|---|---|
Type | The Type of the column Text, Link, Image, Check, Dropdown, etc | string - OD fully qualified assembly name | |
ColumnName | The name that will be displayed in the header of the column | string | |
ColumnTitleCss | The css of the title | string | |
ResourceKey | The resource key for translation | string | |
PropertyName | The name of the property model to bind / display | string | |
SortPropertyName | The name of the property model to sort | string | |
SpecificCheckedValue | |||
DefaultDisplay | If the column is visible (default false) | bool | |
ExtraHtmlAttribute | string | ||
AllowReordering | if the column is allowed to perform ordering | bool | |
HideColumnNameOnMobile | Hide column on mobile devices | bool | |
AllowExportExcel | Allow column to be exported to the excel | bool | |
AdditionalCssClass | Additional css class | string | |
ColumnItemClass | Css class for the item | string | |
Order | Column display order | int | |
SortingDirection | Sorting Direction | string (ASC / DESC) | |
HelpText | A text for help info | string | |
HelpTextResource | the resource key for the help text | string |
Column Types
There are several available Column Types and each one inherits from the base column type as referenced above. The Column Types are the following:
Type | Description | OD Fully Qualified Assembly Name |
---|---|---|
GridListTextColumn | Displays text | One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC |
GridListPhoneColumn | Similar to text , but formatted for phone numbers | One.Core.UI.MVC.Pages.GridList.GridListPhoneColumn, One.Core.UI.MVC |
GridListMailColumn | Similar to text, but with a link to the email | One.Core.UI.MVC.Pages.GridList.GridListMailColumn, One.Core.UI.MVC |
GridListLookupStaticColumn | A dropdown / Look up control with static referenced data | One.Core.UI.MVC.Pages.GridList.GridListLookupStaticColumn, One.Core.UI.MVC |
GridListLinkColumn | Similar to text, but with a link to the content | One.Core.UI.MVC.Pages.GridList.GridListLinkColumn, One.Core.UI.MVC |
GridListImageColumn | Displays images | One.Core.UI.MVC.Pages.GridList.GridListImageColumn, One.Core.UI.MVC |
GridListIconColumn | Displays fa icons | One.Core.UI.MVC.Pages.GridList.GridListIconColumn, One.Core.UI.MVC |
GridListDateTimeColumn | Formatted Date time column | One.Core.UI.MVC.Pages.GridList.GridListDateTimeColumn, One.Core.UI.MVC |
GridListCheckboxColumn | Checkbox column | One.Core.UI.MVC.Pages.GridList.GridListCheckboxColumn, One.Core.UI.MVC |
GridListPageActionsColumn | Grid List Page Actions | One.Core.UI.MVC.Pages.GridList.GridListPageActionsColumn, One.Core.UI.MVC |
Extra Options of each column type
GridListTextColumn : GridListBaseColumn
Name | Description | Value Type |
---|---|---|
IsHtmlRaw | if the content of the text is HTML (Default: False) | bool |
Format | This is used for numeric data (Example N2, #,00) | string |
IsTime | Formatted as "dd/MM/yyyy HH:mm" | bool |
IgnoreZero | if value is 0 then converts it to empty | bool |
UrlEncode | If it is encoded it does an Http Decode | bool |
MaxLength | Displays the text to the declared max length | int |
IsReadMore | Displays a "read more" element | bool |
GridListLookupStaticColumn : GridListBaseColumn
Name | Description | Value Type |
---|---|---|
DropDownListItems | A XML array of static values | XML Array Element |
DropDownListItems
Name | Description | Value Type |
---|---|---|
Text | The Text to display | string |
Value | The actual Value | string |
Enabled | if it is enabled | bool |
Selected | If it is selected | bool |
GridListLinkColumn : GridListTextColumn
Name | Description | Required | Value Type |
---|---|---|---|
ALL THE FIELDS FROM GridListTextColumn | |||
ParamName | The name of the param that will be sent | string | |
Url | the url | string | |
PropertyKey | The name of the property to be displayed | string | |
ParamNameSecond | the name of the 2nd parameter that will be sent | string | |
PropertyKeySecond | the name of the 2nd property key | string | |
OpenInNewTab | if it will open in a new tab | bool | |
ValueToBeReplaced | state here the value that needs to be replaced | string | |
ValueToReplaceWith | State here the new value that will replace the old one | string | |
IconClassToShow | fa icon to be displayed | string |
GridListImageColumn : GridListBaseColumn
Name | Description | Required | Value Type |
---|---|---|---|
DefaultImage | Default image url if fails to load the declared | string | |
Url | Url of image to load | string | |
PropertyKey | The property field from the model to be sent as value parameter | string | |
ParamName | the name of the parameter to be sent | string | |
ImagePrefix | An image prefix name | string | |
ImageWidth | Image width | int | |
MobileImageWidth | Mobile Image width | int | |
Height | Image Height | int | |
MobileHeight | Mobile Image Height | int |
GridListIconColumn : GridListBaseColumn
Name | Description | Value Type |
---|---|---|
IconClass | The fa icon class | string |
GridListDateTimeColumn : GridListBaseColumn
Name | Description | Required | Value Type |
---|---|---|---|
DatePropertyName | The property field name to display the date | string | |
TimePropertyName | The property field name to display the date | string | |
Format | Format field (Default: "dd/MM/yyyy HH:mm") | string | |
ShowOnlyDate | if true shows only date | bool | |
ShowEmptyIfTimeIsNull | if time is null show empty string | bool |
0 Comments