This is a migrated thread and some comments may be shown as answers.

[Solved] Add a new row at the bottom of the grid's items

15 Answers 565 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Stéphan Parrot asked on 14 May 2010, 07:00 PM

Hello folks!

I've written a small script that allows to add a new row at the very last position of the grid's item collection!
Natively, it's not supported yet so, I came up with a small fix as follow:

    
            $('.t-grid-add').live('click', function (e) {  
        
                //Get the new inserted row  
        
                var newRow = $('.t-grid-new-row');  
        
                //Get the last row of the grid's body  
        
                var lastRow = $(newRow).parent().children().last();  
        
                //checks that it's not the new inserted row   
        
                //(meaning there's no item added yet to the grid  
        
                if ($(lastRow).attr('className') != "t-grid-new-row") {  
        
                    //Append the new row at the very last position   
        
                    //of the rows in the grid's body  
        
                    $(lastRow).after($(newRow));  
        
                }  
        
                //Selects the first text input box of the new row  
        
                $(".text-box").first().focus();  
        
            });

If someone finds any problems or have better ideas or any suggestions, please, contribute!

Thanks and I hope this will help some of you guys out there!

Stéphan

15 Answers, 1 is accepted

answered on 21 Jun 2010, 01:16 PM

Hi varadhg,
Simply add this script in your page's header in a <script></script> tag OR even better, put it in a separate javascript file that you load using Html.Telerik().ScriptRegistrar as follow:

    
            <asp:Content ID="headContent" ContentPlaceHolderID="Head" runat="server">  
        
                <%          
        
                    Html.Telerik().ScriptRegistrar()  
        
                        .DefaultGroup(scripts => scripts  
        
                            .Add("~/Scripts/myjavascriptfilecontainingthenewrowfix.js"));  
        
                %> 
        
            </asp:Content> 
        
            <asp:Content ID="main" ContentPlaceHolderID="MainContent" runat="server">  
        
            <%=  
        
                Html.Telerik().Grid(Model)  
        
                .Name("MyGrid")  
        
            %> 
        
            </asp:Content>

As you can see, it's very simple.
Let me know if you have other questions!

Best of luck!

Stéphan