Allow multiple selection at runtime in igGrid

930

Allow multiple selection at runtime in igGrid

Abhishek Singhal posted over 5 years ago

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

Parents

485

Offline Vasil Pavlov posted over 5 years ago

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.

930

Offline Abhishek Singhal posted over 5 years ago in reply to Vasil Pavlov

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

Thanks
Cancel
Reply

Cancel
485

Offline Vasil Pavlov posted over 5 years ago in reply to Abhishek Singhal
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:

Before modifying the “rendered” handler with json parse and stringify, the code was the following:

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?

The default value of localSchemaTransform is “true”? I would appreciate if you please provide me some information regarding why you have decided to set it to “false” instead? While I was testing I tried removing it and the error stopped appearing. Have you tried removing it from your configuration?
Cancel
Reply

Cancel
930

Offline Abhishek Singhal posted over 5 years ago in reply to Vasil Pavlov

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
Cancel
Reply

Cancel

485

Offline Vasil Pavlov posted over 5 years ago in reply to Abhishek Singhal

Hello Abhishek,

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:

I am using a global boolean variable which would indicate if the checkboxes should be visible or not, called visibleCheckboxes = false (initially they would be hidden).
In the ‘rendered’ event handler I attach the button click event handler, which sets this boolean variable to ‘true’ and then uses the jQuery toggle() method to toggle the checkboxes visibility. It enables the multiple selection as well:

rendered: () => {
	$('#configButton').on('click', () => {
		visibleCheckboxes = true;
		$('span[data-role="checkbox"]').toggle();
		$('#grid').igGridSelection('option', 'multipleSelection', true);
	})
},

Every time the grid dataBinds, or updates the UI for some reason, it throws the ‘rowsRendered’ event. So we have to check if the checkboxes have been enabled and toggle them in the event handler – otherwise they would return to their initial state:

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.

930

Offline Abhishek Singhal posted over 5 years ago in reply to Vasil Pavlov

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.

Pl advise

Thanks
Cancel
Reply

Cancel

Reply

485

Offline Vasil Pavlov posted over 5 years ago in reply to Abhishek Singhal

Hello Abhishek,

This issue has been fixed since version 16.2 of Ignite UI - I would strongly recommend that you upgrade to the latest version 19.1, as the one that you are currently using is not eligible for support anymore.

That means we would not be able to provide you a fix for the problem – neither in an untested build, nor in a Service Release. Upgrading to the latest version would give you another 3 years of support (please note that only the first year includes bug fixes and Service releases). You would also have the benefit of all the new features and options that have been added to the product in the last 4 years.

We have a page providing more details regarding the product lifecycle that you may find useful.

Please let me know if need some additional information.
Cancel
Reply

Cancel

Children

No Data