Log in to start a topic

Flexgrid groupHeaderFormat and collapsegroupToLevel question

Posted by: basmaat on 14 September 2017, 11:08 am EST

  • basmaat

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 11:08 am EST

    Hi,

    First of all congratulations on this awesome framework! I have just been playing for a few hours with it, and all is very intuitive.

    I do have a few questions though.

    I intend to use one datasource and bind it to multiple controls. I have one flexgrid where I group over some fields, so I basically use it as a tree control. When selecting a level in the tree I would like to filter a second flexgrid.

    1. Is it possible to add a handler when I select a group? At the moment I am only able to add a handler to when a row is selected?
    2. Is it possible to change the appearance of the group? I saw the documentation for groupHeaderFormat, is it possible to add a html template?
    3. Probably a very easy one, but can not figure out how to use the collapseGrouptoLevel(), as I want the tree to be completely collapsed when the application is openened.

    I have created this JSfiddle http://jsfiddle.net/basmaat/bw9c4k34/1/

    Any help is greatly appreciated.

    Cheers

    Bastian

  • bernardo

    Posted 14 September 2017, 11:08 am EST

    Glad you like the controls. I agree 100%, but I am suspect :wink:

    Some answers:

    1. Yes, you can add a handler for group selections. All you have to do is check whether the selected row is a group header.

    2. The groupHeaderFormat property is a simple HTML template. It controls the content of the cell, which appears next to the collapse/expand button.

    3. You can collapse all nodes by calling collapseGroupsToLevel in the itemsSourceChanged event handler.

    This fiddle shows all three answers in action: http://jsfiddle.net/Wijmo5/15uukgjb/

    I hope this helps, please keep those great questions coming!

  • gregjftr

    Posted 14 September 2017, 11:08 am EST

    Hi Bernardo

    in the jsfiddle , you have examples for answers 1 and 3 but not for 2, unless I am missing soething.

    Any chance of an example on howgropHeaderFormat is set to grid instance

  • gregjftr

    Posted 14 September 2017, 11:08 am EST

    Is there nobody that can help me with this

  • manpreet-kaur

    Posted 14 September 2017, 11:08 am EST

    Hello,

    I apologize for the delayed response. Here is an example of setting the GroupHeaderFormat property of FlexGrid:

    “The default value for this property is ‘{name}: {value}({count:n0} items)’, which creates group headers similar to ‘Country: UK (12 items)’ or ‘Country: Japan (8 items)’.”

    You can replace the above parameters with any text or any parameters listed in the description of the GroupHeaderFormat property on the following documentation page: http://wijmo.com/5/docs/topic/wijmo.grid.FlexGrid.Class.html.

    I even tried setting some HTML content on the GroupHeaderFormat property but it does not seems to be working. In case you want to display some kind of HTML content then I would request you to elaborate your requirement further, so that I can accordingly guide you ahead with this issue.

    Thanks,

    Manpreet Kaur

  • gregjftr

    Posted 14 September 2017, 11:08 am EST

    Manpreet Kaur

    Thanks for the reply

    It looks like you cannot customise the formatting Group Header!!

    Making the following statement in the linked document incorrect:

    “You may add invisible columns bound to the group properties in order to customize the formatting of the group header cells.”

  • rewen

    Posted 14 September 2017, 11:08 am EST

    You should be able to define an itemFormatter and do a check like so:

    [js]

    if (panel.rows[r] instanceof wijmo.grid.GroupRow) {

    // this is the group row

    }[/js]

  • kvk

    Posted 14 September 2017, 11:08 am EST

    Hi Manpreet,

    Do we have any other solution for formatting group header.

  • sadiqcs47

    Posted 14 September 2017, 11:08 am EST

    But It’s not working for me…

  • jouni

    Posted 14 September 2017, 11:08 am EST

    Hi sadiqcs,

    I have attached a sample demonstrating flexgrid groupHeaderFormat property. Please let me know if it works.

    2016/05/GroupHeaderFormat.txt

  • rohit-nanania

    Posted 14 September 2017, 11:08 am EST

    Just FYI

    You can also configure this through JS lik given below in initialize function.

    
$scope.flex.initialize({
            autoGenerateColumns: false,
            frozenColumns: 2,
            columns: columns,
            itemsSource: cvData,
            // Default
            groupHeaderFormat: 'Group By {name} : <b>{value}</b> contain {count} items'
            // Without Name
            // groupHeaderFormat: '<b>{value}</b> contain {count} items'
            // Modify based on your requirement
});

    I could not find this anywhere in documentation so just adding it here.

  • gopala-chintakindi

    Posted 14 September 2017, 11:08 am EST

    Hi,

    In my case in my itemsSource collection I have accountNumber and accountName. I am grouping my flexgrid by accountNumber but donot show that column. I want to have custom group row header and after almost spending 3 hours.I came to know about groupHeaderFormat property. I want to show my group header like this

    ( accountNumber ) accountName

    for example: ( 12 ) Wijmo Foundation Acccount. How to do this? I am working with Angular JS 4 and Typescript.

  • gopala-chintakindi

    Posted 14 September 2017, 11:08 am EST

    Please let me know whether is there any better way to have custom group row header for flexgrid when we group our rows… I was able to achieve what I want using formatItem. Please see below and let me know is there any better and easy way to do it.

    <wj-flex-grid #complexflexgrid [itemsSource]=“wjAccounsControlsFlexGridItemsSource” [selectionMode]=“5” [showGroups]=“true” [isReadOnly]=“false” (formatItem)=“wjComplexflexgridGridItemFormatter(complexflexgrid, $event, true)”>

    <wj-flex-grid-column header=“Select” binding=“select”>

    <input type=“checkbox” enabled />

    </wj-flex-grid-column>

    <wj-flex-grid-column header=“number” binding=“controlNumber” isReadOnly=true>

    </wj-flex-grid-column>

    <wj-flex-grid-column header=“name” binding=“controlName” isReadOnly=true></wj-flex-grid-column>

    </wj-flex-grid>

    wjComplexflexgridGridItemFormatter(flexGrid: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs, customRowGroupHeader: boolean){

    …

    // add/handle check box for grouped rows

    if (e.panel.rows[e.row] instanceof wjcGrid.GroupRow && e.panel.cellType !== wjcGrid.CellType.RowHeader) {

    const chk = document.createElement(‘input’);

    chk.type = ‘checkbox’;

    chk.style.marginLeft = ‘6px’;

    chk.className = ‘custom-check-box’; //wj-cell-check

    const groupData = e.panel.rows[e.row].dataItem;

    let cnt = 0;

    for (let i = 0; i < groupData.items.length; i++) {

    if (groupData.items[i].select === true) {

    cnt++;

    }

    }

    chk.checked = cnt > 0;

    chk.indeterminate = cnt > 0 && cnt < groupData.items.length;

    e.cell.appendChild(chk);

    if(customRowGroupHeader === true) {

    e.cell.appendChild(document.createTextNode( e.panel.rows[e.row].dataItem.items[0].customRowGroupHeader));

    flexGrid.groupHeaderFormat = ‘{myname}’;

    }

    }

    }

  • manish-gupta1

    Posted 14 September 2017, 11:08 am EST

    Hi Gopal,

    Since you would like to show accountName along with accountNumber, you can not use groupHeaderFormat property. For this, you need to customize groupHeader using formatItem.

    Please use the following code snippet for customizing group header:

     if (e.panel.rows[e.row] instanceof wjcGrid.GroupRow && e.panel.cellType != wjcGrid.CellType.RowHeader) {
            var chk = document.createElement('input');
            chk.type = 'checkbox';
            chk.style.marginLeft = '6px';
            chk.className = 'custom-check-box';
            var groupData = e.panel.rows[e.row].dataItem;
            console.log(groupData);
            var cnt = 0;
            for (var i = 0; i < groupData.items.length; i++) {
                if (groupData.items[i].active == true)
                    cnt++;
            }
            chk.checked = cnt > 0;
            chk.indeterminate = cnt > 0 && cnt < groupData.items.length;

            // custom group header
            let span = '<span class="wj-elem-collapse wj-glyph-down-right"></span>';
            if (e.panel.rows[e.row].isCollapsed) {
                span = ' <span class="wj-elem-collapse wj-glyph-right" > </span>';
            }
            else {
                span = '<span class="wj-elem-collapse wj-glyph-down-right"></span>'
            }
            e.cell.innerHTML = span + '  (' + groupData.name + ') ' + groupData.items[0].country;
            e.cell.appendChild(chk);
        }

    Please put this code in formatItem event.

    We are sorry, we cannot say much about your code snippet since you are setting groupHeaderFormat property to {myName}. But we are not able to find where you set {myName}.

    Thanks,

    Manish Kumar Gupta

  • gopala-chintakindi

    Posted 14 September 2017, 11:08 am EST

    Thanks Manish. I am able to solve my issue. flexGrid.groupHeaderFormat = ‘{myname}’; just the code to make sure the default formatter doesnot work. if I give flexGrid.groupHeaderFormat = ‘’; I am getting nothing and if I give flexGrid.groupHeaderFormat = ‘{}’; I am getting {} so I gave flexGrid.groupHeaderFormat = ‘{myname}’;

    In my sample application everything is working fine. But when I integrate that in my main application I am having issue where first row group is selected. In my main application the below is scenario

    User selects one account using check box and clicks a button. Then I make a http.get service call to get data from java service. After getting response I massage it and create my itemsSource collection. I use grouping for this.

    Please see below code in my typescript file

    filteredObjects = trackingObjects.filter(item => item.value === true);
if(filteredObjects !== null && filteredObjects !== undefined && filteredObjects.length > 0
   && filteredObjects.length === trackingObjects.length) {
         //we got all results
         const viewAccountControls = this.prepareItemsSourceForAccountControlsFlexGrid(accountsControls);
         this.wjControlsFlexGridItemsSource = new wjcCore.CollectionView(viewAccountControls);
         this.wjControlsFlexGridItemsSource.groupDescriptions.push(new wjcCore.PropertyGroupDescription('accountNumber'));
         this.wjControlsFlexGridItemsSource.moveCurrentToPosition(-1);                                   
         this.showLoader = false;
     }

    This is in html

    <wj-flex-grid #accountsControlsFlexGrid [itemsSource]="wjControlsFlexGridItemsSource" [selectionMode]="5" [showGroups]="true" [isReadOnly]="false" (formatItem)="wjFlexGridItemFormatter(accountsControlsFlexGrid, $event, wjControlsFlexGridItemsSource)"
 [headersVisibility]="1">
 <wj-flex-grid-column header="Select" binding="select">
        <input type="checkbox" enabled />
 </wj-flex-grid-column>
 <wj-flex-grid-column header="ID" binding="id" isReadOnly=true></wj-flex-grid-column>
 <wj-flex-grid-column header="Name" binding="name" isReadOnly=true></wj-flex-grid-column>
  </wj-flex-grid>

    If I use like below I am getting itemsSource undefined since that is true.

     ngAfterViewInit() {
         this.wjControlsFlexGridItemsSource.moveCurrentToPosition(-1);
    }

    My question is where I need to give this.wjControlsFlexGridItemsSource.moveCurrentToPosition(-1); in scenario where you show the flexgrid with column headers but no row and when user clicks some button fetch records from database and bind to flexgrid. I tried many ways but none useful.

  • gopala-chintakindi

    Posted 14 September 2017, 11:08 am EST

    I did like this. Now it works.

      ngAfterViewInit() {
        this.accountsControlsFlexGrid.itemsSourceChanged .addHandler((e: wjcCore.EventArgs)=>{
            this.wjControlsFlexGridItemsSource.moveCurrentToPosition(-1);
        });
    }

  • Asingh125

    Posted 17 May 2019, 7:50 am EST

    Hi Team/Manish,

    could you please help me, i need urgent solution to one problem statement.

    Can we allow the dragging of rows only between the grouped rows.

    Means the dragging of rows could only happen between the grouped rows like in above post’s image of grouped rows.

    Thanks in advance,

    awaiting response.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.