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

[Somnath]

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 

[Eyup]

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

[Somnath]

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 

[Eyup]

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

[Somnath]

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  

[Eyup]

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

[Dennis]

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.

[Angel Petrov]

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

[Jonathan]

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