Grid

Widget Type:

Page Widgets

TPC Version:

4.1 +

The New TPC grid will allow you to show data in a grid format in page level. This widget also gives the options to do the basic CRUD functionality by using TPC forms. New Grid widget allows server side sorting, grouping, filtering and paging. It also can query more than 5000 records on single grid. Setting up a TPC Grid widget is straight forward, please follow these steps.

Configuration

Basic settings

Drag and drop a grid widget to your page and click on the edit, it will open the widget designer.

In the basic settings tab, you can enable adding, deleting, editing records. Once you enable any of these options you need to set a page that have the form with the right field to edit the record.

Data

The data tab is use for defining the FetchXML, which will define what sort of records you want to show on your grid. You have the option of working with the primary entity or any other entity that the one has a relationship with.

Load Default: Will load the default FetchXML that set to the selected CRM entity.

Build: Will let you build the fetchXML , and you will be able to select what fields that you want to display , filter the data, group the data.

Please refer to FetchXML Builder How-to for more information about the Fetch XML builder.

Settings

TPC Grids give you number of options and functionalities, and you can enable or disable these options in settings tab. Some of the functionalities are listed below.

Enable Paging
Enable Grouping
Enable Sorting
Enable Filtering
Reorderable Columns
Resizable Columns
Show Column Menu
Virtual Scrolling

Filters

The Filters tab contains a myriad of options to filter the records that the widget fetches. For example, you can filter records by the logged-in contacts' ID or by a query string value.

Columns

The Columns tab allows you to define what data fields will appear in the TPC Grid widget. It works alongside Fetch XML to define new columns for your widget. It will also give the option to edit the data column, set column header, change the HTML etc.

Widget Properties

Basic Properties

Allow Adding Records

The Allow Adding Records checkbox allows users to add records to the CRM Entity that the widget is configured to use. When checked, you will be prompted to choose a page or a form from which the widget will use to add records.

Allow Editing Records

The Allow Editing Records checkbox allows users to edit existing records from the CRM Entity that the widget is configured to use. When checked, you will be prompted to choose a page or a form from which the record will be edited from.

Allow Deleting Documents

The Allow Deleting Notes property allows you to delete any document attached to the SharePoint grid.

Allow Exporting Records

The Allow Exporting Records checkbox allows you to export and download the entirety of a CRM Entity in spreadsheet (.xls) format. Please note that this spreadsheet will include all selected data fields as per the BuildXML even if they don't physically appear on the widget.

CRM Entity

A CRM Entity is a collection of fields related to a topic. For example, a CRM Entity of Contacts would have fields like: Contact Name, Telephone Number, Address, etc. CRM Entity will allow you to save a successful form submission to a particular entity. Depending on the widget and CRM Entity chosen.

Fetch XML

The FetchXML text area determines what sort of data a widget will be populated with.

Clicking the Load Default Fetch option will populate the FetchXML area with a default fetch based on the CRM Entity chosen. By clicking the Build button, we will be sent to another page in order to determine what the widget will look up. For more information on how to use the FetchXML function.

GridSettings

GridSettings can be found under Advanced > Model > GridSettings

Property	Description
AddRecordButtonClass	The CSS class of the Add Record Button.
AddRecordButtonText	The button text of the Add Record Button.
AddRecordIconClass	The CSS class of the Add Record Icon.
AddRecordImageClass	The class of the Add Recode Image.
DeleteRecordButtonClass	The CSS class of the Delete Record Button.
DeleteRecordButtonText	The button text of the Delete Record Button.
DeleteRecordColumnHeaderText	The column header text of the Delete Record Column Header.
DeleteRecordColumnWidth	The width of the Delete Record Colum.
DeleteRecordIconClass	The class of the Delete Record Icon.
DeleteRecordImageClass	The class of the Delete Record Image.
EditRecordButtonClass	The class of the Edit Record Button.
EditRecordButtonText	The text of the Edit Record Button.
EditRecordColumnHeaderText	The column header text of the Edit Record Column Header.
EditRecordColumnWidth	The width of the Edit Record Colum.
EditRecordIconClass	The CSS class of the Edit Record Icon.
EditRecordImageClass	The CSS class of the Edit Record Image.
ExcelExportAllPages	If set to `true` the grid will export all pages of data.
ExcelExportFileName	Specifies the file name of the exported Excel file.
ExcelExportFilterable	Enables or disables column filtering in the Excel file.
Filterable	If set to `true` the user can filter the data source using the grid filter menu.
GridHeight	The height of the grid. Numeric values are treated as pixels.
Groupable	If set to true the column will be groupable.
Pageable	If set to `true` the grid will display a pager.
PageableAllowRefresh	If set to `true` the pager will display the refresh button. Clicking the refresh button will refresh the grid.
PageableButtonCount	The maximum number of buttons displayed in the numeric pager. The pager will display ellipsis (...) if there are more pages than the specified number.
PageablePageSizes	The number of data items which will be displayed in the grid. Default values are 10,25,50,100, all.
PageSize	The number of data items per page. The property has no default value. That is why to use paging, make sure somepageSizevalue is set.
ReorderableColumns	If set to `true` the user could reorder the columns by dragging their header cells.
ResizableColumns	If set to `true`, users can resize columns by dragging the edges (resize handles) of their header cells.
Scrollable	If set to `true` the grid will display a scrollbar when the total row height (or width) exceeds the grid height (or width).
ServerFiltering	If set to true, the data source will leave the filtering implementation to the remote service.
ServerGrouping	If set to `true`, the data source will leave the grouping implementation to the remote service.
ServerPaging	If set to true, the data source will leave the data item paging implementation to the remote service.
ServerSorting	If set to true the data source will leave the grouping implementation to the remote service.
ShowColumnMenu	If set to `true` the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled).
Sortable	If set to `true` the user could sort the grid by clicking the column header cells.
VirtualScrolling	If set to `true` the grid will always display a single page of data. Scrolling would just change the data which is currently displayed.

Advanced Properties

Advanced properties provide additional functionality. They can be accessed by clicking on the "Advanced" Button in the bottom right corner of the widget designer.

CacheData

This property enables/disables CRM data caching. Defaults to false.

AddMissingLinkedEntityIds

Set to true out of the box, this attribute allows you to use the attributes of the link entities in the fetch on your templates, if this is set to false than the Unique Identifier for the Linked Entity will not be automatically added which means you wont be able to use the attributes of the linked entity in your template.

However if you want to return distinct values with your fetchXML, the value of this attribute needs to be false.

GridSettings

GridSettings can be found under Advanced > Model > GridSettings

Property	Description
AddRecordButtonClass	The CSS class of the Add Record Button.
AddRecordButtonText	The button text of the Add Record Button.
AddRecordIconClass	The CSS class of the Add Record Icon.
AddRecordImageClass	The class of the Add Recode Image.
DeleteRecordButtonClass	The CSS class of the Delete Record Button.
DeleteRecordButtonText	The button text of the Delete Record Button.
DeleteRecordColumnHeaderText	The column header text of the Delete Record Column Header.
DeleteRecordColumnWidth	The width of the Delete Record Colum.
DeleteRecordIconClass	The class of the Delete Record Icon.
DeleteRecordImageClass	The class of the Delete Record Image.
EditRecordButtonClass	The class of the Edit Record Button.
EditRecordButtonText	The text of the Edit Record Button.
EditRecordColumnHeaderText	The column header text of the Edit Record Column Header.
EditRecordColumnWidth	The width of the Edit Record Colum.
EditRecordIconClass	The CSS class of the Edit Record Icon.
EditRecordImageClass	The CSS class of the Edit Record Image.
ExcelExportAllPages	If set to `true` the grid will export all pages of data.
ExcelExportFileName	Specifies the file name of the exported Excel file.
ExcelExportFilterable	Enables or disables column filtering in the Excel file.
Filterable	If set to `true` the user can filter the data source using the grid filter menu.
GridHeight	The height of the grid. Numeric values are treated as pixels.
Groupable	If set to true the column will be groupable.
Pageable	If set to `true` the grid will display a pager.
PageableAllowRefresh	If set to `true` the pager will display the refresh button. Clicking the refresh button will refresh the grid.
PageableButtonCount	The maximum number of buttons displayed in the numeric pager. The pager will display ellipsis (...) if there are more pages than the specified number.
PageablePageSizes	The number of data items which will be displayed in the grid. Default values are 10,25,50,100, all.
PageSize	The number of data items per page. The property has no default value. That is why to use paging, make sure somepageSizevalue is set.
ReorderableColumns	If set to `true` the user could reorder the columns by dragging their header cells.
ResizableColumns	If set to `true`, users can resize columns by dragging the edges (resize handles) of their header cells.
Scrollable	If set to `true` the grid will display a scrollbar when the total row height (or width) exceeds the grid height (or width).
ServerFiltering	If set to true, the data source will leave the filtering implementation to the remote service.
ServerGrouping	If set to `true`, the data source will leave the grouping implementation to the remote service.
ServerPaging	If set to true, the data source will leave the data item paging implementation to the remote service.
ServerSorting	If set to true the data source will leave the grouping implementation to the remote service.
ShowColumnMenu	If set to `true` the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled).
Sortable	If set to `true` the user could sort the grid by clicking the column header cells.
VirtualScrolling	If set to `true` the grid will always display a single page of data. Scrolling would just change the data which is currently displayed.

GridEvents

GridEvents can be found under Advanced > Model > GridSettings > GridEvents

GridEvents Allows you to add events handlers to the Grid. This is a list of the different events available. You pass in a function name to handle the desired event. More documentation of the Kendo grid events can be found in here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events

EnableBootstrapStyles

The EnableBootstrapStyles property gives the user the ability to enable or disable the Boostrap style that added in to the current form. By default, this property is set to True.

EnableKendoRtlSupport

The EnableKendoRtlSupport property gives the user the ability to enable or disable the Right to Left Support on the current form. By default, this property is set to False.

More Information about Kendo right to left support can be found in

http://docs.telerik.com/kendo-ui/accessibility/supporting-rtl-languages

EnableKendoThemes

The EnableKendoThemes property gives the user the ability to enable or disable Kendo themes provided by Kendo. Kendo themes are applied to all the TPC widgets that uses Kendo UI Widgets.

More Information about kendo Themes can be found in : http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling.

KendoTheme

The Kendo Theme property enables you to set a kendo theme to the form. Here are the list of kendo Themes that you set for this property;

Black
BlueOpal
Bootstrap
Default
Fiori
Flat
HighContrast
Material

MaterialBlack
Metro
MetroBlack
Moonlight
Nova
Office365
Silver
Uniform

More Information about kendo Themes can be found in

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling

ExcelExportAllPages

Whether or not to export all pages or just the current page when exporting using Excel.

ExcelExportFilterable

Whether or not the exported Excel document is filterable.

ServerFiltering

If set to true, the data source will leave the filtering implementation to the remote service. By default, the data source performs filtering client-side.

More Information about ServerFiltering can be found in:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverFiltering

ServerGrouping

If this property set to true, the data source will leave the grouping implementation to the remote service. By default, the data source performs grouping client-side.

More Information about ServeGrouping can be found in:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverGrouping

ServerPaging

If this property set to true, the data source will leave the data item paging implementation to the remote service. By default, the data source performs paging client-side.

More information about ServerPaging can be found in:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverPaging

ServerSorting

If this property set to true, the data source will leave the data item sorting implementation to the remote service. By default, the data source performs sorting client-side.

More information about ServerSorting can be found in:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverSorting

ExcelExportFileName

You can change the Excel Export file name and the file extension by changing the value of ExcelExportFileName property.

API

get_type()

Returns the widget type.

Returns

String

get_windowPlaceholder()

Returns the modal window associated with the widget.

Returns

jQuery Object

get_container()

Returns the container element of the widget.

Returns

jQuery Object

get_element()

Returns the element of the widget.

Returns

jQuery Object

hide()

Hides the widget from the page.

Returns

None

show()

Shows the widget on the page.

Returns

None

toggle()

Toggles the visibility of the widget on the page.

Returns

None

get_grid()

Returns the Kendo Grid Object.

Returns

Kendo Object: kendo.ui.Grid

get_kendoWindow()

Returns the Kendo Window Object of the widget (add/edit set to popup window).

Returns

Kendo Object: kendo.ui.Window

get_model()

Returns the model object of the widget, which contains several useful properties related to the widget.

Returns

Object

MergedAnalytics B2B Tracking Image - NoScript

Configuration

Basic settings

Data

Settings

Filters

Columns

Widget Properties

Basic Properties

CacheData

AddMissingLinkedEntityIds

Allow Adding Records

Allow Editing Records

Allow Deleting Documents

Allow Exporting Records

CRM Entity

Fetch XML

GridSettings

GridEvents

EnableBootstrapStyles

EnableKendoRtlSupport

EnableKendoThemes

KendoTheme

ExcelExportAllPages

ExcelExportFilterable

ServerFiltering

ServerGrouping

ServerPaging

ServerSorting

ExcelExportFileName

Advanced Properties

CacheData

AddMissingLinkedEntityIds

Allow Adding Records

Allow Editing Records

Allow Deleting Documents

Allow Exporting Records

CRM Entity

Fetch XML

GridSettings

GridEvents

EnableBootstrapStyles

EnableKendoRtlSupport

EnableKendoThemes

KendoTheme

ExcelExportAllPages

ExcelExportFilterable

ServerFiltering

ServerGrouping

ServerPaging

ServerSorting

ExcelExportFileName

API

Returns

Returns

Returns

Returns

Returns

Returns

Returns

Returns

Returns

Returns

How to's

Examples of Grid Configuration