We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom Grid Toolbar disabled

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">


As much as it is a custom toolbar, we are using the 'ToolbarClick' function.

'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;
       }
}



1 Reply

RS Rajapandiyan Settu Syncfusion Team January 11, 2023 12:23 PM UTC

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.



    function ToolbarClick(args) {

       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


Loader.
Live Chat Icon For mobile
Up arrow icon