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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Inside Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

144279 Apr 26,2019 08:49 PM UTC May 9,2019 11:41 AM UTC ASP.NET Core 10
loading
Tags: Grid
Chris
Asked On April 26, 2019 08:49 PM UTC

Hi,

I have a situation where I need the same grid to pop up in different pages in my application.  To make it so that I can simply reuse the grid where I need it I tried making the grid in a partial view and opening in an ej-dialog when I need it.  I found that the dialog does not render the grid.  I found potential solutions for regular MVC, but nothing specific to ASP.Net core EJ1.  I think it has something to do with Unobtrusive mode and non-unobtrusive mode.

On the main page I have the dialog set up like this:

<div class="control">
    <ej-dialog id="editAttn" title="Attention Contacts" show-on-init="false" content-type="ajax" content-url="@Url.Content("/Surface/Attention").ToString()"></ej-dialog>
</div>

The ej-dialog is opened when a custom button on a child grid is clicked:

    function OnChildToolbarClick(args) {
        if (args.itemName == "Attention") {
            var childGrid = $("#" + this._id).ejGrid("instance");
            var rowIndex = childGrid.model.selectedRowIndex;
            if (rowIndex > -1) {
                if (childGrid.batchChanges.added.length == 0) {
                    var curRow = childGrid.model.currentViewData[rowIndex];

                    if (curRow.IsPerson == false) {
                        if (curRow.ParentSurfaceContactId > 1) {
                            //var prDialog = $.templates($("#projRptDialog").html());
                            //$(prDialog.render()).ejDialog({ title: "Project Report", width: "710px" });
                            //editAttn
                            $("#editAttn").ejDialog({ contentUrl: "/Surface/Attention?orgId=" + curRow.ParentSurfaceContactId});
                            $("#editAttn").ejDialog("open");
                        } else {
                            // to do err
                        }
                    } else {
                        // to do err
                    }
                } else {
                    // to do error msg
                }
            } else {
                // TO DO error msg
            }
        }
    }

The partial view looks like this:

@{
    var orgId = ViewBag.OrgId;
}


<ej-grid id="SurfAttnCon" allow-paging="true" allow-filtering="false" allow-resizing="true" allow-resize-to-fit="true" allow-sorting="false" allow-scrolling="true" allow-text-wrap="true" action-begin="GridBegin">
    <e-datamanager url="/Surface/AttnConDataSource" batch-url="/Surface/AttnConBatchUpdate" adaptor="UrlAdaptor" />
    <e-edit-settings allow-editing="true" allow-adding="false" allow-deleting="true" edit-mode="@(EditMode.Batch)" show-confirm-dialog="false" show-delete-confirm-dialog="true" />
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add", "edit", "delete", "update","cancel" })"></e-toolbar-settings>
    <e-columns>
        <e-column field="Id" is-primary-key="true" visible="false" is-identity="true" type="numeric"></e-column>
    </e-columns>
</ej-grid>

<div id="content">
    Hello
</div>
Hello there!<br />
Org Id = @orgId

<script type="text/javascript">
    function GridBegin(args) {
        alert(@orgId);

    }
</script>

Is it possible to do what I'm attempting to do?  Or is there another way to reuse grid on different pages?

Thanks,
Chris


Vignesh Natarajan [Syncfusion]
Replied On April 29, 2019 11:02 AM UTC

Hi Chris, 

Thanks for contacting Syncfusion support. We are happy to assist you. 

Query 1: I found that the dialog does not render the grid.  I found potential solutions for regular MVC, but nothing specific to ASP.Net core EJ1.  I think it has something to do with Unobtrusive mode and non-unobtrusive mode. 

Syncfusion components will render in two modes such Unobtrusive mode and non-unobtrusive mode.  Please refer the below solution to avoid the above issue(dialog does not render the grid) 

Non-unobtrusive mode.   

For non-unobtrusive mode, we need to refer the script manager. Refer the below code example,  

<ej-grid id="FlatGrid" allow-sorting="true" allow-paging="true"> 
    …………….. 
    <e-columns> 
        ……………….. 
   </e-columns> 
</ej-grid> 
 
<ej-script-manager></ej-script-manager> @*for non-unobtrusive mode, it must be given in partial view*@ 


Unobtrusive mode 

We have already discussed the same in the below knowledge base help documentation, refer the below link. 


And also, we need the following details to validate your query. So, we request you to please get back to us with the following details. 

  1. As you have mentioned child grid custom button, Please confirm which means you need to render the grid inside the dialog on child grid custom button click. If not, please share more details regarding your requirement.
  2. Kindly confirm where you have defined the OnChildToolbarClick event. Please share the complete code example.
  3. If you are facing any issue/script share the screenshot of the reported issue.
 
Requested details will be helpful for us to validate the reported issue at our end 

Regards, 
Vignesh Natarajan. 
 
 


Chris
Replied On April 29, 2019 09:05 PM UTC

Hi,

To answer your questions:

1) As you have mentioned child grid custom button, Please confirm which means you need to render the grid inside the dialog on child grid custom button click. If not, please share more details regarding your requirement.

I tried your idea for the Non-unobtrusive mode.  The grid in the dialog now renders but I am encountering other problems.  I need to pass a parameter to the grid in the partial view.  However, I am seeing that the parameter has the incorrect value.  It is explained in more detail below.

Main page: Index.cshml

On the main page (Index.cshtml) I have a hierarchy grid.  The goal is to highlight a row in the child grid, click a custom button in the child grid's tool bar and then open a grid that it is a partial view inside a dialog control.  The reason why I am doing it this way is that this grid is going to be used in many different places and I only want to define it once.

On the main page I setup the dialog as so:
<div class="control">
    <ej-dialog id="editAttn" title="Attention Contacts" show-on-init="true" content-type="ajax" content-url="@Url.Content("/Surface/Attention?orgId=1").ToString()"></ej-dialog>
</div>

The main page has a hierarchy grid.  It looks something like this (in reality it is quite big):
<ej-grid child-grid="@(new GridProperties() {QueryString = "Id", etc, ToolbarClick="OnChildToolbarClick", etc}">
columns, datasource, etc
</ej-grid>

In the ToolbarClick for the child grid I have the code below.  What it is doing getting a column value from the current row, changing the "content-url" of the dialog so I can pass a parameter to the partial view.

    function OnChildToolbarClick(args) {
        if (args.itemName == "Attention") {
            var childGrid = $("#" + this._id).ejGrid("instance");
            var rowIndex = childGrid.model.selectedRowIndex;
            if (rowIndex > -1) {
                if (childGrid.batchChanges.added.length == 0) {
                    var curRow = childGrid.model.currentViewData[rowIndex];

                    if (curRow.IsPerson == false) {
                        if (curRow.ParentSurfaceContactId > 1) {                           

                            $("#editAttn").ejDialog({ contentUrl: "/Surface/Attention?orgId=" + curRow.ParentSurfaceContactId}); 
                            $("#editAttn").ejDialog("open");
                        } else {
                            // to do err
                        }
                    } else {
                        // to do err
                    }
                } else {
                    // to do error msg
                }
            } else {
                // TO DO error msg
            }
        }
    }

In the controller, I have the following:

        public IActionResult Attention(int orgId)
        {
            ViewBag.OrgId = orgId;

            return PartialView("_Attention", ViewBag);           
        }

Finally, the partial view (_Attention.cshtml) looks like this:

@{  
    var orgId = ViewBag.OrgId;
}

<ej-grid id="SurfAttnCon" allow-paging="true" allow-filtering="false" allow-resizing="true" allow-resize-to-fit="true" allow-sorting="false" allow-scrolling="true" allow-text-wrap="true" action-begin="GridBegin">
    <e-datamanager url="/Surface/AttnConDataSource" batch-url="/Surface/AttnConBatchUpdate" adaptor="UrlAdaptor" />
    <e-edit-settings allow-editing="true" allow-adding="false" allow-deleting="true" edit-mode="@(EditMode.Batch)" show-confirm-dialog="false" show-delete-confirm-dialog="true" />
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add", "edit", "delete", "update","cancel" })"></e-toolbar-settings>
    <e-columns>
        <e-column field="Id" is-primary-key="true" visible="false" is-identity="true" type="numeric"></e-column>
    </e-columns>
</ej-grid>

<ej-script-manager></ej-script-manager>

<script type="text/javascript">
    var orgId = @orgId;
    // this alert method has the correct orgId
    alert("org from normal js: " + orgId);

    function GridBegin(args) { 
        alert("in grid");
        // this orgId is incorrect.  It is always set to what it should have been last time
        alert(orgId);     
        args.model.query.addParams("OrgId", orgId);
    }
</script>

The problem that I am having now is that the "orgId" in the partial view is wrong.  It is always set to what it should have been last time.  For example:
- The first time I invoke the grid in the dialog the "GridBegin" method doesn't run.
- The second time I invoke the grid in the dialog the "GridBegin" method runs, but the orgId is what it should have been the first time I invoked it.  Interestingly, the "alert" that is outside the "GridBegin" method is correct.
- the third time I invoke the grid, orgId inside the GridBegin method is what it should have been the second time, etc.

Does this mean I should be using the Unobtrusive mode method?  If so, could I have an example on how to do with a dialog in ASP.net Core ej1?

2) Kindly confirm where you have defined the OnChildToolbarClick event. Please share the complete code example.

It is in the toolbarclick on the child grid of the hierarchy grid.  Code sample is in my answer for question 1.

3) If you are facing any issue/script share the screenshot of the reported issue.

There are not any script errors.  It just doesn't work right as described in my answer for question 1.

Thanks,
Chris



Vignesh Natarajan [Syncfusion]
Replied On April 30, 2019 01:10 PM UTC

Hi Chris, 

Thanks for the details explanation. 

We have validated your query with your code example and found that in the ChildGridToolbarClick event you have taken the Grid instance and from that instance you have used SelectedRowIndex property. So reported issue may occur when you select one record in one child Grid and click the toolbar in another child Grid. 

So kindly share the following details which will be helpful for us to validate the reported issue at our end.  

  1. Complete Grid code example(child Grid).
  2. How you have get the rowDetails of the childGrid from the button click. Have you bind any unbound column in the child Grid.
  3. Video Demo/Screenshot to replicate the issue.
  4. Are you able to get correct childGrid id on the toolbarClick?. Kindly esnure it by placing a debugger in toolbar click event.

Regards, 
Vignesh Natarajan. 
 


Chris
Replied On April 30, 2019 03:01 PM UTC

Hi,

I think we are making this too complicated. 

All I need is an working example.  See below for details:
- EJ Dialog where the content-url is a partial view.
- The partial view contains a grid. 
- The EJ Dialog passes a parameter to the partial view.
- The parameter is used in the grid's "actionBegin" method
- The same EJ Dialog can be opened multiple times on the main page with a different value in the parameter.
- Example should be for ASP.Net Core, EJ1.

Thanks,
Chris

Vignesh Natarajan [Syncfusion]
Replied On May 2, 2019 07:28 AM UTC

Hi Chris, 
 
Query#:- The second time I invoke the grid in the dialog the "GridBegin" method runs, but the orgId is what it should have been the first time I invoked it.  Interestingly, the "alert" that is outside the "GridBegin" method is correct. 
 
As per your requirement we have prepared sample by rendering the Grid in partialView which is placed inside the ejDialog in main page. Also in childGrid we have passed the corresponding rowDetails while clicking on button and get the parameter on actionBegin event. 
 
Refer to the code example:- 
 
mainPage:- 
 
index.cshtml 
<div class="control"> 
    <ej-dialog id="editAttn" title="Attention Contacts" show-on-init="true" content-type="ajax" content-url="@Url.Content("~/Home/Text?OrderID=1").ToString()"></ej-dialog> 
</div> 
 
<ej-grid id="Grid" datasource=ViewBag.parent allow-paging="true"> 
    <ej-grid query-string="EmployeeID" datasource="ViewBag.child"> 
        <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Batch"></e-edit-settings> 
        <e-columns> 
            .   .    .    
            <e-column header-Text="Manage Records"> 
                <e-column-commands> 
                    <e-column-command type="button"> 
                        <e-button-options content-type="TextOnly" text="Edit" click="click"></e-button-options> 
                    </e-column-command> 
 
                </e-column-commands> 
            </e-column> 
        </e-columns> 
    </ej-grid> 
     
</ej-grid> 
<script type="text/javascript"> 
    function click(e) { 
        var id = $(e.target).closest(".e-detailcell").children().attr("id"); 
        var childGrid = $("#" + id).ejGrid("instance");  
        var rowIndex = childGrid.model.selectedRowIndex; 
        if (rowIndex > -1) { 
            if (childGrid.batchChanges.added.length == 0) { 
                var curRow = childGrid.model.currentViewData[rowIndex]; 
                   if (curRow.OrderID > 1) { 
                        $("#editAttn").ejDialog({ contentUrl: "/Home/Text?OrderID=" + curRow.OrderID}); 
                        $("#editAttn").ejDialog("open"); 
                    } else { 
                        // to do err 
                    } 
                 
            } 
          } 
        } 
</script> 
 
Controller:- 
 
public ActionResult Text(int OrderID) 
        { 
            ViewBag.OrderID = OrderID; 
            return PartialView("_datepicker"); 
        } 
      
partialView:-  
_datepicker.cshml 
 
<ej-grid id="FlatGrid" allow-sorting="true" allow-paging="true" action-begin="begin"> 
    <e-datamanager url="//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=45" offline="true" cross-domain="true"></e-datamanager> 
    <e-columns> 
        <e-column field="OrderID" header-text="Order ID" text-align="Right" width="75"></e-column> 
    </e-columns> 
</ej-grid> 
<script type="text/javascript"> 
    var OrderID = @OrderID; 
    // this alert method has the correct orgId 
    alert("org from normal js: " + OrderID); 
 
    function begin(args) { 
        alert("in grid"); 
        // this orgId is incorrect.  It is always set to what it should have been last time 
        alert(OrderID); 
        
       args.model.query.addParams("OrderID", OrderID); 
    } 
</script>    
 
For your convenience we have prepared a sample and video demo. Kindly refer the below links for the same.  
 
 
 
After following the above solution still facing the issue, please share us the following details. 
 
  1. Video Demo to replicate the issue.
  2. Replicate the issue in the above sample and revert us back.
  3. Have you used the above code example in your sample and after using the above code example still facing the issue, please share modified code example.
 
Regards, 
Vignesh Natarajan. 


Chris
Replied On May 2, 2019 04:03 PM UTC

Hi,

Thank you, I got it working.

You won't believe what the problem was...I was so close to figuring this out after your first reply.

In the partial view, apparently it matters where you put <ej-script-manager></ej-script-manager> .

My original partial view looked like:
--------------------------------------------
@{  
    var orgId = ViewBag.OrgId;
}

<ej-grid id="attncon" rest of stuff>
  other grid stuff
</ej-grid>

<ej-script-manager></ej-script-manager>

<script type="text/javascript">
    var orgId = @orgId;
    alert("org from normal js: " + orgId);

    function GridBegin(args) { 
        alert("in grid");
        alert(orgId);     
        args.model.query.addParams("OrgId", orgId);
    }
</script>
--------------------------------------------------------

I moved <ej-script-manager></ej-script-manager> to the end of the file and it started working! See below

-------------------------------------------
@{  
    var orgId = ViewBag.OrgId;
}

<ej-grid id="attncon" rest of stuff>
  other grid stuff
</ej-grid>

<script type="text/javascript">
    var orgId = @orgId;
    alert("org from normal js: " + orgId);

    function GridBegin(args) { 
        alert("in grid");
        alert(orgId);     
        args.model.query.addParams("OrgId", orgId);
    }
</script>

<ej-script-manager></ej-script-manager>

-----------------------------------------------

Thanks,
Chris

Vignesh Natarajan [Syncfusion]
Replied On May 3, 2019 03:54 AM UTC

Hi Chris,  

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan. 


Chris
Replied On May 7, 2019 10:43 PM UTC

Hi,

I've run into a snag.  When saving batch changes to the grid that is inside the partial view in the dialog I'm getting the following error:

uncaught exception: ej.Query: Custom Param is conflicting other request arguments f@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:99778 addParams@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:53642 batchRequest@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:51990 saveChanges@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:37215 _sendBulkReuqest@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:3272557 batchSave@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:3272470 _toolbarOperation@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:3243651 _toolBarClick@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:3240250 _trigger@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:13795 _onItemClick@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1819262 t.proxy/<@https://localhost:44315/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:27682 dispatch@https://localhost:44315/lib/jquery/dist/jquery.js:4736:16 add/elemData.handle@https://localhost:44315/lib/jquery/dist/jquery.js:4549:6


I believe the problem is due to setting a parameter in the action-begin event of the grid:

   var forgId = @fOrgId;

    function GridBegin(args) { 
        args.model.query.addParams("FOrgId", forgId);
    }

I commented out the method and hardcoded a "FOrgId" in the datasource and I was able to do batch updates.  I think it is because I reopen the dialog and I am in fact trying to add the same parameter name more then once.

Is there a way I could do this?

    var forgId = @fOrgId;
    function GridBegin(args) {

        if "FOrgId" parameter already exists {

           change the value for the existing parameter

        } else {


            args.model.query.addParams("FOrgId", forgId);

        } 
       
    }


Chris
Replied On May 8, 2019 03:37 PM UTC

Hi,

I figured out my problem on my own.  Whenever I was opening the grid that was in a partial view that was in the dialog the "action-begin" event fires twice.  See below for the changes I made to get it working.

    var forgId = @fOrgId;

    function GridBegin(args) { 

        if (args.model.query._params.length == 0) {           
            args.model.query.addParams("FOrgId", forgId);
        } else {          
            if (args.model.query._params[0].key == "FOrgId") {
                if (parseInt(args.model.query._params[0].value) == parseInt(forgId)) {
                    // value is same, do nothing
                } else {
                    // value is different, change parameter
                    args.model.query._params[0].value = forgId;
                }

            }
        }
    }

Thanks,
Chris

Vignesh Natarajan [Syncfusion]
Replied On May 9, 2019 11:41 AM UTC

Hi Chris,  
 
Thanks for the update.  
 
We are glad to hear that you have resolved your query.  
 
Please get back to us if you have further queries 
 
Regards, 
Vignesh Natarajan. 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon