Hi
We have a grid configured on server side using Asp.Net MVC Helpers, and uses filtering and paging. Datasource is set to the initial data and datasourceUrl is set to get the paging data.
Initial mode is single selection enabled in row mode. Row selectors are present with rownumbering enabled and checkbox disabled.
On the client side, I would like to allow user to click a button and then enable the check boxes and let him select multiple rows. I tried with the following but could not get results:
var obj = $('#acMainGrid');
obj.igGridSelection('option', 'multipleSelection', true); obj.igGridRowSelectors('option', 'enableCheckBoxes', true);
I understand multipleSelection cannot be enabled after grid creation and that my only options are to get a new grid from the server or to recreate grid on the client. I dont want to hit the server because it takes time. How to do this purely on the client side ?
Kindly advise asap
Thanks
Hello Abhishek,
Thank you for posting in our forum.
The multipleSelection option has a setter, so it is actually possible to change it at runtime after grid creation. This is not the case with the “enableCheckBoxes” – changing it would require recreating the grid in order for it to reflect the changes, just as you have stated.
I would suggest that you handle the “rendered” event raised by the igGrid after it has finished initializing and has been rendered. In the handling function would contain the code that would call the grid API and change the two options. The reason for this is that we want to be sure the grid has been initialized and the widgets are there when we are calling them – otherwise clicking the button would cause an error.
The igDatasource widget API provides the “data” method, which would give you the original data that has been passed to the grid for databinding. Storing it in a variable and setting it as a new dataSource would make the grid dataBind again, which includes destroying it, binding to the new data (which is actually the old one) and reinitializing. That way the two options that have been changed would be reflected.
Here is a sample code that demonstrates the aforementioned approach in code:
<!DOCTYPE html> <html> <head> <title>Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"> <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"> <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script> </head> <body> <div style="margin: 50px auto; display:flex; justify-content: center; align-items: center; flex-direction: column"> <table id='grid'></table> <br/> <button id='configButton'>Change config</button> </div> <script> $(() => { let data = [ { "ProductID": 1, "ProductCategory": "Done Today", "UnitPrice": 12.81, "SellerName": "Stanley Brooker", "Country": "Bulgaria", "City": "Plovdiv", "UnitsSold": 282 }, { "ProductID": 2, "ProductCategory": "Done Today", "UnitPrice": 49.57, "SellerName": "Elisa Longbottom", "Country": "US", "City": "New York", "UnitsSold": 296 }, { "ProductID": 3, "ProductCategory": "Postponed", "UnitPrice": 3.56, "SellerName": "Lydia Burson", "Country": "Uruguay", "City": "Ciudad de la Costa", "UnitsSold": 68 }, ]; let customTemplate = '{}' $("#grid").igGrid({ dataSource: data, primaryKey: "ProductID", width: "1200px", autoCommit: true, rendered: () => { $('#configButton').on('click', () => { let localData = $('#grid').data('igGrid').dataSource.data() $('#grid').igGridSelection('option', 'multipleSelection', true); $('#grid').igGridRowSelectors('option', 'enableCheckBoxes', true) $('#grid').igGrid('option', 'dataSource', localData); }) }, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number", width: "25%", hidden: true }, { headerText: "Seller Name", key: "SellerName", dataType: "string", width: "33%"}, { headerText: "Product Category", key: "ProductCategory", dataType: "string", width: "33%" }, { headerText: "Units Sold", key: "UnitsSold", dataType: "number", width: "33%" }, ], features: [ { name: "Selection" }, { name: "RowSelectors" } ] }) }) </script> </body> </html>
Please let me know if you have some additional questions regarding this matter.
Getting following error when re-binding data:
Uncaught TypeError: Cannot read property 'length' of undefined at $.<computed>.<computed>._createUidForData (infragistics.lob.js:423) at $.<computed>.<computed>._createUidForData (jquery-ui-1.11.4.js:415) at $.<computed>.<computed>._dataRendering (infragistics.lob.js:423) at $.<computed>.<computed>._dataRendering (jquery-ui-1.11.4.js:415) at HTMLTableElement.proxy (jquery-2.2.3.js:497) at HTMLTableElement.dispatch (jquery-2.2.3.js:4737) at HTMLTableElement.elemData.handle (jquery-2.2.3.js:4549) at Object.trigger (jquery-2.2.3.js:7819) at HTMLTableElement.<anonymous> (jquery-2.2.3.js:7903) at Function.each (jquery-2.2.3.js:365)
My version is 2015.2
It seems the grid Selection widget is throwing this error because the _createUidForData method tries to iterate over the data records and the data is probably not there - that would explain the "Cannot read property 'length' of undefined" message.
I changed the product version to 15.2, but I am still not able to successfully reproduce this error on my side. Also, since your configuration is different, it seems this check is passing in your application but is not passing in the sample I have provided:
if (this.options.persist && !this.grid.options.primaryKey) {
this._createUidForData();
this._pkProp = "ig_pk"
}
Try setting the primary key of the grid and see if this would resolve the problem ( _createUidForData would not get called if there is a primary key).
Please note that even if I set the Selection “persist” option to true and have a primary key (so that the above check passes in my sample as well), the _createUidForData gets called, but I still do not get an error on my side. If the problem persists, I would appreciate if you please provide an isolated code sample where this behavior reproduces.
If you do not have such sample, try running the code I have provided in my previous response and see if you would get the same error. If not, please modify the configuration until it resembles your own application and the issue appears, and then send the sample back to me.
That would allow me to debug on my side and find what is causing the problem.
I look forward to your reply.
No effect.
Here is my grid configuration:
<table id="acMainGrid"></table> <script type="text/javascript">$(function () {$('#acMainGrid').igGrid({ dataSourceUrl: '/App/Data?cid=104&state=H4sIAAAAAAAEAJ1TTWvjMBC9F%2FofhM5hE%2B8uPQTXkK8uJukmxG62S5yDYk%2BCWFnSWvKGUPLfO5LdtBDawl5szXszbz6kebq%2BIoQOtB6pAmif0D%2FMaNrxaKosE0vIVVWMVC0t0kHDrDgcHu9nzj9czudplFWZDFfx5BeZTn7fZlRwY%2FfG5qzUtcloFMbjR7IazB4mSGaUdKOw69yjcBYn6V08S5MoHCwWszgaqVJ3Rj6wgxIV7MNuw4TjQTpIJimJzaTglm0FoNodEwYwxfopo6nDfrIS7X5G%2FyGT0U5GR0rUpfQ9IBHcILRUh7N99nCRGNFfoyoXdsVEPPYCKUgmbWs4CqopHBttwUHaBmsd5hqq9KjBGyhSQ%2BCPY260N1%2BJr%2F44xEoKVjWCeBf3eBf%2BvKhUUecviZnWbq7%2BvOMgCuk7RYsbz0HhrW2lDga2xx0W1SQGk1dcZ3RzbtXV17aaHI2F8kss7bemnBb4UfPirZ3Yisv9W%2BQi5NLl%2FxAUDm4%2BzPR5cZfIUCkBTH4CvcS5WY2ZZW5I66DX68haCMRyfJ%2Fo714N%2FPWBQe%2B7%2Fz8MEzKsDZdgDElwzJYrJ%2B0D2%2Fh3P%2B5iSs3kkdySd4Q2rqTF9KO3ujltwm67Jrhir8vlF7Trd7Xd7oLnQyZxs%2BUO9%2FjpdH11egZR5uHPDQQAAA%3D%3D',dataSource: {"Records":[{"CampusID":2234,"gstregid":224,"PartyID":30684,"CompanyID":104,"AccountMapCode":null,"GSTNUserId":"UBS_MH","GSTIN":"27AABCU8718M1ZR","DispName":"Unique Bus Services-MH","TaxAddressHor":"GSTIN:27AABCU8718M1ZR, PAN:AABCU8718M","MailingAddress":"Vashi, Mumbai, Maharashtra, India - 402107"}],"TotalRecordsCount":1,"Metadata":{"timezoneOffset":19800000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { headerText: 'CampusID', key: 'CampusID', dataType: 'number', width: '0%', hidden: true, columnCssClass: 'text-align-right' }, { headerText: 'gstregid', key: 'gstregid', dataType: 'number', width: '0%', hidden: true, columnCssClass: 'text-align-right' }, { headerText: 'PartyID', key: 'PartyID', dataType: 'number', width: '0%', hidden: true, columnCssClass: 'text-align-right' }, { headerText: 'CompanyID', key: 'CompanyID', dataType: 'number', width: '0%', hidden: true, columnCssClass: 'text-align-right' }, { headerText: 'AccountMapCode', key: 'AccountMapCode', dataType: 'string', width: '0%', hidden: true }, { headerText: 'GSTNUserId', key: 'GSTNUserId', dataType: 'string', width: '11%', hidden: false }, { headerText: 'GSTIN', key: 'GSTIN', dataType: 'string', width: '11%', hidden: false }, { headerText: 'DispName', key: 'DispName', dataType: 'string', width: '11%', hidden: false }, { headerText: 'TaxAddressHor', key: 'TaxAddressHor', dataType: 'string', width: '33%', hidden: false }, { headerText: 'MailingAddress', key: 'MailingAddress', dataType: 'string', width: '33%', hidden: false } ], features: [ { name: 'Selection', mode: 'row', multipleSelection: false }, { name: 'RowSelectors', enableCheckBoxes: false, enableRowNumbering: true, enableSelectAllForPaging: false }, { name: 'MultiColumnHeaders', inherit: true }, { name: 'Responsive', inherit: true, enableVerticalRendering: false }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'remote', inherit: true, pageSize: 25, totalRecordsCount: 1 }, { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local', inherit: true, persist: false, mode: 'simple' }, { name: 'Resizing' }, { columnSettings: [ { columnIndex: -1, columnKey: 'CampusID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'gstregid', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'PartyID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'CompanyID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'AccountMapCode', allowHiding: false, hidden: true } ], name: 'Hiding', inherit: true }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'local', inherit: true, persist: false } ], initialDataBindDepth: -1, width: '100%', isDataSetTableSource: true, primaryKey: 'CampusID', localSchemaTransform: false });});</script>
Pl advise.
Thank you for the provided configuration – I was able to reproduce the error on my side. After some investigation it turns out that the data that gets passed to the second grid after the button has been clicked is not the same as the original one and the dataBind doesn’t successfully create the dataView, that is why the same error gets thrown again. Try modifying the line of code that creates a copy of the data to this:
let localData = JSON.parse(JSON.stringify($('#grid').igGrid('option', 'dataSource')))
Using the getter of the dataSource returns the object itself, but we need a deep copy of the object, not the object itself. The easiest way to do this (if we are dealing with JSON) is using JSON stringify and parse methods – one serializes and the other deserializes the JSON again. The whole ‘click’ event handler now looks like this:
rendered: () => { $('#configButton').on('click', () => { let localData = JSON.parse(JSON.stringify($('#grid').igGrid('option', 'dataSource'))) $('#grid').igGridSelection('option', 'multipleSelection', true); $('#grid').igGridRowSelectors('option', 'enableCheckBoxes', true) $('#grid').igGrid('option', 'dataSource', localData); }) },
With this modification the sample is working on my side – I have provided it as a file attachment, which you may want to check and run it as well:
ChangeConfig.zip
Please note that according to our Product Lifecycle policy all products prior to version 16.2 are no longer eligible for service releases and support. In order to take advantage of all new features in latest versions of Ignite UI, I would strongly recommend you to upgrade to any of our latest versions.
Feel free to contact me if you have some additional questions.
A little difference in my config is that it has both dataSource and dataSourceUrl (for paging). In this case, .igGrid('option', 'dataSource') returns the Url instead of Json and the subsequent commands have no effect.
PFA changeconfig2.html which reflects this behaviour.
Pl advise .ChangeConfig2.zip
I am currently preparing an isolated MVC sample that would allow me to use the dataSourceUrl option and investigate this further on my side. Meanwhile I have two questions:
rendered: () => { $('#configButton').on('click', () => { localData = $('#grid').data('igGrid').dataSource.data() $('#grid').igGridSelection('option', 'multipleSelection', true); $('#grid').igGridRowSelectors('option', 'enableCheckBoxes', true) $('#grid').igGrid('option', 'dataSource', localData); }) },
You said it had no effect. What does that mean: that nothing happens when the handler get executed, or that you get the same error message as before? I am asking you, because I was getting the same error message on my side, but it was being raised by the _renderRecords method, not by _createUidForData. Would you please provide the error stack trace, if it is different this time?
1. I meant in terms of changeconfig2.html example that was attached in the previous message. Hope you could run that one.
In changeconfig2.html, have used a configuration similar to mine, including datasourceUrl. The handler gets executed but the check boxes do not appear and no error is thrown.
2. localSchemaTransform is set to false by the MVC wrapper. Can set it true if that helps.
Pl advise
In order to test the dataSourceUrl, I have used an online JSON service, called myjson.com, which allows you to upload some JSON and serves it through the URL that it provides. I have used a modified version of the initial JSON – that way switching to the remote data would be easily visible. Since updating the row selector options always leads either to databinding, or removes the dataSourceUrl if you change the source object, I would suggest that you use a completely different approach: the checkboxes should be always enabled, but would get hidden initially until the user clicks the button. There are several changes that need to be made to the code sample:
rendered: () => { $('#configButton').on('click', () => { visibleCheckboxes = true; $('span[data-role="checkbox"]').toggle(); $('#grid').igGridSelection('option', 'multipleSelection', true); }) },
rowsRendered: () => { if(!visibleCheckboxes){ $('span[data-role="checkbox"]').toggle(); } },
Here is the whole modified sample:
<!DOCTYPE html> <html> <head> <title> Sample </title> <script src="http://code.jquery.com/jquery-1.9.1.js"> </script> <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"> </script> <link href="https://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"> <link href="https://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet"> <script src="https://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"> </script> <script src="https://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"> </script> </head> <body> <table id="grid"> </table> <button id='configButton'> Change config </button> <script> $(() => { let visibleCheckboxes = false; $('#grid').igGrid({ dataSourceUrl: 'https://api.myjson.com/bins/mf8nz', dataSource: { "Records": [ { "CampusID": 2234, "gstregid": 224, "PartyID": 30684, "CompanyID": 104, "AccountMapCode": null, "GSTNUserId": "UBS_MH", "GSTIN": "27AABCU8718M1ZR", "DispName": "Unique Bus Services-MH", "TaxAddressHor": "GSTIN:27AABCU8718M1ZR, PAN:AABCU8718M", "MailingAddress": "Vashi, Mumbai, Maharashtra, India - 402107" }, { "CampusID": 2235, "gstregid": 224, "PartyID": 30684, "CompanyID": 104, "AccountMapCode": null, "GSTNUserId": "UBS_MH", "GSTIN": "27AABCU8718M1ZR", "DispName": "Unique Bus Services-MH2", "TaxAddressHor": "GSTIN:27AABCU8718M1ZR, PAN:AABCU8718M", "MailingAddress": "Vashi, Mumbai, Maharashtra, India - 402107" }, { "CampusID": 2236, "gstregid": 224, "PartyID": 30684, "CompanyID": 104, "AccountMapCode": null, "GSTNUserId": "UBS_MH", "GSTIN": "27AABCU8718M1ZR", "DispName": "Unique Bus Services-MH3", "TaxAddressHor": "GSTIN:27AABCU8718M1ZR, PAN:AABCU8718M", "MailingAddress": "Vashi, Mumbai, Maharashtra, India - 402107" } ], "TotalRecordsCount": 1, "Metadata": { "timezoneOffset": 19800000 } }, autoGenerateColumns: false, autoGenerateLayouts: false, mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, rendered: () => { $('#configButton').on('click', () => { visibleCheckboxes = true; $('span[data-role="checkbox"]').toggle(); $('#grid').igGridSelection('option', 'multipleSelection', true); }) }, rowsRendered: () => { if(!visibleCheckboxes){ $('span[data-role="checkbox"]').toggle(); } }, columns: [{ headerText: 'CampusID', key: 'CampusID', dataType: 'number', width: '0%', hidden: true, columnCssClass: 'text-align-right' }, { headerText: 'GSTNUserId', key: 'GSTNUserId', dataType: 'string', width: '11%', }, { headerText: 'GSTIN', key: 'GSTIN', dataType: 'string', width: '11%', }, { headerText: 'DispName', key: 'DispName', dataType: 'string', width: '11%', }, { headerText: 'TaxAddressHor', key: 'TaxAddressHor', dataType: 'string', width: '33%', }, { headerText: 'MailingAddress', key: 'MailingAddress', dataType: 'string', width: '33%', } ], features: [{ name: 'Selection', mode: 'row', multipleSelection: false }, { name: 'RowSelectors', enableCheckBoxes: true, enableRowNumbering: true, enableSelectAllForPaging: false }, { name: 'MultiColumnHeaders', inherit: true }, { name: 'Responsive', inherit: true, enableVerticalRendering: false }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'remote', inherit: true, pageSize: 25, totalRecordsCount: 1 }, { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local', inherit: true, persist: false, mode: 'simple' }, { name: 'Resizing' }, { columnSettings: [{ columnIndex: -1, columnKey: 'CampusID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'gstregid', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'PartyID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'CompanyID', allowHiding: false, hidden: true }, { columnIndex: -1, columnKey: 'AccountMapCode', allowHiding: false, hidden: true } ], name: 'Hiding', inherit: true }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'local', inherit: true, persist: false } ], width: '100%', primaryKey: 'CampusID', localSchemaTransform: false }); }) </script> </body> </html>
Running the code above and clicking the button would enable the two options you want, while changing the page size from the dropdown would load the remote data from the JSON API and use the dataSourceUrl option.
Let me know if you need some further assistance.