Grid Inside Dialog

[Chris]

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]

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. 

https://www.syncfusion.com/kb/7019/how-to-render-our-controls-via-ajax-partialview-in-unobtrusive-true-mode  

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]

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]

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]

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]

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.  

 

Refer to the Video Demo :-https://drive.google.com/file/d/1rN5YmKIt6p8D6UkvYKM-eLKF2V1FLOgp/view 

 

Sample Link:- http://www.syncfusion.com/downloads/support/forum/144279/ze/PARTIA~2478123877.zip 

 

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]

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]

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]

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]

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]

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.