Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Abhishek Singhal
930
Allow multiple selection at runtime in igGrid
posted

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

Parents Reply Children
  • 485
    Offline posted 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.

  • 485
    Offline posted 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:

     

    1. 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).
    2. 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);
	})
},

    1. 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.