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
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
Hello Abhishek,
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.
Everything else is working fine, but when the check boxes show up, multiple selection is not enabled.
So when a second row is selected, the first one gets de-selected.