1. Home
  2. Forum
  3. ASP.NET MVC
  4. Displaying Grid Withing a Edit Dialog Template inside a Partial View fails.

Displaying Grid Withing a Edit Dialog Template inside a Partial View fails.

I'm trying to do the following:

1. Display a main page with a Grid
   a. This grids contains rows with an "Edit" Button on each
   b. Clicking on the "Edit" button displays an Edit Popup Dialog
      i. This modal's contents is housed inside a partial view
      ii. This partial view contains a second Grid as well as regular html

The result of my attempt is that the Edit Popup Dialog does appear, but the Grid inside of does not.  Other normal html elements and content do appear, but the grid is never rendered. 

I've followed the suggestions at this forum post (to no avail):


Although the code suggested in the post does work for me, it's not a 100% match to what I'm trying to accomplish (the difference being the chart in the suggested project vs. the Grid in mine).  Below are the main details of my project (only important parts included):

[Web.config]
  <appSettings>
....
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />
  </appSettings>
[Index.cshtml] (this grid works correctly)
@(Html.EJ().Grid<BusinessEntities.CompanyEntity>("CompanyGrid")
                ......
                .EditSettings(edit => {
                    edit
                        .AllowAdding()
                        .AllowEditing()
                        .AllowDeleting()
                        .EditMode(EditMode.DialogTemplate)
                        .AllowEditOnDblClick(false)
                        .DialogEditorTemplateID("BranchesGridContent");
                         //.DialogEditorTemplateID("#BranchesGridContent");
                }
               ......
                .ClientSideEvents(events =>
                {
                    events.ActionComplete("actionComplete");
                    events.ActionBegin("actionBegin");
                })
 )

<script type="text/javascript">
...
    function actionComplete(args) {
        var type = args.requestType;
        if (type == "beginedit" || type == "add") {
            if (!ej.isNullOrUndefined(args.rowIndex))
                var Id = this.model.currentViewData[args.rowIndex]["Id"];
            this.element.ejWaitingPopup("show");
       
            $.ajax({
                url: "/Company/CompanyEditPartial" + (type == "add" ? "" : "?companyId=" + Id),
                type: 'GET',
                success: ej.proxy(function (data) {
                    var div = ej.buildTag("div");
                    $("#" + this._id + "EditForm").prepend($(div).html(data));
                    //$("#" + this._id + "EditForm").html(data);
                    if (type != "add") $("#Id").addClass("e-disable").attr("disabled", "disabled");
                    this.element.ejWaitingPopup("hide");
                    ej.widget.init($("#" + this._id + "EditForm"))
                    //ej.widget.init($("#BranchesGridContent"))
                    //ej.widget.init($("#" + this._id + "EditForm"))
                }, this),
                error: ej.proxy(function (a, b, c, d) {
                    alert("error happened");
                })
            });
        }
.....
    }
</script>


[HomeController.cs]

        [HttpGet]
        public ActionResult CompanyEditPartial(long companyId)
        {
            var company = _companyService.GetById(companyId, true);

            ViewBag.Branches = company.Branches;

            return PartialView("_CompanyEdit", company);
        }


[_CompanyEdit.cshtml] (partial view, the grid below never gets rendered, although accompanying html does)
<div id="BranchesGridContent">
     <div>TEST HTML SHOWING THIS COMES FROM THE PARTIAL VIEW<div>
........
@(Html.EJ().Grid<BusinessEntities.BranchEntity>("CompanyBranches")
                    .Datasource((List<BusinessEntities.BranchEntity>)ViewBag.Branches)
                    .Data
                            .ToolbarSettings(toolbar =>
                            {
                                toolbar.ShowToolbar().ToolbarItems(items =>
                                {
                                    items.AddTool(ToolBarItems.Add);
                                    items.AddTool(ToolBarItems.Search);
                                });
                            }
                            )
                            .EditSettings(edit =>
                            {
                                edit
                                    .AllowAdding()
                                    .AllowEditing()
                                    .AllowDeleting();
                                //.EditMode(EditMode.DialogTemplate)
                                //.AllowEditOnDblClick(false)
                                //.DialogEditorTemplateID("CompanyEditTemplate");
                            }
                            )
                            .Columns(col =>
                            {
                                col.Field(p => p.Id).HeaderText("Company Id").IsPrimaryKey(true).Width(75).Add();
                                col.Field(p => p.Name).HeaderText("Name").Width(100).Add();
                                col.Field(p => p.Address).HeaderText("Address").Width(150).Add();
                                col.Field(p => p.City).HeaderText("City").Width(50).Add();
                                col.Field(p => p.State).HeaderText("State").Width(25).Add();
                                col.Field(p => p.Zip).HeaderText("Zip").Width(50).Add();
                                }  )
)
</div>
@Html.EJ().ScriptManager()


I have included a zip file with the important files included (plus an image showing the end result).

Please advice on how to get this to work.

Thanks,

Fausto






Attachment: ForSyncFusion_6f3bf7a7.rar

3 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 8, 2018 01:04 PM UTC

Hi Fausto, 

Thanks for contacting Syncfusion Support. 

We have checked your query and while checking your code example you have used  ej.widget.init($("#" + this._id + "EditForm")) while using unobtrusive mode. So we suggest you to use only  $("#" + this._id + "EditForm").prepend($(div).html(data)); as per given in the KB. 

Please refer to the below sample Link:- 

After following the above solution still facing the issue, please share us console window if any script Error occurs. 

Regards, 

Farveen sulthana T 


MA Muhammad Ali September 2, 2018 08:46 AM UTC

Hi

I have done the above, and the grid does show. But the formatting inside dialog is not clean. 
The space betweeen button and grid is not fine.

In asp.net mvc 5 how to change the size of the dialog template in grid.

PK Prasanna Kumar Viswanathan Syncfusion Team September 3, 2018 10:15 AM UTC

Hi Muhammad, 
 
Query 1: Formatting inside dialog is not clear. 

Based on above query we suspect that the Grid rows are not formatting correctly when the grid inside the dialog. We are able to reproduce the reported issue(shown the screen shot of issue in below) from our end. 

Refer the screen shot for the issue. 

 

If the above mention screen shot is your issue then we suggest you to follow the below code example. 


<style> 
    .e-grid .e-dialog .gridform .e-rowcell { 
        padding: .5em; 
    } 
</style> 



Query 2: Space between button and Grid is not fine. 

In our sample the space between the Grid and button is fine. So, please share the screenshot of an issue it will help us to find out the root cause and we can provide the appropriate solution 

Query 3: How to change the size of dialog template in Grid. 

We can achieve your requirement by setting the width and height of ejDialog in the ajax success event.  

Refer the below code example. 


<script> 

function actionComplete(args) { 

if (type == "beginedit" || type == "add") { 
 
             ---             
 
           $.ajax 
 
                ({ 
 
                    url: type == "add" ? "/Grid/EditPartial" : "/Grid/EditPartial?OrderID=" + OrderID, 
 
                    type: 'GET', 
 
                    success: ej.proxy(function (data) { 
                       
                        ---- 
 
 
                        var obj = $("#Edit_dialogEdit").ejDialog('instance'); // Edit_dialogEdit is id of the dialogTemplate 
 
                        obj.option({ width: 700, height: 600 }); 
 
                    }, this) 
 
                }); 
           
 
        } 
</script> 


We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 


 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon