Edit

[Hrvoje Voda]

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]

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" 

        OnServerDeleteRow="EditEvents_ServerDeleteRow"> 

        <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> 

    </ej:Grid> 

 

 

    <script type="text/template" id="template"> 

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                <td style="text-align: right;">Order ID 

                </td> 

                <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> 

                <td style="text-align: right;">Customer ID 

                </td> 

                <td style="text-align: left"> 

                    <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 

                        style="width: 116px; height: 28px" /> 

                </td> 

            </tr> 

             . . .  

              . ..   

        </table> 

    </script> 

 

    <script> 

        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()); 

                } 

            } 

        } 

    </script> 

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. 

https://help.syncfusion.com/js/api/ejgrid#members:editsettings-dialogeditortemplateid 

https://help.syncfusion.com/js/api/ejgrid#members:editsettings-editmode 

http://asp.syncfusion.com/demos/web/grid/dialogonlocaldata.aspx 

Refer to the attached sample 

Sample: http://www.syncfusion.com/downloads/support/forum/126047/ze/ASPGrid-543450573.zip 

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? 

Regards, 

Seeni Sakthi Kumar S.