Grid: descending sorting and adding new record with inline editing

11 posts, 0 answers
  1. Flappie
    Flappie avatar
    13 posts
    Member since:
    Nov 2009

    Posted 18 Jul 2012 Link to this post

    Hello

    I'm using inline editing in a grid, which is all working fine. However, when I add sorting, and a column is using a descending sort, the new record row (the editable one, not a newly inserted row) is actually added at the bottom. Not really a problem if there's only one page, but it's not so cool when it's at the bottom of page 19. Yes, I can go to that last page, or reverse the sorting, and I'll see the boxes, but it would still be cool if the new record row was always at the top.

    Example here: http://jsfiddle.net/EEJsG/1/ It's using the "Inline editing" demo code from this website, with only "sortable: true" added.

    To see my problem, just click "Unit Price" twice and click the add new record button.

    Is this a bug, or am I missing a setting?

    Thanks!
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 20 Jul 2012 Link to this post

    Hi Michel,

    This is expected behavior which is due to the way the new records' creation is handled. The "Add new record" in the KendoUI Grid inserts the new item before the first record from the current page position in the original (without sort, page, filtering etc. applied) data. When sorting is applied this new item's position may not match the current page - thus it may be not visible. I am afraid currently I can not suggest any suitable workaround to handle the right position of the newly inserted item.
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sunil
    Sunil avatar
    1 posts
    Member since:
    Jul 2011

    Posted 10 Jul 2013 Link to this post

    Hello Telerik Team,

    I hope you might have solved this problem by the latest versions of Kendo UI Web. This is one year old blog but I am recently using this grid and came across exactly same issue.
    Please let me know the possible solution for the same. The grid must have sorting, paging and filtering feature in my case. I can switch to popup editing instead of inline editing. But the problem still persists.


    Thanks
    Sunil Chalmeti
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 Jul 2013 Link to this post

    Hello Sunil,

    As I mentioned in my previous reply, this behavior is by design and there is no a suitable workaround for the discussed scenario which I can suggest. Please accept my apologies for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Daniel
    Daniel avatar
    1 posts
    Member since:
    Oct 2014

    Posted 24 Jul 2015 Link to this post

    I'm also facing the same problem and this is causing a huge headache here! 

    When I sort ​a column, my row that was not saved is then automatically added to the grid.

    Daniel

  6. Scott
    Scott avatar
    7 posts
    Member since:
    Mar 2012

    Posted 27 Jul 2015 Link to this post

    I agree with all the other posters. This is a major problem complained about by my current client.
  7. Matt
    Matt avatar
    2 posts
    Member since:
    Sep 2017

    Posted 02 Nov 2017 Link to this post

    +1 to this being a problem. It's very user-unfriendly.
  8. Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 07 Nov 2017 Link to this post

    Hello, All,

    This will be discussed with the developers' team in order to determine if this behavior can be changed based on the current Grid and dataSource implementation without making any breaking changes.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Matt
    Matt avatar
    3 posts
    Member since:
    Oct 2016

    Posted 12 Feb 2018 Link to this post

    The following workaround forces a new record to appear at the top of the first page (if using paging). If you are on another page, you will need to go to the first page to see the new record (which is not ideal). But I am going to use this for my own application, as it does give me a relatively straightforward SOP for my users ("go to the first page and then click "Add a new record" and you will see the new record at the top).

    I am coding in C# using the ASP MVC model and the Telerik ASP MVC widgets. I am using the Ajax binding approach (with separate controller actions for create, read, update, delete).

    I added a new field, IsNew (boolean), to my view model for the grid.

    I have my read action set this field to 'false' for every record:

    public ActionResult MultiBillToChildrenRead([DataSourceRequest]DataSourceRequest request)
            {
                IQueryable<MultiBillToChild> children = _lanDb.MultiBillToChildren;
                var query = children.Select(c => new MultiBillToChildViewModel
                {
                    RowID = c.RowID,
                    CustomerID = c.CustomerID,
                    CustomerName = c.Customer.CustomerName,
                    ChildNotes = c.ChildNotes,
                    IsNew = false,
                    ParentDropDown = new ParentDropDown { ParentID = c.ParentID, ParentName = c.MultiBillToParent.ParentName }
                });
     
                DataSourceResult result = query.ToDataSourceResult(request);
                return Json(result, JsonRequestBehavior.AllowGet);
            }

     

    I then added a sort option on the grid for the IsNew field (descending). I did this after other sorts.

    .Sort(sort =>
                    {
                        sort.Add(c => c.ParentDropDown.ParentName);
                        sort.Add(c => c.IsNew).Descending();
                    }
                    )

     

    I also specified 'true' as the default value for new records:

    .Model(model =>
                    {
                        model.Id(c => c.RowID);
                        model.Field(c => c.ParentDropDown).DefaultValue(ViewData["defaultDropDown"]).Editable(true);
                        model.Field(c => c.IsNew).DefaultValue(true);
                    })

     

    Now, however I sort the grid (with the initial sorting or new sorting added by clicking column headers), when I click "Add a new record" (and I am on the first page), the record appears at the top. However, if I am on another page, then I will not see the new record at the top of my current page. I have to go to the first page to see it.

    This is certainly not an ideal solution, but I feel that it gives me better results than what I had. I thought others might find it an improvement worth making until there is a development solution from Telerik.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2501 posts

    Posted 15 Feb 2018 Link to this post

    Hello Matt,

    Thank you for sharing your solution with the community and for explaining the implementation details. This can help someone looking for similar functionality. As a token of gratitude for sharing the code you will find your points updated.

    On a side note, I would also point to a how-to article that shows how the new item can be displayed when filtering is applied in the Grid. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Alessandro Stefano
    Alessandro Stefano avatar
    2 posts
    Member since:
    Nov 2017

    Posted 29 Dec 2020 in reply to Viktor Tachev Link to this post

      $(".k-grid-add").on("click", function (e) {
                    var grid = $("#gridClienti").data("kendoGrid");
                    grid.dataSource.sort({});
                    //var dataSource = grid.dataSource;
                    //var pageNumber = dataSource.data().length;
                    //dataSource.insert(pageNumber, {});
                    //dataSource.page(dataSource.totalPages());
                    //grid.editRow(grid.tbody.children().first());
                });
    Viktor Tachev said:Hello Matt,

    Thank you for sharing your solution with the community and for explaining the implementation details. This can help someone looking for similar functionality. As a token of gratitude for sharing the code you will find your points updated.

    On a side note, I would also point to a how-to article that shows how the new item can be displayed when filtering is applied in the Grid. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
    Viktor Tachev said:Hello Matt,

    Thank you for sharing your solution with the community and for explaining the implementation details. This can help someone looking for similar functionality. As a token of gratitude for sharing the code you will find your points updated.

    On a side note, I would also point to a how-to article that shows how the new item can be displayed when filtering is applied in the Grid. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
    Viktor Tachev said:Hello Matt,

    Thank you for sharing your solution with the community and for explaining the implementation details. This can help someone looking for similar functionality. As a token of gratitude for sharing the code you will find your points updated.

    On a side note, I would also point to a how-to article that shows how the new item can be displayed when filtering is applied in the Grid. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top