[Solved] adding a new Row with Ajax

[Alexandre Jobin]

hi!

heres the scenario:
I have a grid that shows elements already in the database. The user can click on a button on the row to disable the item and he can add a new item to the grid by clicking on a Add button. Every actions he make on the grid is not yet saved on the database. The user MUST click on the save button if he want every changes to be saved.

heres what i need to do:

i have a grid and is not in Ajax mode (maybe i can do it in Ajax mode... im not sure).
The rows of the grid have column who use a Template and the template call a partial view.
I have a button to add a new item to the grid.
When we click the Add button, i would like to generate a new Row and add it to the grid.

In my opinion, the easiest way would be to call a server function via Ajax to generate this Row with his Template and return the HTML code generated and push it to the grid on client side. Is there a way to do this or do you have an idea of who i can do this?

i have attached a screenshot to show the grid

heres the code to generate the grid

Html.Telerik().Grid<SDR.Web.Controllers.Requisitions.ViewModels.AbonnementGridViewModel>(Model.Abonnements)
  .Name("Abonnements")
  .DataKeys(keys => keys.Add(c => c.AbonnementId))
  .Columns(column =>
  {
    column.Bound(a => a.Abonnement).Title("Abonnement");
    column.Bound(a => a.Categorie).Title("Catégorie");
    column.Bound(a => a.Fournisseur).Title("Fournisseur");
    column.Bound(a => a.Cout).Title("Coût").Format("{0:C}");
    column.Template(a =>
      {
        Html.RenderPartial("AbonnementHiddenColumnData", a);
      }).Width(0);
    column.Command(c => c.Select());
  })