How to add new row in RadGrid Clientside which should be inline and stay in editmode?

9 posts, 1 answers
  1. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    Hi,

    I have Rad Grid which has command button in command template
    <telerik:RadGrid ID="rgUsers" AutoGenerateColumns="false" runat="server" OnNeedDataSource="OnNeedDataSource">
               <ClientSettings>
                   <ClientEvents OnRowDblClick="RowDblClick" />
               </ClientSettings>
               <MasterTableView TableLayout="Fixed" CommandItemDisplay="Top" EditMode="InPlace"
                   InsertItemDisplay="Bottom" AutoGenerateColumns="false">
                   <CommandItemTemplate>
                       <asp:LinkButton ID="btnAddNew" runat="server" CommandName="InitInsert" Text="New"
                           Visible='<%# rgUsers.EditIndexes.Count == 0 && !rgUsers.MasterTableView.IsItemInserted %>' />
                         
                       <asp:Button ID="btnInsert" runat="server" CommandName="PerformInsert" Text="Insert" />
                         
                       <asp:Button ID="btnEditSelected" runat="server" CommandName="EditSelected" Text="Edit" />
                   </CommandItemTemplate>
                   <Columns>
                       <telerik:GridTemplateColumn HeaderText="UserName" UniqueName="UserName" SortExpression="UserName"
                           ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Center">
                           <ItemTemplate>
                               <asp:Label ID="lblUsername" runat="server" Text='<%#Eval("UserName")%>' />
                           </ItemTemplate>
                           <EditItemTemplate>
                               <telerik:RadTextBox ID="txtUsername" runat="server" Text='<%#Eval("UserName")%>'>
                               </telerik:RadTextBox>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>                 
                   </Columns>
               </MasterTableView>
           </telerik:RadGrid>
    to add new row,  which is working perfectly .
    But it is server side method.

    I want that client side ,and new row should be inline and in edit mode.

    Please suggest for the same.

    Thanks 





  2. Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 25 Jun 2012 Link to this post

    Hi Somnath,

    Please try the following approach:
      mark-up:
    <CommandItemTemplate>
            ...
      <asp:LinkButton Text="InitInsert" runat="server" ID="LinkButton1" OnClientClick="addNewItem()" />
    </CommandItemTemplate>
      JavaScript:
    function addNewItem() {
               var masterTable = $find("<%= rgUsers.ClientID %>").get_masterTableView();
               masterTable.fireCommand("InitInsert", "");
           }

    That should do the trick.

    All the best,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post

    Hi ,

    Thanks for the reply.

    You have provided the code which fires server side "InitInsert " command from client side.
    I want to create new row clientside not the server side.

    Please suggest for the same.

    Thanks & Regards,
    Somnath 

  5. Answer
    Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 28 Jun 2012 Link to this post

    Hello Somnath,

    Generally, you need to post to the server in order to open the insert form. However, if you want to do that only on client side, you could initialize an insert just on the initial load of the page and then configure the visibility of the insert form on client-side according to user preferences.

    I have created a sample RadGrid web site where I implemented the described approach. Please note that in that case you will need to handle the "PerformInsert" and "Cancel" commands manually.

    I hope this will prove helpful.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Somnath
    Somnath avatar
    43 posts
    Member since:
    Jun 2012

    Posted 11 Jul 2012 Link to this post

    Hi,

    Thanks for the sample code.Its working absolutely as per my requirement.

    In my project in which I am using telerik version 2011.2.915.40
    I am getting
    masterTable.get_insertItem() null

    Can u please provide altrenate method to get InsertItem at ClientSide.

    I am using rest of the thing same as you mentioned.

    Thanks & Regards,
    Somnath  

  7. Eyup
    Admin
    Eyup avatar
    3014 posts

    Posted 13 Jul 2012 Link to this post

    Hello Somnath,

    Generally, we recommend the use of the latest RadControls release since on every new release, new changes are being made for the improvement and usability of the controls.

    Nevertheless, you could change the following part of the provided application to make it work with an older version:
    function pageLoad() {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var rowsInEditForm = grid.get_element().getElementsByClassName("rgEditRow");
        var insertedRow;
        for (var i = 0; i < rowsInEditForm.length; i++) {
            if (rowsInEditForm[i].id == "") {
                insertedRow = rowsInEditForm[i];
                break;
            }
        }
        insertedRow.style.display = document.getElementById('HiddenField1').value;
    }

    That should do the trick.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Dennis
    Dennis avatar
    38 posts
    Member since:
    Aug 2010

    Posted 08 Dec 2012 Link to this post

    Although this works, but if you add validators on the Grid, the validators fire even for any operation performed outside the radgrid. additionally if the postback occurs on the page, the validators stop firing for the grid anymore. Any solution for that.
  9. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 13 Dec 2012 Link to this post

    Hello David,

    A possible resolution for the problem is to specify validation groups. When doing so you would prevent the validators from firing always. To get a better understanding of this approach please review this online resource.

    All the best,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Jonathan
    Jonathan avatar
    5 posts
    Member since:
    Sep 2016

    Posted 21 Oct in reply to Somnath Link to this post

    I'd like to add a DT to a radgrid which is already filled by SQL statement. Is there a way to append new rows from a NEW DataTable to an existing radGrid?

    BTW using VB

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017