1. Home
  2. Forum
  3. ASP.NET Core
  4. Custom DialogTemplate-Editing

Custom DialogTemplate-Editing

Hi!

I'm trying to make a crud asp.net core application with ejgrid.
I want like to use a custom Dialogtemplate for editing. Well, that work perfectly, but now i would like to extend the text/template with an EJ Grid for a detail view
But the grid is not shown. 
Is it possible that i couldn't put ej-grid (or any other ej control) inside a dialogtemplate? 
One additional question: Is there a documentation for the Templates? I would like to know the possibilities because i need them quite often in my application.

Code snippet:
<script type="text/template" id="template">
  <b>Details</b>
  <div style="margin: 5px; width: 400px; height: 400px;">
    <ej-grid id="GridDetail"
              locale="de-DE"
              action-complete="complete" action-begin="begin" enable-persistence="false" column-layout="Fixed">
      <e-datamanager url="/Admin/Company/Data" update-url="/Admin/Company/Edit" insert-url="/Admin/Company/Insert" remove-url="/Admin/Company/Delete" adaptor="UrlAdaptor" />
      <e-columns>
        <e-column field="id" type="Numeric" is-primary-key="true" is-identity="true" default-value="0" allow-editing="false"
                  header-text="DB-ID" header-text-align="@TextAlign.Center"
                  text-align="Right" width="@("10%")" visible="false"></e-column>
        <e-column field="name"
                  validation-rules='@(new Dictionary<string,object> { {"required",true}, {"minlength",3} })'
                  type="String"
                  header-text="Betrieb" header-text-align="@TextAlign.Center"
                  text-align="Left" width="250"></e-column>
      </e-columns>
    </ej-grid>
  </div>
</script>


5 Replies
VN Vignesh Natarajan Syncfusion Team May 21, 2018 12:01 PM UTC

Hi Michael, 
 
Thanks for using Syncfusion products.  
 
 
We have analyzed your query (“I want like to use a custom Dialogtemplate for editing. Well, that work perfectly, but now i would like to extend the text/template with an EJ Grid for a detail view”) and we suspect that you want to render the ej-Grid in the dialog template of the Grid editing.  We have achieved your requirement using action-complete event of the Grid. 
 
Refer the below code snippet  
 
<ej-grid id="FlatGrid" allow-paging="true" action-complete="complete"> 
.         .         .        .  
function complete(args) { 
        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()); 
            } 
        } 
        $("#FlatGrid_dialogEdit").ejDialog({ 
            open: function (args) {  // bind dialog open event 
                var div = document.createElement('div');   // create div element 
                div.id = 'Grid'; // set id to the element 
                document.getElementById('FlatGrid_dialogEdit').appendChild(div); // append the div element inside the dialog. 
                var Data = [ 
                    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1, Employee: { Address: '507 - 20th Ave. E.Apt. 2A' }, Freight: 33.38, ShipName: 'Alfreds Futterkiste', ShipCountry: 'Brazil' }, 
      .            .              .            .  
               $(function () { 
                    $("#Grid").ejGrid({  // render th grid using Javascript   
                        dataSource: Data, 
                        allowPaging: true, 
           
 
 
In the action-complete event we have used the open event of the dialog to render the Grid by creating the div element and render the Grid using JavaScript code. 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
Refer our help documentation for your Reference.  
 
If the above solution does not resolve your query please get back to us with more details. 
 
Regards, 
Vignesh Natarajan 


MS Michael Sandler May 22, 2018 11:09 AM UTC

Thank you for the sample. It is working fine. But it is not possible to declare the grid with <ej-grid> syntax. Only Javascript?

Thanks and regards

Michael

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 24, 2018 03:59 PM UTC

Hi Michael, 
 
Query#:-But it is not possible to declare the grid with <ej-grid> syntax. Only Javascript? 
 
We can render the asp.net core Grid instead of rendering in Javascript in partialView. In the Index1.cshtml (a partial view), place the EJGrid controls as a template to the Edit Form. 

Please refer to the code example:- 

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true"action-complete="actionComplete" action-begin="actionBegin" > 
       
       <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="DialogTemplate" dialog-editor-template-id="template"></e-edit-settings> 
        
        </e-columns> 
    </ej-grid> 

partialView:- 

<div id="template"> 
    <b>Order Details</b> 
    <table cellspacing="10"> 
        <tr> 
            <td style="text-align: right;"> 
                Order ID 
            <td style="text-align: left"> 
                @{Html.EJ().AutocompleteFor(o => o.OrderID).CssClass("e-field valid").Render(); } 
            </td> 
                   .    .     .  
            <td style="text-align: left"> 
                 
                @{Html.EJ().Grid<OrdersController>("FlatGrid1") 
                .Datasource((IEnumerable<object>)ViewBag.datasource) 
                .AllowPaging() 
                .AllowTextWrap() 
                .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Both); }) 
                  
                }).Render(); 
                } 
 
 
            </td> 
        </tr> 
         
    </table> 
</div> 
 
@Html.EJ().ScriptManager() 
 
 
<script> 
 
    function actionBegin(args) { 
        if (args.requestType == "save") 
            this.element.ejWaitingPopup("show"); 
    } 
    function actionComplete(args) { 
        var type = args.requestType; 
         
                var OrderID = this.model.currentViewData[args.rowIndex]["OrderID"]; 
            this.element.ejWaitingPopup("show"); 
            $.ajax 
                ({ 
                    url: "/Home/Index1", 
                    type: "GET", 
                    data: { value: OrderID }, 
                    success: ej.proxy(function (data) { 
                        var div = ej.buildTag("div"); 
                        $("#" + this._id + "EditForm").prepend($(div).html(data)) 
                        .  .  . 
                    }, this) 
                }); 
        } 
        if (args.requestType == "save") 
            this.element.ejWaitingPopup("hide"); 
    } 
</script> 


While editing the record we need to pass the primaryKey value of that corresponding record as a query string in the ActionComplete event of grid and call Partialmethod in the Home controller with these details through Ajax call within the same ActionComplete event for rendering the Grid  inside the Edit Form of the Grid after the Ajax success call. 
  
Please refer to the KB link:- 


Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 



MS Michael Sandler May 29, 2018 06:27 AM UTC

Thanks for your support.
Regards Michael

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 30, 2018 05:28 PM UTC

Hi Michael ,

 

Thanks for your update. Please get back to us if you need any further assistance.

 

Regards,

 

Farveen sulthana T


Loader.
Up arrow icon