Widget Type:
Page Widgets
TPC Version:
  • 4.1 +
VideoLogos

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. 

grid

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.  

grid-1

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. 

grid-2

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
grid-3

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.

grid-4

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. 

grid-5

Widget Properties

Basic Properties

Allow Adding Records

The Allow Adding Records checkbox allows users to add records to theCRM 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

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.


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 Boostap 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.

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.

Allow Adding Records

The Allow Adding Records checkbox allows users to add records to theCRM 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

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.


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 Boostap 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()

toggle the visibility of the widget on the page.

Returns

None

get_grid()

Returns the kendo Grid object.     

Returns

Kendo Grid Object  : kendo.ui.Grid

get_kendoWindow()

Returns the kendo window of the widget (add/edit set to popup window).     

Returns

None

get_model()

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

Returns

Object