[Solved] Add empty row at the end of the item collection

[Stéphan Parrot]

Hi all,
    I am using the grid's Insert command in the toolbar to add a new row to the grid to add new stuff in my database.
Based on the Ajax Editing demo on Telerik's web page, I've been able to perform this with success but, it adds the new row at the very top of the grid's items and, upon insertion, it rebinds the grid and displays the new item at the end in the order it was inserted.
From a user standpoint, it's not really acceptable as users might start to search for what they entered on large volume of data.
So my first question is, how can I make the new row be inserted at the very bottom of the grid's items?
there is no paging, sorting, or anything like that here so, it eases a bit the pain it would bring otherwise.

Another issue I have is the new row look and feel when I access the page for the first time only. It's not aligned with the column headers.
As soon as I insert a new item, it aligns correctly and stays like that for any subsequent inserts.

Here's the Grid's code I have in my view

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MasterPageWithMenu.master"
    Inherits="System.Web.Mvc.ViewPage<IList<SimpleOrderDto>>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
    <%
        Html.Telerik().ScriptRegistrar().Scripts(s => s.Add("~/Scripts/Order.js"));
    %>
    <style type="text/css">
          .field-validation-error
          {
              position: absolute;
              display: block;
          }
          * html .field-validation-error
          {
              position: relative;
          }
          * + html .field-validation-error
          {
              position: relative;
          }
          .field-validation-error span
          {
              position: absolute;
              white-space: nowrap;
              color: red;
              padding: 17px 5px 3px;
              background: transparent url('<%= Url.Content("~/Content/Common/validation-error-message.png") %>') no-repeat 0 0;
          }
      </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <%
        Html.Telerik().Grid<SimpleOrderDto>(Model)
            .Name("Grid")
            .DataKeys(keys => { keys.Add(c => c.Sku); })
            .ToolBar(commands => commands.Insert()
            .DataBinding(dataBinding =>
            {
                dataBinding.Server()
                    .Select("Index", "Order");
                dataBinding.Ajax()
                    .Insert("_AddNewOrder", "Order")
                    .Delete("_DeleteOrder", "Order")
                    .Select("_Index", "Order");
            })
            .Columns(columns =>
            {
                columns.Bound(c => c.Sku).Width("10%").Title(ViewRes.Order_FastAdd.Sku);
                columns.Bound(c => c.Qty).Width("5%").Title(ViewRes.Order_FastAdd.Qty);
                columns.Bound(c => c.OldSku).Width("15%").Title(ViewRes.Order_FastAdd.OldSku).ReadOnly(true).HtmlAttributes(new { id = "OldSku" });
                columns.Bound(c => c.Description).Width("20%").Title(ViewRes.Order_FastAdd.Description).ReadOnly(true).HtmlAttributes(new { id = "Description" });
                columns.Bound(c => c.Message).Width("15%").Title(ViewRes.Order_FastAdd.Message).ReadOnly(true).HtmlAttributes(new { id = "Message" });
                columns.Bound(c => c.AvailQty).Width("15%").Title(ViewRes.Order_FastAdd.AvailQty).ReadOnly(true).HtmlAttributes(new { id = "AvailQty" });
                columns.Command(commands =>
                {
                    commands.Delete();
                }).Width("10%").Title(ViewRes.Order_FastAdd.Delete);
            })
            .Render();

    %>

    <%
        Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
        {
    %>
    $('.insert-button').click(function(e) { e.preventDefault(); $('#Grid').data('tGrid').createRow();
    });

    <%
        });
    %>

</asp:Content>

:




Thanks for the help!

[Atanas Korchev]

Hello Stéphan Parrot,

Currently it is not possible to make the new row appear at the bottom of the grid. Perhaps we will implement that in a future release.

The second problem looks strange. Could you isolate it in a sample app and send it over as a support ticket?

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stéphan Parrot]

Hello Atanas,
    I really hope to see the grid "fixed" to be able to add a new row at the bottom of existing items in it. As I said, it's not practical for users to have a grid that allows to add a row at the top of the items and upon saving the new item, see it go straight down at the bottom.
I'm a bit puzzled here as our user base will totally reject this behavior which will probably force me to use something else for the grid.
Do you think I should open a ticket for that? I think it is very important to be able to control that behavior.

As for the other issue, I'm already working on a sample project and will submit it as soon as I get it done!

Thanks again for taking the time to answer me!

Stéphan

[Atanas Korchev]

Hello Stéphan Parrot,

Even if you do open a support ticket  I am not sure we could implement that ASAP.
I am afraid we have already determined the features for the upcoming release and I am not sure we would be able to squeeze that.

As for the decision to make the new row appear on top - we borrowed that from RadGrid for ASP.NET Ajax.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stéphan Parrot]

Hi Atanas, 
    I'm not expecting that feature to be part of the next release but, it would be nice to have it in there eventually! :)
I will try to code a jquery "patch" to get around it. Not sure at this point if it will do the trick but I wouldn't be afraid to put a 10$ on it! hehe
If I manage to get it working, I'll create a post just for that so others can benefit from it.

Have a nice day!

Stéphan

[Stéphan Parrot]

Hello all,
    As promised, I came up with a quick workaround to get this kind of feature into the grid.
I wrote a post about it here

Enjoy!

Stéphan