Grid editing in both mode (inline editing, Dialog editing) in command columns button

[Rizwan]

Hi,

Can you help grid editing in both options in command columns on the click button?

1. I want the (e-edit) button to click inline its works fine. 
2. But when I click (fa-file) button click the open dialog open with editing all grid columns editing option, not work, I want this option.

Here is my code attached in the text file also view screenshot.

Thank you.

Attachment: editingoption_496d514f.zip

[Sujith Kumar Rajkumar]

Hi Rizwan, 

 

Greetings from Syncfusion support. 

 

We checked your query – “To have both Inline and Dialog edit on different command button clicks in the Grid” and you can achieve this requirement by changing the Grid edit mode to “Dialog” and then selecting the row with its index and starting edit for it using the Grid’s selectRow and startEdit methods respectively in the commandClick event handler. The select and edit operation is performed in a time out function so that the edit mode can be switched and refreshed in the Grid. Then finally in the actionComplete event handler the edit mode is set back to “Normal” when the Grid’s edit mode is “Dialog” and the request type is “save” or “cancel”. This is demonstrated in the below code snippet, 

 

// Grid's commandClick event handler 

function commandClick(args) { 

        // Command button is checked 

        if (args.commandColumn.title === "Dialog") { 

            var gridObj = document.getElementById('grid').ej2_instances[0]; 

            // Grid's edit mode is changed to "Dialog" 

            gridObj.editSettings.mode = "Dialog"; 

            // Time out is used so that the updated edit mode in the Grid can be refreshed 

            setTimeout(function () { 

                // Row index retrieved using the target command button 

                var rowIndex = parseInt(args.target.closest('.e-row').getAttribute("aria-rowindex")); 

                //Row is selected and moved to edit state 

                gridObj.selectRow(rowIndex); 

                gridObj.startEdit(); 

            }, 100) 

        } 

} 

 

// Grid's actionComplete event handler 

function onActionComplete(args) { 

        var gridObj = document.getElementById('grid').ej2_instances[0]; 

        // Checked if record is saved or cancelled with "Dialog" edit mode 

        if (gridObj.editSettings.mode === "Dialog" && (args.requestType === "save" || args.requestType === "cancel")) { 

            // Edit mode is changed back to "Normal" 

            gridObj.editSettings.mode = "Normal"; 

        } 

} 

 

We have prepared a sample based on this for your reference. You can download it from the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156467/ze/GridApplication1386303875  

 

API links: https://ej2.syncfusion.com/documentation/api/grid/#selectrow 

                  https://ej2.syncfusion.com/documentation/api/grid/#startedit 

                  https://ej2.syncfusion.com/documentation/api/grid/#commandclick 

                  https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Rizwan]

Thank you,

It's working fine, same as my requirement

[Sujith Kumar Rajkumar]

Hi Rizwan, 

You’re welcome. We are glad to hear that the provided solution worked for you. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R  

[Rizwan]

Hi,

More enhensmnet in the condation.

1.

The only Dialog showing a customize template because I have received a lot of data in the backend. it does not show all in grid columns.

Therefore is ask you how to define the dialog customize template shows.

(some think like)
var gridObj = document.getElementById('dialogcustomze').ej2_instances[0]
partial view call by ajax

Only for dialog template
inline editing working fine.

2. 

Dialog custom size, save & cancel

[Sujith Kumar Rajkumar]

Hi Rizwan, 

 

You can find the response for your queries below, 

 

Query – 1: “The only Dialog showing a customize template because I have received a lot of data in the backend. it does not show all in grid columns. Therefore is ask you how to define the dialog customize template shows.” 

 

We suspect your requirement is to use Dialog template to display additional fields for edit which are not displayed in the Grid columns. If so you this requirement is documented in the below help documentation link which you can check for more details, 

 

Dialog template editing: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#dialoginline-template 

 

Sample based on this for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156467/ze/GridApplication831804775  

 

Query – 2: “Dialog custom size, save & cancel” 

 

We are not able to clearly understand your requirement in this query. Do you wish to modify the size of the edit Dialog, if so you can achieve this by modifying the Dialog height and width in the actionComplete event as demonstrated in the below code snippet, 

 

// Grid’s actionComplete event handler 

function actionComplete(args) { 

        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

            // Height and Width of edit dialog is updated 

            args.form.closest('.e-dialog').style.width = "90%"; 

            args.form.closest('.e-dialog').style.height = "90%"; 

        } 

} 

 

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

 

Regards, 

Sujith R