Limit Grouped Columns to Three Columns

pankaj bahukhandi posted over 6 years ago

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

Top Replies

17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to pankaj bahukhandi +1
Hello Pankaj, When grouping columns from the grouping dialog different events are triggered. In order to achieve the same behavior the modalDialogGroupingColumn...view reply »
30

Offline pankaj bahukhandi posted over 6 years ago in reply to Vasya Kacheshmarova +1 verified
Thanku Vasya , Your suggestion helpful for me... below is my code... groupedColumnsChanging: function (evt, ui) { debugger; var groupedColumnsCount...view reply »

Parents

17590

Offline Vasya Kacheshmarova posted over 6 years ago

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:

Check the count of the currently grouped columns and if it exceeds the limit to cancel grouping by returning false.

 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
								}
						 }

Check the count of the grouped columns and if it exceeds the limit to ungroup lastly grouped column and group the current one.

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

30

Offline pankaj bahukhandi posted over 6 years ago in reply to Vasya Kacheshmarova

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

Cancel
17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to pankaj bahukhandi

Hello Pankaj,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.
Cancel
Reply

Cancel
30

Offline pankaj bahukhandi posted over 6 years ago in reply to Vasya Kacheshmarova

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

Thanks,

Pankaj Bahukhandi
Cancel
Reply

Cancel
17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to pankaj bahukhandi
Hello Pankaj,

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

Cancel

Reply

30

Offline pankaj bahukhandi posted over 6 years ago in reply to Vasya Kacheshmarova

Hello Vasya,

can you solved my one more issue...

When I am using Paging the group by only used on single page.. I mean Group By Not worked on Paging type remote....

Thanks,

Pankaj Bahukhandi
Cancel
Reply

Cancel

Children

17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to pankaj bahukhandi

Hello Pankaj,

I created a small sample with Group By and Paging features enabled (along with all other features from your configuration). On my side everything works as expected and grouping was correctly applied across all pages.

Attached you will find my sample. Please test it on your side and let me know what is the result. If the issue can still be replicated please provide me with steps to reproduce.

If this this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.

Looking forward to hearing from you.

0550.igGridGroupOnly3Columns (2).zip
Cancel
Reply

Cancel
30

Offline pankaj bahukhandi posted over 6 years ago in reply to Vasya Kacheshmarova

I want to paging remote & also use grouping either remote or local...

Thanks,

Pankaj Bahukhandi
Cancel
Reply

Cancel
17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to pankaj bahukhandi

Hello Pankaj,

Remote Paging does not work as expected with remote GroupBy. We have this listed in our Known Issues topic available here. Please have a look at this document and if your scenario is not matching any of the listed please feel free to get back to me with more details.
Cancel
Reply

Cancel