Using a custom window with ajax form to add new grid row

[Gunnar]

In short I have replicated the following example:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form

And it works just fine. Only difference is the new row is added in it's correct spot in the grid, and not on the top as per usual. How can I, using the example linked to, place the new row on the top?

 

[Preslav]

Hi Gunnar,

In the example, to add a record to the start of the list, change the following lines in the "OrdersBinderHelper.cs":

public static void AddOrder(OrderViewModel order)
{
    var list = RetrunListOfOrders().ToList();
    //list.Add(order);
    list.Insert(0, order);

    WriteListOfOrders(list);
}

I hope this helps.


Regards,
Preslav
Progress Telerik

[Gunnar]

Thank you for your reply. If I understand your answer correctly, that places the new element as the first item when saving to the data source.

When using the built in "create" function in a grid, the new element is saved as per usual, but it is inserted as the first in the grid in DOM. So when you refresh the grid the new row is in the correct order, meaning it might not be the first depending on sorting. This is the feature I was trying to replicate.

[Preslav]

Hi Gunnar,

You are correct, indeed, the place of the element depends on where it is in the data source.

If you have any other questions, do not hesitate to write back.


Regards,
Preslav
Progress Telerik

[Gunnar]

Yes that much I do know. Look at this doc example:
https://demos.telerik.com/aspnet-mvc/grid/editing-popup

When you click create, the new row is added to the top of the grid, regardless of ordering. It stays there until the datasource is refreshed.

Using the example given in the link in my original post, the new row is NOT added to the top of the grid, like in the example given in this post. As I understand how the grid works, the data gets sent to the server, and the new row is added to the grid in the DOM. So when the grid refreshes everything is retrieved as per normal including the new row. And this is the correct behavior.

So again what I wish to do is to replicate the standard create feature of the grid, USING the method of creating new rows from the link in my original post.

The real life use case is that normally when a new row is created in the grid, it is added to the top so the user can immediately see it and start to edit the row, open the detail view and so on. This is especially helpful of the grid is paginated, and the new row don't get lost in the pages.

Hope this clears up any misunderstandings.

[Preslav]

Hello Gunnar,

Thank you for elaborating on the scenario. In this case, I would suggest using the insert method of the dataSource to add a record to the top of the Grid. After that, use the sync method to send the data to the server.

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/insert
• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sync
  

For example, in this demo:

• https://demos.telerik.com/kendo-ui/grid/editing-popup

Run the following JavaScript in the Dev console of your browser:

$("#grid").data("kendoGrid").dataSource.insert({"ProductID": null, ProductName: "Test", Discontinued: true});
//...
$("#grid").data("kendoGrid").dataSource.sync();

I hope this helps.


Regards,
Preslav
Progress Telerik

[Gunnar]

This is how I ended up solving it, using "insert", so going by the example in the example project I linked to in the original post, this is what I did:

Firstly when a new "order" is made, I make sure that the model returned
in the "Create" method in OrdersDataController has an ID from when the
model is added to the DB.
So when this part gets executed in "_OrdersCreate.cshtml":

@if (Model != null && ViewData.ModelState.IsValid)
{
    <script>
        closeCreatePopup();
    </script>
}

 

I send information on the new Order created. So to that end I have
modified "closeCreatePopup()" to handle arguments.
So for the finished results I will just use a piece of code from my own
project, the following is my implementation of "closeCreatePopup()":

function closeCreateEmployeeWindow(name, rHPersonID, personID, organizationID) {
    if (name !== undefined
        && rHPersonID !== undefined
        && personID !== undefined
        && organizationID !== undefined) {

        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
        grid.dataSource.sync();
    }

    var wnd = $("#createEmployeeModal").data("kendoWindow");
    wnd.refresh({ url: '@Url.Action("CreateEmployee", "Employee", new { Area = "Administration" })' });
    wnd.close();
}

 

The important part is this:

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();

 

What is happening here is I use the "insert" method from the grid, and adds a new object. By doing it like this, the normal "create" method built into the grid is replicated.

[Preslav]

Hi Gunnar,

I am glad to hear that the issue is now resolved. 

I checked the code, and everything looks good to me.


Regards,
Preslav
Progress Telerik