How can I use the Dialog inside the grid column template?

[Sree]

1.

<script id="ActionTemplate" type="text/x-template">

     How can i Bring the dialog here, - Provide me some examples..

</script>

2. I have a button like below inside content template of the dialog.

<ejs-button id="approveDialogOK" data-Val="" data-Id="" onclick="MyFunc(this)" content="Approve"></ejs-button>

I need to update the data data attributes when I show the dialog. Also MyFunc must retrieve the data values, How can I achieve this.

[Sujith Kumar Rajkumar]

Hi Sree, 

 

Greetings from Syncfusion support. 

 

Query – 1: “Render dialog inside grid column template” 

 

You can achieve this requirement by rendering a div element inside the column template’s script tag, then initialize and append dialog instance to this div element rendered inside each of the row cell as demonstrated in the below code snippet, 

 

// Grid’s column template 

<script id="template" type="text/x-template"> 

        <div class="custom-dialog"></div> 

</script> 

 

<script> 

    // Grid’s dataBound event function 

    function dataBound(args) { 

        // Get all the div elements rendered inside the cell using column template 

        var dialogElements = this.element.querySelectorAll('.custom-dialog'); 

        var i = 0; 

        while (i < dialogElements.length) { 

            var dialog = new ej.popups.Dialog({ 

                // Dialog content 

                content: 'This is a Dialog with content', 

                // The Dialog shows within the target which in this case is the row cell 

                target: dialogElements[i].parentElement, 

                // Dialog width 

                width: '150px' 

            }); 

            // Render initialized Dialog and append it to the div element 

            dialog.appendTo(dialogElements[i]); 

            i++; 

        } 

    } 

</script> 

 

We have prepared a sample based on this for your reference which you can find below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151929/ze/DialogInsideGridtemplate1411610025  

 

You can customize the dialog as per your requirement. To know more on the dialog control you can check the below help documentation link, 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/dialog/es5-getting-started/#control-initialization 

 

Query – 2: “I have a button like below inside content template of the dialog. I need to update the data attributes when I show the dialog. Also MyFunc must retrieve the data values, How can I achieve this” 

 

Before proceeding with this query please let us know the following details, 

 

• The dialog where you are performing this operation – Are you specifying the dialog rendered inside the grid on performing edit operations or a separate dialog that you have rendered.
• Which data attributes do you wish to update on showing the dialog and retrieve on clicking the dialog button?

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Sree]

Query 1: I will try this, but let me tell you, I am loosing the ease of using taghelpers here...

Query 2: Yes. when the dialog is inside the grid

[Sree]

Any update?

[Manivel Sellamuthu]

Hi Sree, 

Sorry for the delay getting back to you. 

Query: I will try this, but let me tell you, I am losing the ease of using tag helpers here... 

Since your requirement is to render the dialog inside the column template, it is not feasible use the tag helpers inside the template. 

Query – 2: “I have a button like below inside content template of the dialog. I need to update the data attributes when I show the dialog. Also MyFunc must retrieve the data values, How can I achieve this. 

the dialog is inside the grid 

 

We are unsure about this requirement. Could you please once again explain more about the requirement, which will help us to prepare the sample at the exact requirement. 

Regards, 

Manivel 

[Sree]

while (i < dialogElements.length) { 

            var dialog = new ej.popups.Dialog({ 

                // Dialog content 

                content: 'This is a Dialog with content', 

                // The Dialog shows within the target which in this case is the row cell 

                target: dialogElements[i].parentElement, 

                // Dialog width 

                width: '150px' 

            }); 

In the above code, how can I set the content to the column in the grid. For e.g. in my database I have a column, title, I need to use title here. 

[Sujith Kumar Rajkumar]

Hi Sree, 

 

Based on the provided information we suspect that you wish to update the dialog’s header property rendered inside the Grid columns. You can achieve this by using the dialog’s header property as demonstrated in the below code snippet, 

 

while (i < dialogElements.length) { 

            var dialog = new ej.popups.Dialog({ 

                // Dialog content 

                content: 'This is a Dialog with content', 

                // The Dialog shows within the target element 

                target: dialogElements[i].parentElement, 

                // The Dialog header can be set here 

                header: 'Dialog', 

                // Dialog width 

                width: '150px' 

            }); 

 

 

 

 

 

 

 

 

                                      
 

Modified sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151929/ze/DialogInsideGrid1482091356  

 

Please check below help documentation site for more information on the Dialog component, 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/dialog/es5-getting-started/#getting-started-with-javascriptes5 

 

If we misunderstood your query or if you require any further assistance please get back to us. 

 

Regards, 

Sujith R 

[Sree]

In the following example, how can I update the content from a field in the datasource?

while (i < dialogElements.length) { 

            var dialog = new ej.popups.Dialog({ 

                // Dialog content 

                content: 'This is a Dialog with content', 

                // The Dialog shows within the target element 

                target: dialogElements[i].parentElement, 

                // The Dialog header can be set here 

                header: 'Dialog', 

                // Dialog width 

                width: '150px' 

            }); 

[Sujith Kumar Rajkumar]

Hi Sree, 

You can achieve your requirement by defining the required column inside the template element and then set it as dialog’s content in the dataBound event as demonstrated in the below code snippet, 

<script id="template" type="text/x-template"> 

    <div class="custom-dialog">${ShipName}</div> 

</script> 

<script> 

    function dataBound(args) { 

        var dialogElements = this.element.querySelectorAll('.custom-dialog'); 

        var i = 0; 

        while (i < dialogElements.length) { 

            var dialog = new ej.popups.Dialog({ 

                // Column value defined inside the template element is set as the dialog content 

                content: dialogElements[i].innerText, 

                      . 

                      . 

            }); 

            // Template element’s innerText is cleared 

            dialogElements[i].innerText = ""; 

            // Render initialized Dialog 

            dialog.appendTo(dialogElements[i]); 

            i++; 

        } 

    } 

    </script> 

We have modified the previously provided sample based on this which you can find below, 

Sample: https://www.syncfusion.com/downloads/support/forum/151929/ze/GridApplication300034670  

Let us know if you have any concerns. 

  

Regards, 

Sujith R