We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Thread ID:





126092 Sep 23,2016 07:38 AM UTC Sep 26,2016 01:12 PM UTC ASP.NET Web Forms 1
Tags: Grid
Hrvoje Voda
Asked On September 23, 2016 07:38 AM UTC

How to show selected grid row in dialog?
also how to use save button in dialog?
I need code for vb.net not jquery.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 26, 2016 01:12 PM UTC

Hi Hrvoje, 

We suspect that you would like to use the Dialog Editing Template in the Grid. To enable this, assign the EditMode as DialogTemplateID and mention the id of template in DialogEditorTemplateID in EditSettings. The accepted template will be rendered in the ejDialog using the JSrender and the controls will be rendered in the ActionComplete event of the Grid. Refer to the following code example. 

    <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" 
        <ClientSideEvents ActionComplete="complete"/> 
.. . .   
                . .  
        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="DialogTemplate" DialogEditorTemplateID="#template"></EditSettings> 
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
    <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
                <td style="text-align: right;">Order ID 
                <td style="text-align: left"> 
                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" 
                        class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 
                <td style="text-align: right;">Customer ID 
                <td style="text-align: left"> 
                    <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
             . . .  
              . ..   
        function complete(args) { 
            if (args.requestType == "refresh" || args.requestType == "save") { 
                $('#<%= OrdersGrid.ClientID %>').ejWaitingPopup("hide"); 
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 
                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 });                 
                $("#ShipCountry").ejDropDownList({ width: '116px' }); 
                if (args.requestType == "beginedit") { 
                    $("#OrderID").attr("disabled", "disabled"); 
                    $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); 

Note: Dialog templates will be rendered using the Jsrender, so it will be achieved at the client end using the JQuery only.  

Refer to the following Help Documents and Live demo. 

Refer to the attached sample 

If we misunderstood your query, please share the following information to analyze your requirement. 

1)      Would like to customize the Grid editing operation or perform external operation to edit the Grid records? 
2)      Explain the scenario clearly with the image explaining the flow? 

Seeni Sakthi Kumar S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon