This topic discusses client-based vs. server-based merging of unbound columns and the optimization considerations for each. It also demonstrates how the developer can programmatically control where merging can take place.
The following topics are prerequisites to understanding this topic:
Unbound Columns Overview: This topic provides an overview of the Unbound Columns feature of the igGrid.
Setting a Column as Unbound: This topic demonstrates how to set up an Unbound Column for the igGrid on the client and on the server. It includes JavaScript and ASP.NET code snippets.
Populating Unbound Columns Locally (igGrid): This topic demonstrates, with code samples how to set unbound column values on the client.
Populating Unbound Columns Remotely (igGrid): This topic demonstrates, with code samples how to set unbound column values on the server.
This topic contains the following sections:
In a MVC scenario you can choose where the merge operation takes place. Options are: on the client or on the server.
In the View this configuration is controlled by Grid<T>.MergeUnboundColumns(bool mergeUnboundColumns) method.
In the Controller this configuration is controlled by GridModel.MergeUnboundColumns boolean property.
MergeUnboundColumns option makes sense only in MVC scenario when Ignite UI for MVC Grid is used. On the client this option should not be set explicitly by the developer.
The default value for MergeUnboundColumns is false.
Note: In
igHieararchicalGridthe property should be set to everyColumnLayout.
This is the default configuration.
Failing to set MergeUnboundColumns option or explicitly set it to false, will result in the unbound column being merged on the client. This means that in the JSON response unbound column data is send as part of the response Metadata, that is to say separately from the grid data.
The code snippet below shows an igGrid initialization code generated by the Ignite UI for MVC Grid. You can see that the data source Metadata property has an unboundValues property containing DomainName unbound column data. mergeUnboundColumns = false which tells igGrid to look for unbound column data in the data source metadata.
In JavaScript:
$.ig.loader('igGrid', function() {
$('#grid1').igGrid({
dataSource: {
"Records":[
{"FirstName":"Nancy","LastName":"Davolio"},
{"FirstName":"Andrew","LastName":"Fuller"},
{"FirstName":"Janet","LastName":"Leverling"}
],
"TotalRecordsCount":0,
"Metadata":{
"timezoneOffset":7200000,
"unboundValues":
{
"DomainName":[
"examplenancyd","exampleandrewf","examplejanetl"
]
}
}
},
columns: [
{ key: 'FirstName', dataType: 'string', headerText: 'First Name' },
{ key: 'LastName', dataType: 'string', headerText: 'Last Name' },
{ unbound: true, key: 'DomainName', headerText: 'DomainName', dataType: 'string' }
],
dataSourceType: 'json',
autoGenerateColumns: false,
autoGenerateLayouts: false,
mergeUnboundColumns: false,
responseDataKey: 'Records',
generateCompactJSONResponse: false,
enableUTCDates: true,
localSchemaTransform: true
});
});
The default value for the MergeUnboundColumns option is false, removing the heavy lifting from the server allowing it to process more client requests.
Merging on the client side may result in a performance hit if the original data source is excessively big. This is because the whole data must be traversed and new unbound values added to it (or default null values if the list values are less).
In a large data source scenario, using of paging is advisable. This will lower the count of merged records.
When performing MergeUnboundColumns = true, merging occurs on the server. As a result, data gets send to the client as a typically normal set of records (there is no metadata for the unbound column in the response). mergeUnboundColumn property on the client is set to true, and igGrid did not touch the data. In the column configuration on the client unbound property is set to false by the Grid MVC Wrapper, so the igGrid sees the column as bound. In this case one more property (which is considered internal and thus is undocumented in the API docs) is sent as part of the column definition. Its name is unboundDS and it is available to the igGrid to check for unbound columns and disable the not supported features.
The code bellow shows the igGrid client side code generated from Ignite UI for MVC Grid. Column with key DomainName is unbound, but its data is part of the data source. In this case, its unbound property is set to false and mergeUnboundColumns is set to true. Column property unboundDS is set to true (by the Ignite UI for MVC Grid) to indicate that the column is unbound.
In JavaScript:
$.ig.loader('igGrid', function() {
$('#grid1').igGrid({
dataSource: {
"Records":[
{"FirstName":"Nancy","LastName":"Davolio","DomainName":"examplenancyd"},
{"FirstName":"Andrew","LastName":"Fuller","DomainName":"exampleandrewf"},
{"FirstName":"Janet","LastName":"Leverling","DomainName":"examplejanetl"}
],
"TotalRecordsCount":0,
"Metadata":{"timezoneOffset":7200000}
},
dataSourceType: 'json',
autoGenerateColumns: false,
autoGenerateLayouts: false,
mergeUnboundColumns: true,
responseDataKey: 'Records',
generateCompactJSONResponse: false,
enableUTCDates: true,
columns: [
{ key: 'FirstName', dataType: 'string', headerText: 'First Name' },
{ key: 'LastName', dataType: 'string', headerText: 'Last Name' },
{
unbound: false,
key: 'DomainName',
headerText: 'DomainName',
dataType: 'string',
unboundDS: true
}
],
localSchemaTransform: true
});
});
Merging on the server side may result in a performance hit if the original data source is excessively large. This is because the whole data must be traversed and new unbound values added to it (or default null values if the list values are less). As you can imagine though, the server is usually the one in a more dangerous position as the large data manipulations can become a pretty serious problem when they have to be performed multiple times for multiple clients.
Failing to set unbound methods values using one of the SetUnboundValues methods, when MergeUnboundColumns = true will result in the need to traverse the entire data source and set all values back to their default values (null value) for the unbound columns.
It is strongly advisable to use one of the Grid<T>.SetUnboundValues(string key, Dictionary<object, object> values) for the View or GridModel.SetUnboundValues(string key, Dictionary<object, object> values) for the Controller as it is a performance gain, compared to their overloads accepting List<object> as second parameter.
In a large data source scenario using of paging is advisable, because merging will be performed after paging, thus lowering the count of records to be merged.
Note: The best way to handle merging data from different data sources is to create a Model combining the data from the data sources and use it as a model for the grid. Thus supporting all of the remote features.
The following topic provides additional information related to this topic.
igGrid’s Unbound Columns feature.View on GitHub