Custom command (server-side page handler), confirmation dialog customization

[Lukáš Kubis]

Hi,

I'm working on the application where I have DataGrid with column that contains two commands: Delete, and Restore. I've found out how to allow deleting, how to display confirmation dialog, how to handle deletion in server-side page handler, but I have no clue how to:

• customize confirmation dialog text
• display confirmation dialog for custom command (not built-in ones like Delete, Edit, etc.)
• handle custom command in server-side code

I've created simple application on https://github.com/lkubis/AspNetCore.SyncfusionPlayground, so just run it and navigate to /Grid/DeleteRestore page.

Thanks for any suggestions

Lukas

[Seeni Sakthi Kumar Seeni Raj]

Hi Lukáš, 

 

Greetings from Syncfusion. 

 

Query: command column confirmation dialog customization – (customize confirmation dialog text, display confirmation dialog for custom command (not built-in ones like Delete, Edit, etc.)) 

 

We have validated your query and created a sample based on your requirement. Here, we have bind the grid with remote data using UrlAdaptor. We have customized the delete confirm dialog message by using dataBound event of the grid and beforeOpen event of the dialog. Refer the below code snippets and sample for your reference. 

 

[code snippets] 

... 

 

@{ 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Delete", buttonOption = new { content = "Delete", cssClass = "e-flat e-details" } });  

} 

 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})" dataBound="dataBound"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true" showConfirmDialog="true"></e-grid-editSettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 

    <e-grid-columns> 

        ... 

       <e-grid-column headerText="Manage Records" width="120" commands="commands"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

... 

 

<script> 

 

    function dataBound(args) { 

        this.editModule.dialogObj.beforeOpen = function (args) { 

            var prod = this.targetEle.ej2_instances[0].getSelectedRecords()[0].OrderID;    //get the corresponding row OrderID 

            this.targetEle.ej2_instances[0].localeObj.currentLocale.ConfirmDelete = "Do you really want to delete the product " + prod + " ?";   //change the default delete dialog message in locale object 

            this.content = "<div>" + "Do you really want to delete the product " + prod + " ?" + "</div>";   //change the default delete dialog message 

        } 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid-1973759568  

 

Query: Restore - display confirmation dialog 

 

We are quite unclear about this requirement. Could you please provide more information(what do you want to perform while clicking restore) regarding this requirement. It will be helpful to provide better solution. 

 

Regards, 

Seeni Sakthi Kumar S 

[Lukáš Kubis]

Hi,

Delete works fine now, thanks.

Regarding the restore functionality. I'll try to explain. Each row has Deleted(boolean) field, and based on the value, the Delete, or Restore buttons are visible. When a user clicks the Delete button, the confirmation dialog is displayed, and action is handled in server-side code (It already works). But when the user clicks the Restore button, I'd like to display the same confirmation dialog (with different text of course), and handle the action in server-side code too. But I don't know how. 

Check my sample application https://github.com/lkubis/AspNetCore.SyncfusionPlayground. When you run it, the page displays grid with 10 rows, and each row has Delete button. After clicking the Delete button - the record is deleted - Delete button is hidden - Restore button is visible

I've found out that I can handle commandClick event, but I don't know how to trigger the confirmation dialog, how to pass data, and how to invoke page handler.

Best regards

Lukas

[Seeni Sakthi Kumar Seeni Raj]

Hi Lukáš  

 

Query: But when the user clicks the Restore button, I'd like to display the same confirmation dialog (with different text of course) 

 

We could see you would like to add the custom button in the column with the custom functionality like restoring action. We have rendered an external dialog and it has been opened the in the click event of the custom button Restore. Refer to the following code example. 

 

[code snippets] 

... 

 

@{ 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Restore", buttonOption = new { content = "Restore", cssClass = "e-flat e-details" } }); // custom 

} 

 

    <div id="dialog"></div> 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})" commandClick="commandClick" dataBound="dataBound"> 

    <e-grid-columns> 

        ... 

   </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    function dataBound(args) { 

        this.editModule.dialogObj.beforeOpen = function (args) { 

            var prod = this.targetEle.ej2_instances[0].getSelectedRecords()[0].OrderID; 

            this.targetEle.ej2_instances[0].localeObj.currentLocale.ConfirmDelete = "Do you really want to delete the product " + prod + " ?"; 

            this.content = "<div>" + "Do you really want to delete the product " + prod + " ?" + "</div>"; 

        } 

        var dialog = new ej.popups.Dialog({ 

            // Enables the footer buttons 

            buttons: [ 

                { 

                    // Click the footer buttons to hide the Dialog 

                    'click': (e) => { 

                        dialog.hide(); 

                    }, 

                    // Accessing button component properties by buttonModel property 

                    buttonModel: { 

                        //Enables the primary button 

                        isPrimary: true, 

                        content: 'OK' 

                    } 

                }, 

                { 

                    'click': () => { 

                        dialog.hide(); 

                    }, 

                    buttonModel: { 

                        content: 'Cancel' 

                    } 

                } 

            ], 

            target: document.getElementById("Grid"), 

            // Dialog width 

            width: '450px', 

            visible: false 

        }); 

        dialog.appendTo('#dialog'); 

    } 

 

    function commandClick(args) { 

        if (args.commandColumn.type == "Restore") 

        document.getElementById("dialog").ej2_instances[0].content = "Do you really want to restore the product " + args.rowData.OrderID + " ?";       //assigning dialog text 

        document.getElementById("dialog").ej2_instances[0].visible = true; 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample946744058  

 

Please get back to us if you need further assistance. 

 

Regards, 

Seeni Sakthi Kumar S 

[Lukáš Kubis]

Hi,

Did you check my sample application that I've created for this purpose?

Grid provides built-in functionality for deleting rows including:

- showing confirmation dialog

- sending POST request to server (CRUDModel with Action = "remove")

Is it possible to add custom command that behaves exactly as same as Delete? Because in your sample, you just display the popup, not dialog,user is still able to interact with Grid

Best regards

Lukas

[Lukáš Kubis]

Hi,

I've already found a solution. If you're interested in, just take a look on my repo https://github.com/lkubis/AspNetCore.SyncfusionPlayground

Best regards

Lukas

[Seeni Sakthi Kumar Seeni Raj]

Hi Lukes,  

 

Thanks for the update.  

 

We are happy to hear that your requirement has been achieved an you are good to go. 

 

Regards,  

Seeni Sakthi Kumar S