Everpresent row not displayed when virtualmode is enabled

[trandmaParticipant]

Both features – virtualmode and everpresent row work separately but not together.

1. In virtual mode, our pagination, filtering and sorting logic works correctly. However the everpresent row for entering new data is not displayed correctly – instead a single long row in light yellow color is displayed without any inputs. No error messages in console.

2. When virtual mode is set to “false”, the ever present row is correctly rendered and the inputs work as expected, but obviously we cannot use server side pagination nor filtering.

I am wondering if this is a known feature / bug or should I file a new report?

[HristoParticipant]

Hello trandma,

Could you clarify it? How do you add new rows?
It will be better if you use the additional column with add, update, delete, reset options.
Please, take a look at this example:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-everpresentrowwithcolumns.htm

I would like to suggest to you if you do not use addrow, deleterow and updaterow callbacks in the DataAdapter’s source.
There you should add the relevant logic – communication with the server.
You could find how to use them: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?light
(It is a plain JavaScript code but you could try to use this approach)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[trandmaParticipant]

I add new rows using the everpresentrow as described:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-addnewrow.htm
The row has widgets for inputting dates and there are some other costomizations. When ENTER is pressed on the everpresentrow or the add button is pressed, the source.addrow function gets executed where I do a call to the server side, ending it with commit(true).

There are no problems with actually entering new rows, that part of the functionality works. The problem is that when I set the flag ‘virtualmode’ to ‘true’, then the everpresentrow is not displayed normally. It is not possible to enter any data in it as it is just one large div with the everpresentrow background color.

I have tried it with vanilla Javascript and it seems to work correctly – no problems there. Unfortunately I have not been able to create a small online testcase for angular as I am yet to find an environment that supports angular6 project structure and also tsconfig.json file changes as required by jqwidgets.

The problem is somehow related to the initialization process not being complete when the everpresentrow creation is requested. I found a workaround to my problem:
1. I initialize the grid with options.showeverpresentrow = false
2. In the function source.beforeprocessing i do: options.showeverpresentrow = true; myGrid.setOptions(options);

As a result the grid initializes without the everpresent row and once it is intialized, I change the configuration to show the everpresentrow and the grid is updated correctly. The row functions normally from that point on. There is just some order problem when loading the grid initially.

[trandmaParticipant]

There is another issue related to everpresentrow in virtualmode. When the grid is first initialized, the everpresent row works correctly. However when the user changes the page size, subsequent source.addrow() calls triggered by the everpresent row cannot be processed because the source.addrow() function is not called with correct parameters. The rowid is filled in but the rowdata parameter contains empty values for all fields even though the fields in the ever present row are filled in.

A similar workaround as mentioned above can be used here as well. It is possible to listen to pagesize change events and reinitialize the ever present row after which it will work correctly:

pagesizechanged(event){
    this.myGrid.updatebounddata();
    this.options.showeverpresentrow = false;
    this.myGrid.setOptions(this.options);
    this.options.showeverpresentrow = true;
    this.myGrid.setOptions(this.options);
}

I have not found an easy way to get the everpresentrow field values from the source.addrow() function so that I wouldn’t have to reinitialize the widget. If there is such a way, I’d love to know.

[trandmaParticipant]

I need to update my above mentioned workaround. Switching everpresentrow on-and-off in the pagesizechanged event listener worked only under some situations. Eventually I needed to just switch off the everpresentrow every time when I loaded data from the servers and back on afterwards. It is not pretty but here’s the trimmed down solution. Hope it will help someone

loadServerData: function (serverdata, source, callback) {
    self.jgxGridDataService.getData(serverdata).subscribe(
        resp => {
            let headerNameCount = resp.headers.keys().find(key => key.toLowerCase() === 'x-total-count');
            let count = resp.headers.get(headerNameCount);
            let body = resp.body;
            self.effectiveConf.options.showeverpresentrow = false;
            self.myGrid.setOptions(self.effectiveConf.options);
            callback({ records: body, totalrecords: count });
            self.effectiveConf.options.showeverpresentrow = self.incomingConf.options.showeverpresentrow;
            self.myGrid.setOptions(self.effectiveConf.options);
        },
        error => {
            self.errorNotification.open();
            callback({ records: [], totalrecords: 0 });
        });
}

[MartinParticipant]

Hello trandma,

Thank you a lot about your detailed and comprehensive explanation of these workarounds you have found.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[trandmaParticipant]

The workaround I tried earlier led to other problems. I am taking another stab at trying to get virtualmode and everpresentrow working with minimal code. I took this example as base and just added everpresentrow configuration. Unfortunately the everpresentrow is correctly rendered only if virtualmode is turned off. When virtualmode is TRUE, the entire everpresentrow is just one long yellow line.

I have created an example project which demonstrates the problem. The difference from the above linked example is just that this project is based on Angular CLI and the JqxGrid component is initialized programmatically, not from Angular template automatically (shouldn’t really matter as the grid gets started up fine – just the ever present row is bugged).

https://drive.google.com/open?id=1OUbhGxc2w6TnKJGr0XxYB679hr5kd1Je

Could you please comment if everpresentrow and virtualmode should be working together and if you have any advice for me on how to get it to work.

Thank you

[Peter StoevKeymaster]

Hi trendma,

This is an issue which we confirm and will resolve it in a future version of jQWidgets. We have a work item about it. When we resolve it, the information about it will be publish in our Release Notes page.

Thank you again for the detailed information and feedback.

Regards,
Peter

[Author]

Posts