Adding new row at the top in gridview whenever new row is inserted in database table at client side without refreshing whole page

Question

I've one grid view which shows the current orders to supplier with the latest order at the top. Whenever customer places any order for that supplier, that order should be shown in the supplier grid view. For that I am refreshing the supplier order page every one minute so that the grid view get updated and will show the new orders if any. But it will be rare that at every one minute a new order will be placed, so it makes no sense for me to refresh whole page every one minute. The only reason that I've given refresh interval of 1min is that it is necessary to display the orders to the suppliers as soon as they placed by customers.

What I want to do is that whenever a new row is inserted in my order table in db for particular supplier, I want to add the new row at the top to the grid view at client side with some animatio**n like masking that row with some colored overlay which fade out in some time. And this should be done **without refreshing the whole page.

I am not able to figure out how should I add new row to grid view whenever new row added to db without refreshing whole page.

Answer 1

You can probably use the update-method you are using for your page today, but then use a javascript solution to update only part of the page.

Take a look a these questions and answers for example, the should point you in the right direction even if they may not be a perfect fit for your problem:

Rebind gridview using AJAX (without post back)

update datagridview using ajax in my asp.net without refreshing the page.(Display real time data)

Answer 2

You may try Nodejs and Socket to send/broadcast the message to clients every times successfully updated the table