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.

OneDealer XML Grid List Page - Example of Common Section

<?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	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	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	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	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

Example

OneDealer XML Grid List Page

<?xml version="1.0" encoding="utf-8"?>
<Page type="One.Core.UI.MVC.Pages.XmlPages.XmlGridListBasePage, One.Core.UI.MVC">
  <Common>
    <Title>Test Grid List Page</Title>
    <PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaGridListPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
      <IncadeaDataProvider>
        <!--<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>-->
        <Url>/ListDataPaged</Url>
        <RequestType>GET</RequestType>
      </IncadeaDataProvider>
    </PageDataProvider>
    <JavascriptBundles>
      <Item>~/Installations/IncadeaDemo/Scripts/IncadeaPageDataManager.js</Item>
    </JavascriptBundles>
  </Common>
  <OneDealerPage>
    <CssClassIcon>fa-text</CssClassIcon>
    <PageActions>
      <XmlPageAction>
        <PageAction>
          <Title>Create New</Title>
          <CssClass>fa-plus</CssClass>
          <IsPopupPageAction>true</IsPopupPageAction>
          <Url>/externalcontroller/AjaxPopup</Url>
        </PageAction>
        <Parameters>
          <XmlPageActionParameter>
            <DataKey>pageId</DataKey>
            <DataValue>TestIncadeaFormPopup</DataValue>
          </XmlPageActionParameter>
        </Parameters>
      </XmlPageAction>
    </PageActions>
  </OneDealerPage>
  <XmlGridListPage>
    <Columns>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListLinkColumn, One.Core.UI.MVC">
        <Order>1</Order>
        <ColumnName>String</ColumnName>
        <PropertyName>TestString</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
        <Url>/externalcontroller?pageId=TestIncadeaTabPage</Url>
        <ParamName>TestInt</ParamName>
        <PropertyKey>TestInt</PropertyKey>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>2</Order>
        <ColumnName>Bool</ColumnName>
        <PropertyName>TestBool</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListCheckboxColumn, One.Core.UI.MVC">
        <Order>3</Order>
        <ColumnName>Check</ColumnName>
        <PropertyName>TestBool</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
        <Disabled>true</Disabled>
        <Checked>TestBool</Checked>
        <SpecificCheckedValue>True</SpecificCheckedValue>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>4</Order>
        <ColumnName>Char</ColumnName>
        <PropertyName>TestChar</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>5</Order>
        <ColumnName>Int</ColumnName>
        <PropertyName>TestInt</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>6</Order>
        <ColumnName>Long</ColumnName>
        <PropertyName>TestLong</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>7</Order>
        <ColumnName>Float</ColumnName>
        <PropertyName>TestFloat</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>8</Order>
        <ColumnName>Double</ColumnName>
        <PropertyName>TestDouble</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>9</Order>
        <ColumnName>DateTime</ColumnName>
        <PropertyName>TestDateTime</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
        <Format>yyyy-MM-dd HH:mm</Format>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListTextColumn, One.Core.UI.MVC">
        <Order>10</Order>
        <ColumnName>TimeSpan (Minutes)</ColumnName>
        <PropertyName>TestTimeSpan.TotalMinutes</PropertyName>
        <DefaultDisplay>true</DefaultDisplay>
      </Column>
      <Column type="One.Core.UI.MVC.Pages.GridList.GridListPageActionsColumn, One.Core.UI.MVC">
        <DefaultDisplay>true</DefaultDisplay>
        <Actions>
          <XmlPageAction>
            <PageAction>
              <Title>Edit</Title>
              <CssClass>fa-edit</CssClass>
              <IsFullPageAjax>true</IsFullPageAjax>
              <Url>/externalcontroller</Url>
            </PageAction>
            <Parameters>
              <XmlPageActionParameter>
                <DataKey>pageId</DataKey>
                <DataValue>TestIncadeaTabPage</DataValue>
              </XmlPageActionParameter>
              <XmlPageActionParameter>
                <DataKey>TestInt</DataKey>
                <MapperDataProvider>
                  <FromProperty>TestInt</FromProperty>
                  <ToProperty>DataValue</ToProperty>
                </MapperDataProvider>
              </XmlPageActionParameter>
            </Parameters>
          </XmlPageAction>
          <XmlPageAction>
            <PageAction>
              <Title>Edit Popup</Title>
              <CssClass>fa-edit</CssClass>
              <Url>/externalcontroller/AjaxPopup</Url>
              <IsPopupPageAction>true</IsPopupPageAction>
            </PageAction>
            <Parameters>
              <XmlPageActionParameter>
                <DataKey>pageId</DataKey>
                <DataValue>TestIncadeaFormPopup</DataValue>
              </XmlPageActionParameter>
              <XmlPageActionParameter>
                <DataKey>TestInt</DataKey>
                <MapperDataProvider>
                  <FromProperty>TestInt</FromProperty>
                  <ToProperty>DataValue</ToProperty>
                </MapperDataProvider>
              </XmlPageActionParameter>
            </Parameters>
          </XmlPageAction>
        </Actions>
      </Column>
    </Columns>
  </XmlGridListPage>
</Page>

Result

Page tree