what is the best way to sync grid and form data ?

Webix JS
#1

Hello everyone,

I have a large data set that needs to be inserted in a grid row by row, because I cant show all data in the gird at once and I don’t want any horizontal scrolling I decided to split my view into a grid and a form.User can insert initial data when adding a new row then fill the rest of data in the form,something like this,

http://webix.com/snippet/9843c6ac

Now I know by binding the form with the grid each time I select a new row data from the grid appear on the form but my problem is saving changes on the form to the corresponding selected row, I have tried many solutions none of them seem to completely work I tried :

  • setting the record data each time one of the form fields changes, by attaching on change event then updating the selected row after the change is done. The problem in this option that the change event is triggered each time row selection is changed in this case I don’t need the event itself, I only want to detect changes from user and reflect them on on the grid which is my final data sort as I extract all the data from grid and send it at once to the server

  • a second option which I later found is form.save(), which saves the changes on the form to grid but I am having trouble deciding when and where to call this function ! another problem in this choice that when I call form.save it cancels the save operation f the form is not valid - because of at least one input- which means it clears the form and save already correct values to the grid

One last thing I always want to detect the change done to a row whether the source of change is the editing a cell or the form as I need to mark the row with a red color so my solution has include this requirement

Any suggestions, help is highly appreciated

Thank you.

#2

Hi,

The recommended way is to push the bound data with the .save() method. You can call it when form is changed by user. The form then issues the onChange event while setting form values by clicking on datatable rows will not trigger this event. So this is the way to differentiate between “datatable” and user actions: http://webix.com/snippet/85becdd4

If .save() is not suitable - yes, it validates the form before saving! - you can collect form values and update the datatable row manually.

As to the differentiation between the editing within form and datatable, you can return some flag value like $formEdited among form values and remove it from row properties when user starts editing the datatable (e.g onBeforeEditStart) event.

#3

Thank You Helga for your post, it really helped me fix some issues, here is what I’ve decided to do - in case other users faced a similar problems - :

  • I attached the onChange event on the form itself not on specific elements, this way whenever the user changes the selected row onChange event wont be called.

  • As the requirement is to save form even if the validation fails I call the form.save() whenever validation is successful and collect form values and set
    row properties whenever it fails

#4

Hi Helga

what ever your discussing that topic above i want need one help on that,

I have given (refresh) button in toolbar, if we click that refresh button, the entire datatable want to be refresh.

can you provide me one idea on that

Thanks in advance
Deepak