Forums Home / Wijmo / General Discussion
Posted by: pmithilesh on 13 September 2019, 11:19 am EST
pmithilesh
Posted 13 September 2019, 11:19 am EST
Hi,
I have grid with 2000 to 5000 rows with lots of templates and editable fields inside the grid works fine.But when i scroll up and down for few seconds i can not click filters and i have few pop up open on button click inside cells which gets stuck to for few seconds
after 5 6 seconds filter open same thing with those pop up.
for that 6 to 7 seconds application feels like crashed to client
any help appreciated
pmithilesh
Posted 13 September 2019, 1:11 pm EST
**** we are using angular 6
pmithilesh
Posted 14 September 2019, 1:56 pm EST
In the mean while i dig little deeper and realized when we have lots of inline control like text box drop down check box thats where virtualization process kicks off and it create and destroys the cells when we scroll too quickly up and down but thats how our client use the application.i have to wait for those rows to load again is there a ways i can say that when scrolling is done and updatedView is finished till that i would like to put some kind of spinner .
This is very urgent need for our client and we been using wijmo from last 3 years in production any help is really appreciated
Thanks
ashwin.saxena
Posted 15 September 2019, 5:51 pm EST
Hi,
There are a few customizations that you can do in order to improve the performance of the FlexGrid:
Also, could you please provide us with a sample so that we can investigate further?
Regards,
Ashwin
pmithilesh
Posted 16 September 2019, 3:02 am EST
Hi Ashwin,
Thanks for the reply
we already have the height and width set up as fixed size its running under angular prod mode
This is the code snippet we got almost 18 columns with template like that every thing works well but when i scroll down to fast like 100 records it take time to upload the filter and kind of stuck for 4 to 5 seconds
<wj-flex-grid #flex [itemsSource]=“attributes”
[allowAddNew]=“!disabled”
[allowDelete]=“!disabled”
[selectionMode]=“‘RowRange’”
style=“height:350px;border-radius: 0 !important; width:90%”
class=“partsADGrid”
(beginningEdit)=“editStarting($event)”
(cellEditEnded)=“cellEditEndedHandler($event,flex)”
(deletingRow)=“deletingRow($event,flex)”
(initialized)=“initialized(flex, e)”
(pasted)=“onPasted($event);baseGridPaste($event)”
(copied)=“onCopied($event)”
(scrollPositionChanged)=“scrollPositionChanged($event,flex)”
(loadedRows)=“loadedRows($event,flex)”>
<wj-flex-grid-filter #filter (filterChanged)="filterChanged()"></wj-flex-grid-filter> <wj-flex-grid-column header="*Attribute Name" binding="attributeName" [width]="150" [isReadOnly]="disabled"> <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item"> <input #txtAttributeName (keyup)="eventHandlerText($event,item,'attributeName');checkForBuildNameError(item);checkForGreenText(item,'attributeName')" title={{item.errorValue}} type="text" style="color:black" name="txtAttributeNamen" [(ngModel)]="item.attributeName" [ngClass]="{'changed-data': item.attributeNameChangedValue===true && !item.isError}" [maxlength]="50" [disabled]="disabled || item.attributeSystem || item.attributeAccess==='R'" /> </ng-template> </wj-flex-grid-column>
ashwin.saxena
Posted 16 September 2019, 7:21 pm EST
Hi,
I tried to replicate the issue using my own sample but was not able to do so. Please refer to the attached sample. Could you please update this sample accordingly so that it replicates the issue so that I can investigate further?
~regards
pmithilesh
Posted 17 September 2019, 12:09 am EST
Hi Ashwin,
Will try to send you the code as i have to create data for the same
Thanks
pmithilesh
Posted 17 September 2019, 9:31 am EST
Hi Ashwin,
I got latest Version of wijmo today from our subscription and i think it solved most of the issue related to scroll bar.
i have last issue when i try to package the wijmo wijmo.input.ts file has import { keyword } from ‘css-tree’; and when try to run webpack it says ERROR in [at-loader] ./node_modules/wijmo/wijmo.input.ts:23:25
TS2307: Cannot find module ‘css-tree’. please let me know
Appreciate you help
Thanks
sharad.tomer
Posted 17 September 2019, 6:30 pm EST
Hi Mithilesh,
From the error, it seems that you are compiling the Wijmo source ts files. Could you please let us know if there is any specific reason for that, if not, then please exclude the Wijmo source ts files from compilation step and use the already compiled js files and that should fix the issue.
Regards
Sharad
pmithilesh
Posted 19 September 2019, 1:15 pm EST - Updated 3 October 2022, 10:02 am EST
Thanks Sharad that solution worked .
I have one issue on row css Style i have applied the css to row to be grayed out
row.isReadOnly = true;
row.cssClass = ‘row-disable-readonly’
but its only showing for alternate rows as shown in image i was expecting it to be applied to all rows
manish.gupta
Posted 19 September 2019, 2:12 pm EST
Hi,
The reason is that the wj-alt class with background #f7f7f7 gets priority and applies and causes to showing the applied CSS for alternate rows.
In this case, you may add !important to CSS class properties to apply correctly. Please refer to the following demo sample for reference.
https://stackblitz.com/edit/angular-o8bkah?file=src/app/app.component.html
Hope it helps!
Regards,
Manish Gupta
pmithilesh
Posted 10 October 2019, 3:18 pm EST - Updated 3 October 2022, 10:02 am EST
Hi Manish ,
Thanks for the solution it worked
I have one more issue i have grid with buttons inside them when i use the boostrap small buttons there is lot of space visible in cell and button does not expand as i expand the column width
Can you please guide me how i can have button which will take while cell width and height ?
and as i increase the width how i can expand the button.
Is there a ways on touch screen to show the scroll bar?
Thanks
ashwin.saxena
Posted 10 October 2019, 3:41 pm EST
Hi,
To make the button take all the space in a cell, you may simply set its width and height CSS property to 100%. Please refer to the code snippet and the sample below:
.wj-cell button {
width: 100%;
height: 100%
}
https://stackblitz.com/edit/angular-cqtaus
~regards
pmithilesh
Posted 11 October 2019, 12:56 am EST
Thanks Ashwin that works
How i can get that white space removed around the buttons and stick it to the cell border?
Thanks
pmithilesh
Posted 12 October 2019, 2:07 pm EST - Updated 3 October 2022, 10:03 am EST
Hi,
I have few columns which has buttons inside with out header name. but i wan merge header and give the name like “Action” is it possible shown in yellow in image 
ashwin.saxena
Posted 13 October 2019, 3:01 pm EST
Hi,
Regarding removing whitespace from cell:
You will need to handle the formatItem event of FlexGrid and set the padding of the cell to 1px.
Regarding merging of headers:
You may simply set the header of each column to ‘Actions’ and then use the allowMerging property to merge these headers.
Please refer to the sample below that demonstrates both of the behaviors:
https://stackblitz.com/edit/angular-hdeqqs
~regards
pmithilesh
Posted 14 October 2019, 12:31 pm EST
Thank you so much Ashwin that was the perfect solution.
pmithilesh
Posted 14 October 2019, 12:33 pm EST - Updated 3 October 2022, 10:03 am EST
Having one more issue I am using <wj-input-time [(value)]=“time”
[format]=“‘hh:mm tt’”
[isEditable]=“false”
[step]=“15”>
I am using the touch screen for this control and user tap on this control and it goes inside the control with cursor can i open the drop down as user click on the control ?
pmithilesh
Posted 14 October 2019, 12:40 pm EST
I think i got the answer (gotFocus) should open the drop down
Thanks
ashwin.saxena
Posted 14 October 2019, 2:09 pm EST
Hi,
It seems like that your issue is resolved. Let me know if you have any additional queries.
~regards
