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

Question

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 · Accepted Answer

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 · Answer

Thank you,It's working fine, same as my requirement

Sujith Kumar Rajkumar · Answer

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 · Answer

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 ajaxOnly for dialog templateinline editing working fine.2. Dialog custom size, save & cancel

Sujith Kumar Rajkumar · Answer

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