[Solved] Add new row to radgrid clientside javascript

[mohamed]

hi,
i want to add a new row to the grid at the client side using a javascript code and not losing the data i inserted when i postback to the server. here is a code snippet,
ASPX
<dnn:DNNGrid
id="grdDestinations" AutoGenerateColumns="false" CssClass="dnnGrid dnnSecurityRolesGrid" 
Runat="server" AllowPaging="True"  EnableViewState="False" PageSize="10">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="ComRuleItemID">
<CommandItemTemplate>
                        <table><tr><td width="30%">
                                    <asp:HyperLink ID="cmdAddDestination" runat="server" CausesValidation="False" />
                                    when clicking on this hyperlink my custom javascript method AddNewDestination() will be called
</td></tr></table>
</CommandItemTemplate>
                <Columns>
                    <dnn:DnnGridTemplateColumn UniqueName="ComRuleActions"  >
                        <ItemTemplate>
                            <dnn:DnnImageButton runat="server" ID="Delete" CommandName="Delete" IconKey="Delete" />
                            <asp:HiddenField ID="DestinationGroupID" runat="server" />
                        </ItemTemplate>
                    </dnn:DnnGridTemplateColumn>
                    <dnn:DnnGridBoundColumn datafield="DestinationName" headertext="Destination" HeaderStyle-Width="95%"/>
                </Columns>
</MasterTableView>
<PagerStyle Mode="NumericPages" Position="Bottom"></PagerStyle>   
<ClientSettings EnablePostBackOnRowClick="true">
</ClientSettings>           
</dnn:DNNGrid> 
JavaScript
function  AddNewDestination() {
var newDestinationValue = 'This value i will get by my self from somewher';
            var masterTable = $find("<%= grdDestinations.ClientID %>").get_masterTableView();
            masterTable.insertItem(newDestinationValue);
    }
C#
protected void grdDestinations_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == "PerformInsert")
            {
                //Do here my server side insertion process in grid
            }
        }
My Problem is:
1) in order to make the event grdDestinations_ItemCommand fired by calling the javascript method masterTable.insertItem(newDestinationValue) i had to set the grdDestinations.MasterTableView.IsItemInserted = true;
and this property when sitting with true, an unwanted insertion form appeared above the grid, so how i can remove this form and keeps the event firing....?
2)how can i get the data i inserted by calling the javascript masterTable.insertItem(newDestinationValue) ,in the server side is the data is passed to the server so i will be able to handle it in server side....???
3)i know that there is something wrong , if iam using the feature in a wrong way feel free to tell the right way even if i have to delete all my work.
4) thank you very much in advance.....:)))

[mohamed]

ok,
i solved part of my problem,
protected void grdDestinations_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
            if (e.Item.ItemType == GridItemType.EditFormItem)
            {
                e.Item.Visible = false;
            }
}
this part of code helped me to hide the editform row .... still waiting for help guys ...:)))

[mohamed]

still trying to get the passed data in the server side sent from the javascript .... any help ??

[Andrey]

Hello,

I am not sure that I understand correctly what your requirement is. You want to add a new record on the client, but do not want to have insert form, how will you provide the data for the newly created item?

All your problems will be resolved if you use the built-in insert form and hit the insert/update button of the autogenerated edit/insert form. Pressing one of these button will fire the OnUpdate/OnInsertCommand event and in this event through the event arguments you will be able to get the provided value from the editor controls.

If the case is different please elaborate a bit more.

Kind regards,
Andrey
the Telerik team

[Lorena]

Hi,

I think my problem is similar with this one in this thread, so this is why I decided to reply. I am using RadControls for ASP.NET AJAX Q2 2013.
Dear Telerik team, I have the following scenario:
- On a web form I have 3 sections, in this order: first section with textboxes and a Search button, second section with a RadGrid, let's name it FirstRadGrid, which has as first column GridClientSelectCommand and a third one, another RadGrid, let's name it SecondRadGrid.
- When the search button is clicked, the FirstRadGrid is reloaded with data from DB by binding it on the server side (we don't use the embedded radgrid filtering for various reasons - doesn't really matter here why);
- When the user clicks on a row from the FirstRadGrid, I want it to be added on client side in the SecondRadGrid. The SecondRadGrid is only a container for all the selections the user made in the FirstRadGrid, after every search.
- I have then a Submit button which I want to use to bulk insert the rows from the SecondRadGrid in the DB, on the client side.

Can you please guide me how to add on client side these rows in SecondRadGrid (I suppose based on the FirstRadGrid client event handler - OnRowSelected) and then, when the Submit button on the form is clicked, get all the rows in the SecondRadGrid and call a web service to insert all the rows in the DB at once?

Thank you so much,
Lorena

[Andrey]

Hi,

You pretty much have described the algorithm you need to use. However, you need to consider how you will bound the second RadGrid instance. You could make a JSON object to which to bind the second Grid.

In all cases you will need to manually iterate over the second Grid datasource and pass them to the web service. You could check this online demo application for more information on how to bind RadGrid programmatically on the client-side.

Regards,
Andrey
Telerik