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

Grid Dialog Edit with more than one table

Thread ID:

Created:

Updated:

Platform:

Replies:

131892 Aug 1,2017 10:24 PM UTC Aug 2,2017 12:14 PM UTC ASP.NET MVC 1
loading
Tags: Grid
Fillipe Barbosa
Asked On August 1, 2017 10:24 PM UTC

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 [Syncfusion]
Replied On 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.

CONFIRMATION

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.

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

;