Wijmo Flex Grid Table

Posted by: tejaswi.kalyanam on 28 January 2021, 6:34 pm EST

  • Posted 28 January 2021, 6:34 pm EST

    I am using the wijmo flex grid table, but i need to add the child row also using the parent row below . I need in this code in Type script. Please observe below images.
  • Replied 31 January 2021, 2:10 pm EST

    Hi Tejaswi,

    You can use wijmo.grid.detail.FlexGridDetailProvider to add detail rows in the FlexGrid.

    https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/angular

    Regards,
    Ashwin
  • Replied 31 January 2021, 5:39 pm EST

    Hi Ashwin,

    Thank you for the reply.
    But i need the parent row of child rows like below image.
    but here only add and remove rows. Please suggest another way.


    Thanks & Regards,
    Tejaswi.
  • Replied 31 January 2021, 9:07 pm EST

    You can also use a hierarchical grid by setting the childsItemPath property:

    https://www.grapecity.com/wijmo/demos/Grid/TreeGrid/ChildItems/angular

    In the master-detail sample from the previous reply, the rows are not added or removed, instead, the child rows are displayed in a whole different grid and are shown/hidden accordingly.

    ~regards
  • Replied 4 February 2021, 10:52 pm EST

    Hi,

    Please observe below image
    When we click on "Add Note" button we need to enable the row like "5.0" row, after click the "ok" button add the complete row like "3.0" or "4.0" row. if click the cancel button the row should be deleted.
    click the reply button added the child rows like "1.1", "1.2" rows.

    I tried previous link type but that way not working.
    Is it possible case or not in wijmo, plz suggest me

    Thanks,
    Tejaswi Kalyanam.
  • Replied 8 February 2021, 8:02 pm EST

    Hi Tejaswi,

    Sorry for the delayed response. This will be possible to implement but we will require a little more time to implement it in Angular. We will update you on this tomorrow.

    ~regards
  • Replied 9 February 2021, 3:19 pm EST

    Hi Tejaswi,

    Please refer to the sample link below and let me know if this fulfills your requirements:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-fdfnnd

    ~regards
  • Replied 9 February 2021, 9:38 pm EST

    Hi Ashwin,

    Thank you so much for the help of my page. what ever you suggested ling is fulfills my requirements.

    But when i am trying the code, facing two issue
    one issue is please observe below image. when we import the selector it is showing the error.
    second issue is when add the new row click the ok button the height should be automatically increasing the infinity height(please observe below image)

    issues



    please suggest me how to resolve these two issues.

    Thanks & Regards,
    Tejaswi Kalyanam.
  • Replied 10 February 2021, 8:31 pm EST

    Hi Tejaswi,

    Can you please provide me with the package.json and package-lock.json file. It may be possible that wijmo.grid.selector is not added as a dependency in your project.

    Regarding row height: can you let me know the HTML being used in the component along with the library used to add the edit, delete, and more icons (if any used).
    Also, let me know the version of Wijmo you are using.

    ~regards
  • Replied 10 February 2021, 11:55 pm EST

    Hi,

    I am using this ""selector" for the check boxes and installed the particular "npm i @grapecity/wijmo.grid.selector" , but i am facing this issue ,

    and observe the below image,


    please suggest me how to resolve this issue

    Thanks & Regards
  • Replied 11 February 2021, 12:09 am EST

    ashwin.saxena said:
    Hi Tejaswi,

    Can you please provide me with the package.json and package-lock.json file. It may be possible that wijmo.grid.selector is not added as a dependency in your project.

    Regarding row height: can you let me know the HTML being used in the component along with the library used to add the edit, delete, and more icons (if any used).
    Also, let me know the version of Wijmo you are using.

    ~regards



    Hi,

    "wijmo": "^5.20202.732",


    Regarding row height::
    i am design the my screen like this


    Thanks

  • Replied 11 February 2021, 9:54 pm EST

    It seems that you are using two different versions of Wijmo. Please remove the "wijmo" and "@grapecity/wijmo.xxx" packages from the package.json file and only add the following dependencies:
    "@grapecity/wijmo.angular2.all": "^5.20202.732"

    Delete the node_modules folder and install the dependencies.

    Regarding the row issue, can you please provide the HTML instead of the screenshot so that I can check with the same at my end and replicate the issue? You can even modify my sample according to your application so that it replicates your issue.

    ~regards

  • Replied 11 February 2021, 10:06 pm EST

    Hi Ashwin,

    Thank you.
    sure i will do.

    This is my code:


    <bento-toolbar class="bento-toolbar" [items]="toolbarData">
    <!-- BENTO TOOLBAR PROJECTED CONTENT -->
    <ul class="nav navbar-right" role="group">
    <li>
    <div class="bento-toolbar-info" [ngbTooltip]="toolbarConfig.toolbarInfo.tooltip">
    <span [innerHTML]="toolbarConfig.toolbarInfo.message"></span>
    <i
    *ngIf="toolbarConfig.toolbarInfo.icon"
    class="bento-toolbar-info-icon {{toolbarConfig.toolbarInfo.icon}}"
    ></i>
    </div>
    </li>
    <li *ngIf="!toolbarConfig.filterButtonHidden">
    <button
    class="btn btn-outline-primary btn-icon btn-toggle"
    [ngClass]="{'active':!toolbarConfig.filtersHidden}"
    [attr.aria-pressed]="!toolbarConfig.filtersHidden"
    (click)="toolbarConfig.toggleFilter()"
    placement="bottom"
    [ngbTooltip]="!toolbarConfig.filtersHidden ? 'Hide Filters':'Show Filters'"
    aria-label="toggle filters"
    >
    <i aria-hidden="true" class="bento-icon-filter-az"></i>
    </button>
    </li>
    <!-- <li *ngIf="!toolbarConfig.colVisButtonHidden">
    <div ngbDropdown>
    <button
    class="btn btn-outline-primary btn-icon btn-toggle dropdown-toggle"
    ngbDropdownToggle
    placement="bottom"
    ngbTooltip="Show / Hide Columns"
    >
    <i aria-hidden="true" class="bento-icon-cog"></i>
    <i aria-hidden="true" class="bento-icon-caret-down-filled"></i>
    </button>
    <div ngbDropdownMenu class="dropdown-menu grid-dropdown">
    <fieldset>
    <legend>Select columns to display</legend>
    <ul class="group-list">
    <li
    *ngFor="let item of (columnDefinitions | slice:columnDefinitions.length - 3); index as i;"
    class="dropdown-item"
    >
    <label [attr.for]="'my-base-toolbar-checkbox-'+i" class="grid-toolbar-checkbox-label">
    <bento-checkbox [(ngModel)]="item.visible" [attr.id]="'my-base-toolbar-checkbox-'+i"></bento-checkbox>
    {{item.header}}
    </label>
    </li>
    </ul>
    </fieldset>
    </div>
    </div>
    </li> -->
    </ul>
    </bento-toolbar>
    <!-- FLEXGRID GROUP PANEL -->
    <!-- <wj-group-panel
    *ngIf="!toolbarConfig.groupPanelHidden"
    [grid]="flexGrid"
    [hideGroupedColumns]="false"
    [placeholder]="'Drag columns here to create Groups'"
    ></wj-group-panel> -->
    <!-- FLEXGRID -->
    <wj-flex-grid class="custom-tree-grid" #grid [showMarquee]="true" [treeIndent]="0" (initialized)="initGrid(grid)"
    [childItemsPath]="'replies'" [(itemsSource)]="data">
    <wj-flex-grid-filter #filter></wj-flex-grid-filter>
    <wj-flex-grid-column header='' name="collapse" align="center" [width]="40" [isReadOnly]="true">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <!-- add expand/collapse buttons -->
    <button *ngIf="cell.row.hasChildren" class="wj-btn-glyph wj-elem-collapse expan-collaps-button-styles">
    <i
    class="grid-action-icon"
    [ngClass]="{'bento-icon-expand':cell.row.isCollapsed,'bento-icon-collapse':!cell.row.isCollapsed}"
    ></i>
    </button>
    <!-- <button *ngIf="cell.row.hasChildren" class="wj-btn wj-btn-glyph wj-elem-collapse"><span *ngIf="!cell.row.isCollapsed" class="fa fa-minus"></span><span class="fa fa-plus" *ngIf="cell.row.isCollapsed"></span></button> -->
    </ng-template>
    </wj-flex-grid-column>
    <!-- this is for adding checkbox -->
    <wj-flex-grid-column header='' align="center" [width]="40" [isReadOnly]="true">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    <bento-checkbox
    *ngIf="item.isEnableRow"
    [ngModel]="item.selected"
    (change)="item.disabled||(item.selected = !item.selected);onCheckBoxChange();"
    ></bento-checkbox>
    </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header='ID' align="center" [width]="40" [isReadOnly]="true">
    <!-- this is for displaying -->
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    {{getId(cell.row)}}
    </ng-template>
    </wj-flex-grid-column>
    <!-- <wj-flex-grid-column header="Actions" align="center" [width]="'*'" [isReadOnly]="true">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
    <button class="wj-btn wj-btn-glyph"><span class="fa fa-pencil"></span></button>
       
    <button class="wj-btn wj-btn-glyph"><span class="fa fa-trash"></span></button>
       
    <button class="wj-btn wj-btn-glyph">MORE <span class="fa fa-caret-down"></span></button>
    </ng-template>
    </wj-flex-grid-column> -->
    <wj-flex-grid-column header="Actions" align="center" [width]="'130'">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
    <div *ngIf="item.isEnableRow">
    <span
    class="bento-icon-edit grid-action-icon"
    (click)="action.editRow(item)"
    ngbTooltip="Edit"
    container="body"
    title="Edit"
    ></span>
    <span
    class="bento-icon-remove grid-action-icon reply-button"
    (click)="action.editRow(item)"
    ngbTooltip="Delete"
    container="body"
    title="Delete"
    ></span>
    <div ngbDropdown [container]="'body'" class="grid-dropdown">
    <button
    aria-label="Select more action"
    class="btn btn-outline-primary btn-xs dropdown-toggle reply-button"
    ngbDropdownToggle
    >
    MORE
    <i aria-hidden="true" class="bento-icon-caret-down-filled"></i>
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem class="dropdown-item" (click)="onDropdownClick('Dataset parameters')">
    Dataset parameters
    </button>
    <button ngbDropdownItem class="dropdown-item" (click)="onDropdownClick('Dataset state inclusions')">
    Dataset state inclusions
    </button>
    <button ngbDropdownItem class="dropdown-item" (click)="onDropdownClick('Journal entry profiles')">
    Journal entry profiles
    </button>
    </div>
    </div>
    </div>
    </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Note And Author" binding='note' [width]="'2*'">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <!-- template when a note is in view mode -->
    <ng-container *ngIf="!cell.item._isEditing">
    <p><b>{{cell.item.note}}</b></p>
    <div>{{getBaseText(cell.item)}}
    <button (click)="addNewNote(cell.item.replies)" class="wj-btn wj-btn-glphy wj-right button-styles">Reply</button>
    </div>
    </ng-container>
    <!-- template when reply is being add -->
    <ng-container *ngIf="cell.item._isEditing">
    <textarea #reply [(ngModel)]="currentReply" id="reply" style="width: 100%"></textarea>
    <div>
    <input type="checkbox" /> Notify List
    <button (click)="cancelRowAdding(cell.row)" class="wj-btn wj-btn-glphy wj-right button-styles reply-button">Cancel</button>
      
    <button (click)="commitRowAdding(cell.row)" class="wj-btn wj-btn-glphy wj-right button-styles">Ok</button>
    </div>
    </ng-container>
    </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Type" binding='type' [width]="'*'">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <!-- template for view mode -->
    <ng-container *ngIf="!cell.item._isEditing">
    <p><b>{{cell.item.type}}</b></p>
    <p>{{getBaseText(cell.item)}}</p>
    </ng-container>
    <!-- template when editing -->
    <ng-container *ngIf="cell.item._isEditing">
    <wj-combo-box #typeCb [(selectedValue)]="currentType" [itemsSource]="types"></wj-combo-box>
    </ng-container>
    </ng-template>
    </wj-flex-grid-column>
    <!-- for status -->
    <wj-flex-grid-column header="Status" binding='status' [width]="150"></wj-flex-grid-column>
    </wj-flex-grid>[b][/b]



    This is my html code

    Thanks & Regards.
  • Replied 14 February 2021, 9:55 pm EST

    Hi Ashwin,

    please check the height issue.

    Thanks & Regards,
    Tejaswi Kalyanam.
  • Replied 14 February 2021, 10:36 pm EST

    Hi Tejaswi,

    I am sorry but I was unable to replicate your issue with the provided HTML. It may be possible that some CSS is causing this issue.

    It would be easier for me to provide a solution for your issue if you are able to provide a sample that replicates your issue. You can modify the last sample that I provided according to your application so that this sample replicates your issue.

    ~regards
  • Replied 15 February 2021, 2:11 am EST

    Hi Ashwin,

    I did as you suggested but still i am getting same issue when i click the ok button the height should be increased infinity.

    can i send my total code?

    Thanks & Regards
    Tejaswi Kalyanam
    html code::
    check the above reply

    styles.css::::
    .note-button {
    height: 500px;
    }

    .wj-flexgrid {
    max-height: 500px;
    }

    .wj-content.wj-dropdown {
    height: 53%;
    }

    .wj-flexgrid.custom-tree-grid .fa {
    transform: scale(1.5);
    }

    .wj-flexgrid.custom-tree-grid button.wj-right {
    float: right;
    }

    .button-styles {
    margin-left: auto;
    width: 76px;
    border-radius: 4px;
    background-color: #606169;
    box-sizing: border-box;
    font-family: 'Knowledge2017 ', 'Knowledge2017', sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: normal;
    letter-spacing: 1.1px;
    }
    .wj-control .wj-btn:hover {
    background: #0e0d0d;
    }

    .expan-collaps-button-styles {
    border-style: none;
    font-size: 16px;
    background: white;
    }

    .ok-buttion-margin {
    margin-left: 56%;
    }

    .reply-button {
    margin-left:5px;
    }

    .input-margin {
    height: 32px;
    margin: 3px;
    }

    .notify-checkbox-styles {
    margin-left: 3px;
    margin-bottom: 3px;
    font-weight: 700;
    font-family: 'Knowledge2017-Bold', 'Knowledge2017 Bold', 'Knowledge2017', sans-serif;
    }

    .bento-flex-grid {
    max-height: 500px;
    }
    ::ng-deep .action-column:not(.wj-group) {
    padding-right: 10px !important;
    }
    ::ng-deep .action-column.disabled {
    pointer-events: none;
    }
    .bento-toolbar .bento-toolbar-info-icon {
    color: #387c2b;
    margin-left: 5px;
    cursor: pointer;
    font-size: 13px;
    display: inline-block;
    }
    ::ng-deep .bento-toolbar .bento-toolbar-info-saved {
    color: #387c2b;
    }
    .button-margin {
    margin-top: auto;
    }


    .notify-styles {
    margin-bottom: unset;
    }

    /* .wj-dropdown-panel {
    top:229px;
    }

    .wj-content {
    top:229px !important;
    } */
  • Replied 15 February 2021, 2:33 pm EST

    >>can i send my total code?

    Yes, you can send your complete working application if possible. If the sample contains some private information that cannot be shared publically, you can also create a new case in private forums here:

    https://www.grapecity.com/my-account/my-support/

    In the description of the case, add the link to this case along with a working application.

    In the meantime, I will try to replicate the issue by adding CSS as well.

    ~regards
  • Replied 15 February 2021, 6:05 pm EST

    Hi ashwin,

    import * as wjcCore from '@grapecity/wijmo';
    import * as wjcGrid from '@grapecity/wijmo.grid';
    import * as wjcGridFilter from '@grapecity/wijmo.grid.filter';
    import * as wjcInput from "@grapecity/wijmo.input";
    import * as wjGrid from "@grapecity/wijmo.grid";
    import { Selector } from "@grapecity/wijmo.grid.selector";

    import {Component, EventEmitter, Injectable, Input, OnInit, ViewChild} from '@angular/core';
    import {NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
    import { NotesServices } from '../services/notes.services';

    export interface Item {
    note: string;
    type: string;
    status: string;
    by: string;
    on: Date;
    replies?: Item[];
    _isEditing?: boolean;
    isEnableRow?: boolean;
    }

    @Component({
    selector: 'app-notes',
    templateUrl: './notes.component.html',
    styleUrls: ['./notes.component.css'],
    })
    export class NotesComponent implements OnInit {
    data: Item[];
    ngOnInit() {
    this.data = this.getData();
    }

    private getData(): Item[] {
    return [
    {
    note: "This is a note added todays",
    type: "General",
    status: "open",
    by: "Lee Ann",
    on: new Date(2020, 0, 22, 4, 5, 44),
    replies: [
    {
    note: "This is my reply to this very important noe",
    type: "General",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2020, 0, 22, 4, 9, 44),
    replies: []
    },
    {
    note: "Here is some important info",
    type: "General",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2021, 0, 14, 12, 46, 44),
    replies: []
    }
    ]
    },
    {
    note: "Reviewing workflow step1.",
    type: "General",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2021, 0, 14, 12, 47, 44),
    replies: [
    {
    note: "Nevermind I took another look",
    type: "General",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2021, 0, 14, 12, 49, 44),
    replies: []
    }
    ]
    },
    {
    note: "Make sure that Mike is in the office",
    type: "Events",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2021, 0, 14, 4, 5, 44)
    },
    {
    note: "Building purchages on 7/1/20",
    type: "Permanent",
    status: "open",
    by: "Abigail Adkison",
    on: new Date(2020, 0, 22, 4, 5, 44)
    }
    ];
    }

    @ViewChild('filter', {static: true}) gridFilter: wjcGridFilter.FlexGridFilter;

    // /**
    // * Event Handler for Actions Column Icons
    // */
    action: any = {
    editRow: msg => {
    //console.info('msg', msg, this.columnDefinitionsByBinding);
    }
    };

    toolbarConfig: any = {
    filterButtonHidden: false,
    filtersHidden: true,
    groupPanelHidden: true,
    toggleFilter: this.toggleFilter.bind(this),
    toolbarInfo: {
    message: ''
    },
    toggleGroupPanel: () => {
    this.toolbarConfig.groupPanelHidden = !this.toolbarConfig.groupPanelHidden;
    }
    };

    toolbarData: any[] = [
    {
    label: 'Add',
    icon: 'bento-icon-add',
    action: () => {
    console.info('add');
    let item = this.theGrid.collectionView ? this.theGrid.collectionView.items : [];
    this.addNewNote(item);
    }
    },
    {
    label: 'Set Status',
    icon: 'bento-icon-flag-filled grid-action-icon',
    disabled: true,
    action: () => {
    console.info('set status');
    }
    },
    {
    label: 'Delete',
    icon: 'bento-icon-remove',
    disabled: true,
    action: () => {
    console.info('delete');
    }
    }
    ];

    constructor(private notesServices: NotesServices) {
    }

    // /**
    // * toggle filter handler from Bento Toolbar
    // */
    toggleFilter() {
    this.toolbarConfig.filtersHidden = !this.toolbarConfig.filtersHidden;
    if (this.gridFilter) {
    // if filters are hidden, clear the grid filter
    if (this.toolbarConfig.filtersHidden) {
    this.gridFilter.clear();
    }
    // iterate through columns to filtered
    // for (let i = 0, il = this.columnDefinitions.length; i < il; i++) {
    // // get column and column filter
    // const col = this.gridFilter.grid.columns.getColumn(this.columnDefinitions[i].binding);
    // const cf: any = col ? this.gridFilter.getColumnFilter(col, true) : {};
    // // switch filterType to 0 if filters hidden, otherwise to filterType defined in model
    // cf.filterType = this.toolbarConfig.filtersHidden ? 0 : this.columnDefinitions[i].filterType;
    // }
    // refresh grid
    this.gridFilter.grid.refresh();
    }
    }


    // /**
    // * Event Handler for Multi-Select Column Cell Checkbox
    // */
    onCheckBoxChange() {

    }

    user = "Some User"; // the current user which is logged in
    @ViewChild("grid") theGrid: wjGrid.FlexGrid;
    currentReply = "";
    currentType = "";
    types = []; // all the types

    initGrid(grid: wjGrid.FlexGrid) {
    grid.rows.defaultSize = 40; // increase the row height
    let col = grid.columns.getColumn("selector");
    //new Selector(col); // add checkboxes for selecting
    }

    private getNewItem(): Item {
    // return a new item with default values
    return {
    note: "",
    type: "",
    by: this.user,
    on: new Date(),
    status: "",
    replies: [],
    _isEditing: true,
    isEnableRow: false
    };
    }

    addNewNote(item) {
    // get a new item
    let newItem = this.getNewItem();
    // check if top level row or child row
    // and get the data item accordinglly
    item.replies = item.replies ? item.replies : item;
    // add the new item
    item.push(newItem);
    // refresh the view
    if (this.theGrid.collectionView) {
    this.theGrid.collectionView.refresh();
    }
    }

    cancelRowAdding(row: wjGrid.GroupRow) {
    const view = row.grid.collectionView;
    // get the parent row
    let parentRow = this.getParentRow(row);
    let item = row.dataItem;
    // get parent item
    let parentItem = parentRow
    ? parentRow.dataItem.replies
    : view.sourceCollection;
    // get the index of the newly added item
    let idx = this.getSourceIndex(parentItem, item);
    // remove the item
    parentItem.splice(idx, 1);
    // refresh the view
    view.refresh();
    }

    commitRowAdding(row: wjGrid.GroupRow) {
    // get the current editing item
    let item = row.dataItem;
    // update values
    item.note = this.currentReply;
    item.type = this.currentType;
    item._isEditing = false;
    item.status = "open";
    item.isEnableRow = true;
    // refresh the view
    row.grid.collectionView.refresh();
    }

    getBaseText(item: Item) {
    // get the text to display author and time
    return `By ${item.by} on ${wjcCore.Globalize.formatDate(
    item.on,
    "M/d/yyyy"
    )} ${wjcCore.Globalize.formatDate(item.on, "HH:mm:ss")}`;
    }

    getId(row: wjGrid.GroupRow) {
    // calculate id for each row
    let val = this.getSubIds(row);
    return val;
    }

    private getSubIds(row: wjGrid.GroupRow) {
    const grid = row.grid;
    if (!grid) {
    return "";
    }
    // get the parent row
    let parentRow = this.getParentRow(row);
    let parentItem,
    str = "";
    // if parent row is not present
    // return the top-level id
    if (!parentRow) {
    parentItem = grid.collectionView.items;
    return (this.getSourceIndex(parentItem, row.dataItem) + 1).toString();
    } else {
    parentItem = parentRow.dataItem;
    }
    // else add a period (.) and append with parent
    str =
    this.getSubIds(parentRow) +
    "." +
    (this.getSourceIndex(parentItem, row.dataItem) + 1);
    return str;
    }

    private getSourceIndex(parentItem, item) {
    // find the index of item in the parent item
    return parentItem.replies
    ? parentItem.replies.indexOf(item)
    : parentItem.indexOf(item);
    }

    getParentRow(row: wjGrid.GroupRow) {
    // iterate the previous rows
    // to get the parent row
    const grid = row.grid;
    let rowIdx = row.level;
    for (let r = row.index - 1; r >= 0; r--) {
    let currentRow = grid.rows[r] as wjGrid.GroupRow;
    if (currentRow.level < rowIdx) {
    return currentRow;
    }
    }
    }
    }


    This is .ts file code
    and already i have send to you html and css code please check once above discussion.

    please check once the height issue.

    Thanks & Regards
    Tejaswi Kalyanam.
  • Replied 16 February 2021, 5:37 pm EST

    Hi Tejaswsi,

    Sorry for the delayed response. So, I copied your HTML, CSS, and TS file in the original sample and I also installed the same version you are using but still not facing the same issue. Here is an updated sample for reference:

    https://stackblitz.com/edit/angular-9-0-0-rc-1-bmrdqy

    From the code snippet, I observed that you are using bento checkbox and icons. Can you please try to remove <bento-checkbox> and other bento CSS classes like bento-icon-edit and check if this issue still exists?

    Also, if possible, can you please provide a complete working sample that replicates your issue? It would be a lot easier for me to investigate your issue and provide a solution.

    ~regards
  • Replied 16 February 2021, 11:18 pm EST

    Hi Ashwin,

    i am using same code for you suggested code link

    [https://stackblitz.com/edit/angular-9-0-0-rc-1-fdfnnd?file=src%2Fapp%2Fapp.component.ts]

    please observe screens










    Please observe 3rd and 4th screens.

    In my side the height issue is replicated.
    I am not using any bento related things, i have removed all the css also but still i am getting same issue,

    please suggest best way to resolve this issue .

    Thanks and Regards,
    Tejaswi Klaynam.
  • Replied 17 February 2021, 6:44 pm EST

    It seems that there is some error thrown in your console while adding a new row. Can you please share the screenshot of this error?

    ~regards
  • Replied 17 February 2021, 8:27 pm EST

    Hi Ashwin,

    Please check the error screen

    Thanks
  • Replied 17 February 2021, 10:38 pm EST

    Hi,

    In the Actions column, you have set the width to '130'. Please try removing the single quotes from this:
    <wj-flex-grid-column header="Actions" align="center" [width]="130"></wj-flex-grid-column>


    ~regards
Need extra support?

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

Learn More

Forum Channels