FlexSheet and childItemsPath

Posted by: rob-ferguson on 9 September 2017, 9:22 am EST

  • Posted 9 September 2017, 9:22 am EST

    Hi,

    I have a floating palette (see attached image) that utilises a wjcGridSheet.FlexSheet and its childItemsPath property.

    I've set the flexSheet.headersVisibility = wjcGrid.HeadersVisibility.None; which hides the default row and column header.
    However, the FlexSheet appears to create a second column header when you bind data to the component.

    I would like to hide the second column header, is this possible? I tried:

    this.flexSheet.sheets[0].rows[1].visible = false;

    but it hides all rows.

    palette.component.html:





    palette.component.ts:

    import * as wjcGridSheet from 'wijmo/wijmo.grid.sheet';
    import * as wjcGrid from 'wijmo/wijmo.grid';

    import { AfterViewInit, Component, ViewChild } from '@angular/core';

    @Component({
    selector: 'app-palette',
    templateUrl: './palette.component.html',
    styleUrls: ['./palette.component.css']
    })
    export class PaletteComponent implements AfterViewInit {

    public profitAndLossItems = [{

    items: [
    {
    section: 'Income',

    items: [
    { field1: 'Revenue'},
    { field1: 'Sales'}
    ]
    },
    {
    section: 'Cost Of Sales',
    items: [
    { field1: 'Direct Costs'}
    ]
    },
    {
    section: 'Other Income',
    items: [
    { field1: 'Other Income'}
    ]
    },
    {
    section: 'Expences',
    items: [
    { field1: 'Expences'},
    { field1: 'Depreciation'},
    { field1: 'Overheads'}
    ]
    }
    ]
    }];

    @ViewChild('flexSheet')
    private flexSheet: wjcGridSheet.FlexSheet;

    ngAfterViewInit() {

    this.flexSheet.childItemsPath = 'items';
    this.flexSheet.selectionMode = wjcGrid.SelectionMode.Row;
    this.flexSheet.headersVisibility = wjcGrid.HeadersVisibility.None;

    this.flexSheet.allowAddNew = false;
    this.flexSheet.isReadOnly = true;

    let grid = new wjcGrid.FlexGrid(document.createElement('div'));
    grid.initialize({
    autoGenerateColumns: false,
    itemsSource: this.profitAndLossItems,
    columns: [
    { header: ' ', binding: 'section', width: '2*' },
    { header: ' ', binding: 'field1' }
    ]
    });

    this.flexSheet.sheets.push(new wjcGridSheet.Sheet(this.flexSheet, grid, 'Basic'));
    }
    }



    Cheers
    Rob

  • Replied 9 September 2017, 9:22 am EST

    Hi,
    You can hide row using following code snippet:
    this.flexSheet.sheets[0].grid.rows[1].visible = false;
    or
    this.flexSheet.rows[1].visible = false;

    Hope it helps !

    Please read the following blog:
    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/

    Thanks,
    Manish Kumar Gupta
  • Replied 9 September 2017, 9:22 am EST

    Hi Manish,

    Thanks for getting back to me so promptly.

    This worked (see attached image):

      ngAfterViewInit() {

    this.flexSheet.childItemsPath = 'items';
    this.flexSheet.selectionMode = wjcGrid.SelectionMode.Row;
    this.flexSheet.headersVisibility = wjcGrid.HeadersVisibility.None;

    this.flexSheet.allowAddNew = false;
    this.flexSheet.isReadOnly = true;
    this.flexSheet.showMarquee = false;

    let grid = new wjcGrid.FlexGrid(document.createElement('div'));
    grid.initialize({
    autoGenerateColumns: false,
    itemsSource: this.profitAndLossItems,
    columns: [
    { header: ' ', binding: 'section', width: '2*' },
    { header: ' ', binding: 'field1' }
    ]
    });

    this.flexSheet.sheets.push(new wjcGridSheet.Sheet(this.flexSheet, grid, 'Basic'));
    this.flexSheet.rows[0].visible = false;
    this.flexSheet.rows[1].visible = false;
    }



    I have set this.flexSheet.showMarquee = false;, how do I style the 'selected' row (highlighted row) so that it includes all columns?

    Cheers
    Rob



  • Marked as Answer

    Replied 9 September 2017, 9:22 am EST

    Hello Rob,

    Thank you for sharing your observation here. You can change background color of remaining selected cell by changing .wj-state-multi-selected class background. Please refer to the attached CSS code sample for the same.
    .wj-state-multi-selected{
    background: #80adbf !important;
    }



    Please read the following blog:
    http://wijmo.com/blog/wijmo-com-will-soon-be-grapecity-com/


    Thanks,
    Manish Kumar Gupta
  • Replied 9 September 2017, 9:22 am EST

    Hi Manish,

    Thanks, this worked (see attached image):

    .wj-state-selected {
    background-color: #0085c7;
    color: #fff;
    }

    .wj-flexsheet .wj-state-multi-selected {
    background-color: #0085c7;
    color: #fff;
    }

    .wj-flexsheet .wj-cell.wj-state-multi-selected {
    border-right: none;
    border-bottom: none;
    }



    Cheers
    Rob

Need extra support?

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

Learn More

Forum Channels