Grid Dialog Edit with more than one table

[Fillipe Barbosa]

Hi,
I`m haveing some troubles with dialog edit mode, I can`t find how to load the dialog form with more fields that is showing in the Grid, example:

TypeUser has many operation and many reports.

> Grid

ypeUser	Active
Administrator	Yes

>Dialog

Description: Administrator

Active: Yes

Operations: (  ) 01  (  ) 01  (  ) 01  (  ) 01  (  ) 01

Reports: (  ) 02  (  ) 02  (  ) 02  (  ) 02  (  ) 02

Save     Cancel

[Seeni Sakthi Kumar Seeni Raj]

Hi Fillipe,  

 

Thanks for contacting Syncfusion Support.  

 

We could see you would like to render edit form with some fields which are not present in the Grid Columns. We can achieve your requirement using the Dialog Template Editing feature of the Grid. Refer to the following Help Document and Showcase demo.  

 

https://help.syncfusion.com/aspnetmvc/grid/editing#dialog-template-form 

http://mvc.syncfusion.com/demos/web/grid/dialogediting 

 

Refer to the following code example which renders only three columns and renders more than three columns in the Editform. Even in the showcase demo, you could see ShipAddress as an extra column. 

 

@(Html.EJ().Grid<object>("Grid") 

           .EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"))           .Columns(col => 

            { 

                col.Field("OrderID").IsPrimaryKey(true).Add(); 

                col.Field("CustomerID").Add(); 

                col.Field("Freight").Add(); 

            }) 

            .ClientSideEvents(events => events.ActionComplete("actionComplete")) 

) 

 

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

        <tr> 

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

                Freight 

            </td> 

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

                <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 

            </td> 

        </tr> 

        <tr> 

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

                Ship City 

            </td> 

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

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

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

            </td> 

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

                Ship Name 

            </td> 

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

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

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

            </td> 

        </tr> 

    </table> 

</script> 

 

If you would like to render any controls or achieve any other functionalities in the Editform, you can use a ActionComplete event of the Grid. Refer to the following code example.  

 

 

<script> 

    function actionComplete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 }); 

            if (args.requestType == "beginedit") { 

                $("#OrderID").attr("disabled", "disabled"); 

            } 

        } 

    } 

</script> 

 

 

Regards,  

Seeni Sakthi Kumar S.