Hello,
I'm inquiring about the grid toolbar.
I'm using a custom toolbar.
As you can see, if there are no changes, the toolbar is disabled.
The toolbar is active only if the contents of the grid have been modified.
<ejs-grid gridLines="Both created="IndexGridDataBinding" queryCellInfo="DesignQueryCellEvent" actionFailure="ActionFailure" cellEdit="IndexCellEdit" toolbar="toolbarItems" ToolbarClick="ToolbarClick" cellSaved="cellSaved">
'Cancel' is a function that your company provides.
If I press Cancel, there will be a window that you can confirm as shown in the picture above.
After the function 'toolbarClick' is finished, this confirmation window is created.
Therefore, the buttons on the toolbar have already been deactivated since the confirm window was created.
If you press the cancel button on the confirmation window, the customized buttons are deactivated even though there are still changes.
I've tried using 'actionbegin', but in my grid, 'actionbegin' is only activated when 'refresh' is applied and the 'actionbegin' function cannot be executed by pressing any button.
This is the problem I've been through.
Q1. I want to keep the button active even if I press the cancel button on the confirm window.
I also share the code.
List<object> toolbarItems = new List<Object>();
toolbarItems.Add(new { text = "Issue", disabled = true, id = "IndexGrid_Issue", prefixIcon = "e-icons e-paste" });
toolbarItems.Add(new { text = "Save", disabled = true, id = "CustomSaveBtn", prefixIcon = "e-icons e-update" });
toolbarItems.Add(new { text = "Cancel", disabled = true });
<ejs-grid gridLines="Both" allowResizing="true" allowSelection="true" allowTextWrap="true" width="auto" height="690px" actionBegin="ActionBegin" created="IndexGridDataBinding" queryCellInfo="DesignQueryCellEvent" actionFailure="ActionFailure" cellEdit="IndexCellEdit" toolbar="toolbarItems" ToolbarClick="ToolbarClick" cellSaved="cellSaved">
<e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
<e-grid-editsettings allowAdding="false" allowEditing="true" allowDeleting="false" mode="Batch"></e-grid-editsettings>
<e-grid-selectionsettings cellSelectionMode="Box" mode="Cell" type="Single"></e-grid-selectionsettings>
<e-grid-columns>
@*<e-grid-column field="SNO" headerText="SNO" headerTextAlign="Center" visible="false" textAlign="Left" width="140"></e-grid-column>*@
<e-grid-column field="MTO_KEY" headerText="MTO KEY" headerTextAlign="Center" textAlign="Left" width="140"></e-grid-column>
<e-grid-column field="DESCRIPTION" headerText="DESCRIPTION" headerTextAlign="Center" textAlign="Left" width="220" edit="@(new { create = "Index_Create", read = "Index_Read", destory = "Index_Destory", write = "Index_Write" })"></e-grid-column>
<e-grid-column field="UNIT" headerText="UNIT" headerTextAlign="Center" textAlign="Left" width="100" edit="@(new { create = "Index_Create", read = "Index_Read", destory = "Index_Destory", write = "Index_Write" })"></e-grid-column>
</e-grid-columns>
</ejs-grid>
function cellSaved(args) {
var indexGrid = document.getElementById('IndexGrid').ej2_instances[0];
var indexGridData = indexGrid.getBatchChanges().changedRecords;
//var toolbarObj = document.querySelector('.e-toolbar').ej2_instances[0];
if (indexGridData.length > 0) {
indexGrid.toolbarModule.toolbar.tbarItemsCol[0].disabled = false;
indexGrid.toolbarModule.toolbar.tbarItemsCol[1].disabled = false;
}
}
function ToolbarClick(args) {
var indexGrid = document.getElementById("IndexGrid").ej2_instances[0];
var indexChangeData = indexGrid.getBatchChanges().changedRecords;
var seqList = document.getElementById('SeqType').ej2_instances[0];
var seqNo = seqList.itemData;
if (args.item.properties.text == 'Cancel') {
indexGrid.toolbarModule.toolbar.tbarItemsCol[0].disabled = true;
indexGrid.toolbarModule.toolbar.tbarItemsCol[1].disabled = true;
}
}
Hi TaeWook,
Thanks for contacting Syncfusion support.
If you use the toolbar item text as ‘Cancel’, it works as a built-in Cancel button. So, clicking the cancel button will show the confirmation Dialog for Batch edit. If you want to perform your own action on the Cancel button click, you need to set the args.cancel as true in the toolbarClick event. Please find the below code example for your reference.
if (args.item.properties.text == 'Cancel') { args.cancel = true; // prevent the default action alert('do your action here'); } }
|
Still, if you have any concerns, kindly explain what did you want to do with the Cancel button.
Regards,
Rajapandiyan S