Hello Vasya can you please help me i want to only 3 column grouped by once if try more then 3 column then unboud it...
$("#grdReport").igGrid({ dataSource: gridData, autoGenerateColumns: false, width: '100%', columns: [
{ key: "IncidentId", hidden: true }, { key: "Policy", dataType: "string", headerText: "Policy" }, { key: "Division", headerText: "Division", dataType: "string", width: "25%" }, { key: "Incident", headerText: "Incident",dataType: "string", width: "10%" }, { key: "EmployeeName", headerText: "Employee", dataType: "string", width: "20%" }, { key: "IncidentDate", headerText: "Date", width: "10%", dataType: "date", format: "MM/dd/yyyy" }, { key: "FromDate", hidden: true }, { key: "ToDate", hidden: true }, { headerText: "", key: "Link", dataType: "string", width: "10%", unbound: true, template: "<button class='btn btn-hre viewIncident' data-id='${IncidentId}'>View</button>"
}
], features: [ { name: 'Sorting', type: "remote", mode: "single", sortUrlKey: "sort"
}, { name: 'Filtering', mode: "advanced", type: "local", filterExprUrlKey: "filter", filterDialogContainment: "window", filterDialogFilterDropDownDefaultWidth: 100 }, { name: 'GroupBy', type: "local", initialExpand: false, defaultSortingDirection: "asc", persist: false, columnSettings: [{ columnKey: "Policy", isGroupBy: true } ],
groupedColumnsChanged: function (evt, ui) { if (ui.groupedColumns.length > 3) { alert("Max. 3 column allowed to group.");
//I WANT TO SOME CODE ON HERE TO REVERT 4TH COLUMN OR REPLACE 3RD COLUMN
return false; } } }, { name: "Paging", type: "local", pageSize: 10, recordCountKey: "TotalCount", pageSizeUrlKey: "pageSize", pageIndexUrlKey: "pageNumber" }, { name: 'Selection', multipleSelection: true }, { name: 'RowSelectors', enableRowNumbering: false }, { name: 'Hiding' }, { name: 'Summaries' } ] });
Thanks in advance..
PANKAJ BAHUKHANDI
Hello Pankaj,
Thank you for posting in our community.
My suggestion for achieving your requirement is handling groupedColumnsChanging event which is fired when the grouped columns collection is about to change. This event can be canceled which will prevent grouping
There are two options:
groupedColumnsChanging: function (evt, ui) { var groupedColumnsCount = ui.groupedColumns.length; if(groupedColumnsCount > 2) { alert("Maximum size of grouped columns is 3. Grouping column " + ui.key + " is going to be prevented"); return false } }
groupedColumnsChanging: function (evt, ui) { var groupedColumnsCount = ui.groupedColumns.length; if(groupedColumnsCount > 2 && groupedColumnsCount > 1) { alert("Maximum size of grouped columns is 3. Column " + ui.groupedColumns[groupedColumnsCount - 1].col.headerText + " is going to be ungrouped and column " + ui.key + " is going to be grouped"); $("#grid").igGridGroupBy("ungroupByColumn", ui.groupedColumns[groupedColumnsCount - 1].key); } }
Attached you will find a sample illustrating the second approach. Please test it on your side and let me know if you have any additional questions regarding this matter.
7713.igGridGroupOnly3Columns.zip
Hello Vasya ,
Thank u very much first one worked for me..
may be 2nd one is some version issue of my product... once again thank u so much it help other also...
Thanks,
Pankaj Bahukhandi
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Hello Vasya,
Its working on when user drag column and place grouping area but not working on when user click select column and then select multiple column and appy grouping so can u provide me solution for this scenerio...
When grouping columns from the grouping dialog different events are triggered. In order to achieve the same behavior the modalDialogGroupingColumn event, fired when column in the modal dialog is clicked to be grouped, should be handled as well. For example:
modalDialogGroupingColumn: function(evt, ui){ var tmpGroupedCol = ui.owner._tempGroupedColumns.length; if( tmpGroupedCol > 2 ){ return false; } }
Please let me know if you have any additional questions.