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.
Wijmo Flex Grid Table
Posted by: tejaswi.kalyanam on 28 January 2021, 6:34 pm EST
-
tejaswi.kalyanam
-
ashwin.saxena
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 -
tejaswi.kalyanam
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. -
ashwin.saxena
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
-
tejaswi.kalyanam
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.
-
ashwin.saxena
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 -
ashwin.saxena
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 -
tejaswi.kalyanam
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. -
ashwin.saxena
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 -
tejaswi.kalyanam
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
-
tejaswi.kalyanam
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
-
ashwin.saxena
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
-
tejaswi.kalyanam
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. -
tejaswi.kalyanam
Replied 14 February 2021, 9:55 pm EST
Hi Ashwin,
please check the height issue.
Thanks & Regards,
Tejaswi Kalyanam. -
ashwin.saxena
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 -
tejaswi.kalyanam
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;
} */ -
ashwin.saxena
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 -
tejaswi.kalyanam
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. -
ashwin.saxena
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 -
tejaswi.kalyanam
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. -
ashwin.saxena
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 -
tejaswi.kalyanam
Replied 17 February 2021, 8:27 pm EST
Hi Ashwin,
Please check the error screen
Thanks
-
ashwin.saxena
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
