GridView and DataList data synchronization

Grid View back-end and front-end synchronization

For a Grid View control to be able to be displayed in the front-end side of the application its content and data needs to be synchronized between the front-end and the back-end of the application. To accomplish this, there are two key components that serve as communicators between the application's server and the client's browser. Those components are the following:

• Grid View and controls models.

• Web API controller calls.

Grid View and controls models

The Grid View model is a data representation of the basic information that is needed to render its respective component in the front-end application, it mainly contains the visual structure of the control such as visibility, position, page size. This model also contains its events and the associated references to its controls model id.

Here we can see an example of a Grid View model:

{
            "AllowPaging": true,
            "AllowSorting": true,
            "AutoGenerateColumns": false,
            "AutoGenerateSelectButton": false,
            "HeaderStyle": {
                "HorizontalAlign": 2,
                "CssClass": "GridHeader"
            },
            "PageSize": 10,
            "SelectedIndex": -1,
            "GridLines": 2,
            "Attributes": {},
            "CssClass": "Grid",
            "AutoSize": false,
            "Controls": {
                "3d61bad3-ec06-4aaa-9579-e0bd2b88b89d": true,
                "78a7057c-7164-4c5e-b4c9-50dab41db9e8": true,
                "08ac587f-89ce-4321-be08-bb81b8bcb54c": true,
                "c0b33875-e6f6-4973-9f69-da7cf4728df9": true,
            },
            "Enabled": true,
            "EventChanges": {
                "Sorting": true,
                "PageIndexChanging": true
            },
            "Focused": false,
            "Name": "grdDeals",
            "Parent": "a91ed5a6-f71a-45bc-873b-192082098c64",
            "Refresh": true,
            "Style": {},
            "ShowTooltip": false,
            "TabIndex": 0,
            "TabStop": true,
            "Text": "",
            "Visible": true,
            "ZIndexRefresh": false,
            "Id": "1571c471-dbd0-479f-aff8-1e192158bfd3",
            "MapperId": "grdvw",
            "References": {}
        },

But this is necessary to load API calls to be explained in the following section. It's important to mention if we only load the grid and its controls, we'll the rendered control should be empty as you can see here:

Web API controller calls

Once the GridView's basic properties sent via model are synchronized, the data for the Grid View is retrieved by API calls, each one with one single responsibility. The GridView model has a Refresh flag used to flag is used to notify the front-end some changes in the data set to be requested by this mechanism.

GetColumns API

This API is in charge of loading the information of column’s information in order to display them as required, it contains an array with the column’s representation including properties such as the style, the header text, sort expression, data text field, it also includes events information related events related to this column and in an object apart, we can see the caption and the name for this column, each column will be represented as we can see here:

"Cols": [
{
            "ContainingField": {
                "HeaderStyle": {
                    "BorderStyle": "None",
                    "HorizontalAlign": "NotSet",
                },
                "HeaderText": "Record No",
                "Name": null,
                "ItemStyle": {
                    "BorderStyle": "None",
                    "HorizontalAlign": "NotSet",
                },
                "SortExpression": "RecordNumber",
                "Visible": true,
                "Id": "3d1f0272-361f-4c8a-8382-f4df538108e4",
                "DataNavigateUrlFields": [
                    "DealId"
                ],
                "DataTextField": "RecordNumber",
                "Text": null,
                "EventChanges": {
                    "NavigateToPage": true
                }
            }
        },
        {
            "caption": "Record No",
            "name": "Record No"
        },
]

GetIndexPage API

This API call receives as argument the index of the page that is going to be shown and returns the representation of the rows that will be displayed in the grid. It contains the length of the rows, the styles in case there is some style for any row set and the rows array with the data based on the columns explained on GetColumns API but basically composed by the column name and the column value, also we can see the DataControlFields array inside which is the info to set the different controls that could be into the grid like HyperLinkField in case that we need to show a link in this cell.

{
    "Rows": [
        {
            "RowId": "dfa8923b-9a2d-40a3-85c4-ed9f57ac72a3",
            "Record No": "3054",
            "Client Name": "clientname-test",
            "Client Code": "12345",
            "DataControlFields": [
                {
                    "Text": "3054",
                    "ContainingFieldType": "HyperLinkField",
                    "Controls": {}
                },
                {
                    "Text": "clientname-test",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                },
                {
                    "Text": "12345",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                }
            ]
        }
    ],
    "Styles": [],
    "Length": 1
}

GetRangedPage API

Finally, this API should send to front-end the information with the data of the rows that are selected to be displayed on visual representation given the arguments required. Those arguments are only skip and take. The structure is very simple and has the same representation of GetIndexPage API, as you can see is only the list of rows, the style, and the length of the rows array. Is important to mention that this API is mainly used to load the GridView data when the virtual scroll feature is turned on.

{
    "Rows": [
{
            "RowId": "dfa8923b-9a2d-40a3-85c4-ed9f57ac72a3",
            "Record No": "3054",
            "Client Name": "clientname-test",
            "Client Code": "12345",
            "DataControlFields": [
                {
                    "Text": "3054",
                    "ContainingFieldType": "HyperLinkField",
                    "Controls": {}
                },
                {
                    "Text": "clientname-test",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                },
                {
                    "Text": "12345",
                    "ContainingFieldType": "BoundField",
                    "Controls": {}
                }
            ]
        }
],
    "Styles": [],
    "Length": 0
}

After the API calls, the grid shows the information and the row page completely full as you can see in the following image

DataList back-end and front-end synchronization

The DataList control is used to display a template data bound list, this control can be manipulated by using templates. In a similar manner as the Grid View control reviewed before this control sends by model its principal properties, however, in this case, we only handle a single Web API controller call.

DataList model and Controls

The DataList model is a data representation of the basic information that is needed to render its respective component in the front-end application. It mainly contains the visual structure of the control like visibility, position, page size.

Here we can see an example of a Grid View model

{
            "ItemStyle": {
                "CssClass": "DataListItem"
            },
            "AlternatingItemStyle": {
                "CssClass": "DataListAlternatingItem"
            },
            "Attributes": {},
            "AutoSize": false,
            "Enabled": true,
            "EventChanges": {
                "ItemCommand": true
            },
            "Focused": false,
            "Name": "dataList",
            "Parent": "e6d3c88c-86b4-4da4-924c-767355d46d72",
            "Refresh": true,
            "Style": {},
            "ShowTooltip": false,
            "TabIndex": 0,
            "TabStop": true,
            "Text": "",
            "Visible": true,
            "ZIndexRefresh": false,
            "Id": "a695c8a1-d796-4b44-919a-6a3371b045ec",
            "MapperId": "dtlst",
            "References": {}
        },

Same as the GridView, just with the model is not enough to see the correct behavior of this control, we need to charge the data as we will do in the next section, but here we can see only with the model info:

GetControlsId Web API controller call

In order to set some controls to the DataList in frontend is required to invoke this Web API call, it only contains objects composed by an array of key/value elements where the key is the control’s name and the value is the unique id or MobilizeId for this control for every row in shown, with this information front-end link this control with this DataList, as we can see here this an example for a response of this API call:

[
    {
        "hidID": "4486bd0c-cc2a-4246-bf4c-8cc9a832db06",
        "hidIsNew": "d547d7ab-e182-4539-b1a7-a6d0d837e997",
        "txtCounterpartyName": "ee4ea4fe-f400-407d-a88e-87123c83b5dd"
    },
    {
        "hidID": "9523215c-bc8c-4533-87ea-23b43d2f2871",
        "hidIsNew": "ec2da901-6a49-468f-a215-828fba3e85b8",
        "txtCounterpartyName": "7b03d932-bff2-40f9-8efc-e69e478b48e7"
    }
]

Now with this information loaded we are able to see the correct presentation of the DataList as we show bellow: