server side add row in-line grid

[notedopParticipant]

Hi,

in the examples for CRUD operations using server side processing (like the PHP one here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-crud.htm) it seems that the add button always first calls a generateRow function which then generates the row data and then creates the actual row by calling addRow using the generated data.

This implies that instead of the generateRow function, i’d need some form that allows a user to key-enter the new rowdata. However i don’t want to use some pop-up form; i want the user to be able to click the Add button, a new row is made visible in the grid and user can edit the rowdata within the gridrow and ONLY upon exit, it’s send to server side using the addrow function.

Do you have any guidance on achieving that?

regards,
Notedop

[notedopParticipant]

I have a partially working solution.

I do NOT define an AddRow function
I create a add row button with the following handler:

        addButton.click(function (event) {
          _this.add_row_index++;
          let add_id = 'noid' + _this.add_row_index;
          //always go to first page. When trying to add while being on antother page, exception is thrown.
          container.jqxGrid('gotopage', 0);
          container.jqxGrid('addrow', add_id, {}, 'first');
          // //select the row
          let boundIndex = container.jqxGrid('getrowboundindexbyid', add_id);
          container.jqxGrid('selectrow', boundIndex);
          container.jqxGrid('ensurerowvisible', boundIndex);
          container.jqxGrid('beginrowedit', boundIndex);
        });

and then I define a editrow function which handles the communication to the server. So the editRow function is handling both new and existing rows.

Now this works fine when there is already data on the grid, however when the grid is completely empty (no records) and I am adding the first record to the grid, then the row appears and then immediately dissapears. If there are already records available, then it’s not an issue.

I have reproduced this issue here:

No data – Not working:
https://jsfiddle.net/notedop/7nmLo5ds/59/

When you click the + sign to add records, you can see that the grid count is increasing each time, but there are no editable/empty rows visible.

On the following fiddle you see the behaviour when the grid does have records. The new record is added and is editable as expected.

Data – Working:
https://jsfiddle.net/notedop/7nmLo5ds/61/

[svetoslav_borislavovParticipant]

Hi,

Remove the virtualmode and rendergridrows and everything should work.
If you have additional questions do not hesitate to contact us!

Best regards,
Svetoslav Borislavov
jQWidgets Team

[notedopParticipant]

Well… the virtualmode is there for a reason. It allows me to do server side pagination, atleast that’s my understanding. I’ll have to have a look at renderGridRows and what it does when there’s no data. My guess is that i’d need to create array object with a single record that represents the new row and that should fix it as well, theoratically. I’ll come back on this after diner

[notedopParticipant]

ok, so rendergridrows is never called when adding the first row, so problem is not there.

I got it working with virtualmode = false and removing the rendergridrows, but then my server side pagination is broken (and probably search as well). And i’m not happy with having to implement server side paginanating manually while the grid is already supporting that.

Is there any other option which allows virtualmode=true? Else I’d suggest to consider this as a defect, because I do not see an obvious reason why we would not be able to add a new row to an empty grid when using virtualmode.

[svetoslav_borislavovParticipant]

Hi,

Sorry, this feature is currently not supported.
If you need further help, please let us know!

Best regards,
Svetoslav Borislavov
jQWidgets Team

[notedopParticipant]

ok… with this feature is not supported, you mean adding rows to an empty grid when in virtual mode is not supported? Or adding rows in general in virtual mode is not supported (or partially supported)

I also noticed that when in virtualmode, when being on a page which is not the first page and then adding a row, i’m getting an error in the consol. So i first need to move to the first page and then it allows me to add a row.

Anyhow, i have been able to get it kind of working, but it’s not ideal. I’m switching between virtualmode false/true depending on the record count versus the pagesize. If the total record count is below pagesize, i disable virtual mode. Unfortuantely this means that updatebounddata needs to be triggered, causing an extra call to the back-end, and UI needs to wait for that to complete. As soon as the total record count moves above the pagesize, then I enable virtual mode, which again requires a call to updatebounddata.

Currently after the switching of virtual mode, the first click on the addrow button will fail, but next and remaining will succeed, making it a non-ideal solution. If anyone else has some other ideas to make this better, then please do help

        // add new row.
        addButton.click(function (event) {

          let dataInfo = container.jqxGrid('getdatainformation');
          //check if the total records on the grid is less than the pagesize and if virtualmode is enabled.
          //If so, disable virtual mode else enable virtual mode
          let toggled = false;
          if (dataInfo.rowscount < dataInfo.paginginformation.pagesize && container.jqxGrid('virtualmode')) {
            toggleVirtualMode(container, false);
            toggled = true;
          } else if (dataInfo.rowscount === dataInfo.paginginformation.pagesize && !container.jqxGrid('virtualmode')) {
            toggleVirtualMode(container, true);
            toggled = true;
          }

          let addrow = function () {
            _this.add_row_index++;
            let add_id = 'noid' + _this.add_row_index;
            //always go to first page. When trying to add while being on antother page, exception is thrown.
             //todo: check which page we're on and only go if not first. and wait for page to be loaded before adding.
            container.jqxGrid('gotopage', 0);
            container.jqxGrid('addrow', add_id, {}, 'first');
            // //select the row
            let boundIndex = container.jqxGrid('getrowboundindexbyid', add_id);
            container.jqxGrid('selectrow', boundIndex);
            container.jqxGrid('ensurerowvisible', boundIndex);
            container.jqxGrid('beginrowedit', boundIndex);
          }

          //if we toggled the virtualmode, then databinding must complete before adding row
          //so we wait until the binding is completed, in a non-blocking manner and once completed
          //we add the row.
          if (toggled) {
            function wait() {
              if (!container.jqxGrid('isBindingCompleted')) {
                console.log(".");
                setTimeout(wait, 100);
              } else {
                addrow();
              }
            }
            wait();
          } else {
            addrow();
          }

        });

[svetoslav_borislavovParticipant]

Hi,

I meant that adding new rows in a virtual mode with pagination is not supported.
If we can help you with anything else, let us know! We will be happy to help!

Best regards,
Svetoslav Borislavov
jQWidgets Team

[Author]

Posts