Hi,

We have table with add new row button. As we know there are 2 ways of adding blank row.

1. Inserting into the local variable(source of table) using Listinsert and ajax refresh.

2. Inserting into the table widget using Listinsert.


Both of these are server actions and we see a delay of 2 sec whenever add button is clicked to add a new blank row. 

Is there any alternate way to add a new blank row without server call in the client side only?


Hi,

You can use Editable Table, as it does this for you, even if you still need to call the server, or the new line will not be available.

So, first, I would investigate why there is a lag so big, checking if it is a network problem, a server overloaded, a problem in the logic, etc.

Don't think there is anything ready to do this completely client side. If you want to try, you must remember that you will need some considerable JavaScript logic and a way to store this information in the page and send it to the server at the end. Doable, but I don't recommend.

Cheers

Hi Eduardo,

Thanks for the reply..

In order to improve the performance and avoid server action call which is making the application slow especially in IE browser, we do not see any alternate other than JavaScript. So we are planning to add new rows in the table using JavaScript/ jQuery.

Could you please let us know if you have encountered or see any pit falls in this approach of JS.
Also it would be great if you could share some key pointers or a sample to refer. 


Thanks!


Hello Yakshith

I'll stress again the importance of understanding why your code has a poor performance.
You are trying to solve a problem you are not sure what is the cause, and this is leading you to use an approach that is very bad.

Trying to add records to a Table Records, is problematic, as the server will NOT be aware of those lines. This will create all sorts of potential errors in your application and will increase the complexity to maintain it. This is very bad.

OutSystems has a widget that does this, that is called Editable Table, but even they do not do everything client side. And this widget is a "mammoth" and have a lot of problems.

I highly recommend you to not go this approach.
Try to find something in the Forge, at least, that could help you.

Cheers.

Eduardo Jauch wrote:

Hello Yakshith

I'll stress again the importance of understanding why your code has a poor performance.
You are trying to solve a problem you are not sure what is the cause, and this is leading you to use an approach that is very bad.

Trying to add records to a Table Records, is problematic, as the server will NOT be aware of those lines. This will create all sorts of potential errors in your application and will increase the complexity to maintain it. This is very bad.

OutSystems has a widget that does this, that is called Editable Table, but even they do not do everything client side. And this widget is a "mammoth" and have a lot of problems.

I highly recommend you to not go this approach.
Try to find something in the Forge, at least, that could help you.

Cheers.

Yes better use editable table and instead of adding the data directly to entity insert it to list  variable as Yakshith Ishawara mentioned  'Point 1'.

Best approach would be : press button, show popup with input fields, on save go to server and save the new line in the table, and do ajax refresh of the table. Editable tables are a huge load on your server, and I think that also in the viewstate (which is sent back to the server each time) it will be included so it will be a bigger load on your server/browser/network traffic. As Eduardo already stated (and he is a very smart guy, go with his advice!) the thing is huge and has issues, these kind of things look nice to the user bad is bad practice most of the time. Use it sparsely, and always with very limited tables. Like an hours input program, that's nice if you can use a grid to enter your hour data, but most of the time it's only one week or one month, not an endless list.. 

Regards,

Wim 

Thanks for all the suggestions.


@Eduardo Jauch,

"I'll stress again the importance of understanding why your code has a poor performance."

We see the delay in UI binding in Internet Explorer only. Add button has insert blank row into local variable using list insert then ajax refresh table. In chrome we do not see any delay or lag.

Can we make use of any jQuery table Plugin like jqGrid, Handsontable, Data tables into web blocks and use them in place of editable table widget.

Any thoughts?


Cheers!



Hi Yakshith

Don't use Internet Explorer? (It is a huge security risk by itself...)

Jokes apart (but I was serious...), you need to understand why in Internet Explorer this is slow.
Are there any errors in console, because of JavaScript, for example?

I would use the advice that was already given and NOT update the entire Table. If you are just adding an empty row to the Table Records (Is it a Table Records/List Records?), I would simply use a ListAppend in the Table Records List. This would do a simple Ajax Refresh in the line, no Table being reconstructed here.

But the reason I am asking you to understand the problem in Explorer is that this behaviour is NOT normal. So, your code has something that is possibly incompatible with Explorer, and the server by itself has nothing to do with it, most likely.

I would avoid completely using anything "not OutSystems", as you would be defeating the power OutSystems brings to you, increasing code complexity and maintenance costs.

Cheers