RadGrid inline Edit/Insert/Delete using javascript

[Hamza Alazzeh]

Hello Everybody,

in my application I used a RadGrid to represent the company's founders, using 3 buttons outside the grid, how can I Insert/Edit/Delete the data in the grid, I studied the AllEditableColumns example you have done and I learned a lot from it, but my application is a little bit different, I shouldn't reflect any changes on the DB until I press the submit button, which means if I add a record the record won't be added to the database until I press submit the same applies for delete/edit operations

so I need temporialy to reflect the changes on the grid using javascript functions, but my problem is the edit/insert/delete buttons are outside the grid, so how can I show the edit form for the selected row when I press edit??? and how can I get the updated values after applying the changes?

P.S I should use javascript to show the edit form and to get the changes and to reflect them on the grid, your help is really appreciated

the grid looks like this:

<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"

            AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True" AllowPaging="True"

            AutoGenerateColumns="False"  OnDataBound="RadGrid1_DataBound">

            <PagerStyle Mode="NextPrevAndNumeric" />

            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="FounderId"

EditMode="InPlace" HorizontalAlign="NotSet"  AutoGenerateColumns="False">

                <Columns>

                    <telerik:GridBoundColumn DataField="FounderId" HeaderText="Founder ID"

                        UniqueName="FounderId" ColumnEditorID="FounderIdColumnEditor">

                    </telerik:GridBoundColumn>

                    <telerik:GridNumericColumn DataField="FounderName" HeaderText="Founder Name"

                       UniqueName="FounderName" ColumnEditorID="FounderName ColumnEditor">

                    </telerik:GridNumericColumn>

                </Columns>

                <EditFormSettings ColumnNumber="2" CaptionDataField="Founder tName" CaptionFormatString="Edit properties of Founder {0}">

                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>

                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"

                        Width="100%" />

                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />

                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>

                    <EditColumn ButtonType="ImageButton" InsertText="Insert Founder" UpdateText="Update record"

                        UniqueName="btnUpdate" CancelText="Cancel edit">

                    </EditColumn>

                    <FormTableButtonRowStyle HorizontalAlign="Right"></FormTableButtonRowStyle>

                </EditFormSettings>

            </MasterTableView>

            <ClientSettings>

                <ClientEvents OnRowDblClick="RowDblClick" />

            </ClientSettings>

        </telerik:RadGrid>

        <telerik:GridTextBoxColumnEditor ID="SharesKindDescreptionColumnEditor" runat="server"

            TextBoxStyle-Width="200px" />

        <telerik:GridTextBoxColumnEditor ID="SharesKindValueColumnEditor" runat="server"

            TextBoxStyle-Width="150px" />

        <table>

            <tr>

                <td align="left">

                    <table>

                        <tr>

                            <td>

                                <asp:ImageButton ToolTip="Add Founder" ID="btnAdd" runat="server"

                                    OnClientClick="AddNewFounder();" ImageUrl="~/Images/IconAdd_Text_Dialog.png" />

                            </td>

                            <td>

                                <asp:ImageButton ToolTip="Update Founder" ID="btnUpdate" runat="server"

                                    OnClientClick="UpdateFounderInfo();" ImageUrl="~/Images/IconEdit_Text_Dialog.png" />

                            </td>

                            <td>

                                <asp:ImageButton ToolTip="Delete Founder" ID="btnDelete" runat="server"

                                    OnClientClick="DeleteFounderInfo();" ImageUrl="~/Images/IconDelete_Text.png" />

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

Regards and thanks in advance,

Hamza

[Yavor]

Hello Hamza,

Basically, you can update all the edited rows in the grid, as shown in this article:

http://www.telerik.com/help/aspnet-ajax/grdperformingbatchupdates.html

Another option which you can consider is demonstrated in the following example:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx

I hope this gets you started properly.

Sincerely yours,
Yavor
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.