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. Image for the cookie policy date
close icon

Grid Dialog Edit with more than one table

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

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 2, 2017 12:14 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon