Introduction In certain situations, you may want to provide additional interactivity by displaying a custom dialog box whenever a value cell is double-clicked in a pivot table. This can be useful for showing detailed information, conducting validations, or initiating other custom actions. This article will guide you on how to create a custom dialog in the Blazor Pivot Table when double-clicking on a value cell. Creating a custom dialog box upon double-clicking a value cell In order to create a custom dialog when double-clicking on a value cell in a pivot table, you can utilize the DrillThrough event. This event is triggered upon clicking a value cell in the pivot table and allows for the creation of a custom dialog box. The code example below demonstrates how to create a custom dialog by using the Syncfusion Blazor Dialog Component when double-clicking a value cell in a pivot table. Note: To use the DrillThrough event in the pivot table, you must set the AllowDrillThrough property to true within the SfPivotView class. [Index.razor] @using Syncfusion.Blazor.PivotView @using Syncfusion.Blazor.Popups <SfPivotView TValue="ProductDetails" ID='PivotView' @ref="pivot" Width="100%" AllowDrillThrough="true"> ... <PivotViewEvents TValue="ProductDetails" DrillThrough="drillThrough"></PivotViewEvents> </SfPivotView> @*Custom Dialog Component.*@ <SfDialog Target="#PivotView" @ref="Dialog" Width="300px" ShowCloseIcon="true" @bind-Visible="@Visibility"> <DialogTemplates> <Header> Dialog </Header> <Content> <p> This is a custom dialog, you can update your custom validation here. </p> </Content> </DialogTemplates> <DialogAnimationSettings Effect="@AnimationEffect"/> <DialogButtons> <DialogButton IsPrimary="true" Content="CANCEL" OnClick="@OnBtnClick" /> </DialogButtons> </SfDialog> @code { SfPivotView<ProductDetails> pivot; private SfDialog Dialog { get; set; } private bool Visibility { get; set; } = false; private DialogEffect AnimationEffect = DialogEffect.Zoom; // Close the dialog unsing the button. private async Task OnBtnClick() { await Dialog.HideAsync(); } private async Task drillThrough(DrillThroughEventArgs args) { // Restrict the existing dialog here. args.Cancel = true; // And display the custom dialog here. await Dialog.ShowAsync(); } } In the above code example, inside the DrillThrough event method, we prevented the default drill-through dialog box from appearing by setting the args.Cancel property to true. Following this, we have created a custom dialog box using the Syncfusion Blazor Dialog Component and its properties, for instance, its title, message, size, and animation appearance, among others. You can modify this event as per your requirements to customize the dialog box and its contents. The following GIF image, which portrays the results of the code snippet mentioned above, Sceenshot You can refer to this GitHub sample for a practical demonstration of this code. Conclusion I hope you enjoyed learning how to create a custom dialog in a Blazor Pivot Table when double-clicking on a value cell. You can also refer to our Blazor Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to create a custom dialog in ASP.NET Core Pivot Table when double-clicking on a value cell. Implementing a custom dialog when double clicking on a value cell In certain situations, you may want to provide additional interactivity by displaying a custom dialog box whenever a value cell is double-clicked in a pivot table. This can be useful for showing detailed information, conducting validations, or initiating other custom actions. To achieve this, you can use the drillThrough event, which is triggered each time a value cell is double-clicked. Note: In order to use the drillThrough event, it is important to set the allowDrillThrough property to true. Here is a code example that shows how to create a custom dialog when double-clicking on a value cell. [Index.cshtml] <ejs-pivotview id="pivotview" width="100%" allowdrillthrough="true" drillthrough="drillThrough"></ejs-pivotview> In the code example above, we have suppressed the default drill through dialog from opening by setting args.cancel to true. Following this, we have created a custom dialog box using the EJ2 Dialog Component and its properties, for instance, its title, message, size, position, and animation appearance, among others. You can modify this event as per your requirements to customize the dialog box and its contents. The following screenshot, which portrays the results of the code snippet mentioned above, Sceenshot View Sample in GitHub Conclusion: I hope you enjoyed learning how to create a custom dialog when double-clicking on a value cell. You can refer to our ASP.NET Core Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
By default, for the confirmation dialog buttons of edit operations, the click event is bound in the source-level. The corresponding operations will be performed there and so this click event cannot be overridden. However, it is possible to bind click events to the dialog confirmation buttons by defining the custom toolbar items for ‘Delete’, ‘Update’ and ‘Cancel’ operations and rendering a custom dialog. In this custom dialog, the click events are bound to the buttons and the required operations can be performed here in addition to the default edit operations for these toolbar items. This is explained in the following steps for batch editing. First, initialize a dialog using the EJ2 Dialog Component and set the visibility as false using its visible property. // Initialize Dialog component let dialog = new Dialog({ // Enables modal dialog isModal: true, // Dialog content content: "This is a modal dialog", // The Dialog shows within the target element target: document.getElementById("dialog-target"), // Dialog width width: "300px", visible: false }); // Render initialized Dialog dialog.appendTo("#dialog"); Define the grid toolbar with custom toolbar items for ‘Delete’, ‘Update’ and ‘Cancel’ and disable the showConfirmDialog property in the grid’s editSettings. let grid: Grid = new Grid({ . . editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showConfirmDialog: false, mode: "Batch" }, toolbar: [ "Add", "Edit", { text: "Delete", tooltipText: "Delete", prefixIcon: "e-delete", id: "delete" }, { text: "Update", tooltipText: "Update", prefixIcon: "e-update", id: "update" }, { text: "Cancel", tooltipText: "Cancel", prefixIcon: "e-cancel", id: "cancel" } ] }); grid.appendTo("#Grid"); Then, define two button models for the dialog buttons – One for Confirmation dialog and other for no records are selected when the delete item is clicked. Bind click events for these buttons and perform the corresponding operation (‘Delete’, ‘Update’ or ‘Cancel’) based on the selected toolbar item using the flag variables. var buttons = [ { buttonModel: { content: "OK", cssClass: "e-flat", isPrimary: true }, click: confirmationClick.bind(this) }, { buttonModel: { content: "Cancel", cssClass: "e-flat" }, click: cancelClick.bind(this) } ]; var buttons1 = [ { buttonModel: { content: "OK", cssClass: "e-flat", isPrimary: true }, click: () => { dialog.hide(); } } ]; function confirmationClick(args) { if (isDelete) { isDelete = false; dialog.hide(); grid.deleteRecord(); } else if (isUpdate) { isUpdate = false; dialog.hide(); grid.endEdit(); } else if (isCancel) { isCancel = false; dialog.hide(); grid.closeEdit(); } } function cancelClick(args) { dialog.hide(); } Now, update the dialog content and buttons in the toolbar click event based on the clicked item and display the dialog using its show method. function toolbarClick(args) { dialog.buttons = buttons; if (args.item.id == "delete") { if (grid.getSelectedRecords().length !== 0) { isDelete = true; dialog.content = "Do you wish to delete the selected record?"; dialog.show(); } else { dialog.content = "No record selected for deletion"; dialog.buttons = buttons1; dialog.show(); } } else if (args.item.id == "update") { isUpdate = true; dialog.content = "Are you sure you want to save changes?"; dialog.show(); } else if (args.item.id == "cancel") { isCancel = true; dialog.content = "Are you sure you want to cancel changes?"; dialog.show(); } } The dialog is hidden using its hide method when clicking the dialog buttons. Since the Toolbar items – ‘Update’ and ‘Cancel’ only need to be active when the records are added or changed, they are disabled in the dataBound and batchCancel event and enabled if there are batch changes in the cellSaved event. function dataBound() { grid.toolbarModule.toolbar.enableItems(3, false); grid.toolbarModule.toolbar.enableItems(4, false); } function batchCancel() { grid.toolbarModule.toolbar.enableItems(3, false); grid.toolbarModule.toolbar.enableItems(4, false); } function cellSaved(args) { if ( (grid.getBatchChanges() as any).addedRecords.length !== 0 || (grid.getBatchChanges() as any).changedRecords.length !== 0 ) { grid.toolbarModule.toolbar.enableItems(3, true); grid.toolbarModule.toolbar.enableItems(4, true); } } Output You can find the samples here: TypeScript sample JavaScript (ES5) sample React sample
In JavaScript Tree grid, while using custom template for edit dialog, the inbuilt save and cancel buttons will be displayed for performing the necessary actions. But it is possible to remove these default dialog buttons and a custom button can be included in the dialog. The below code snippet explains how to remove the default dialog buttons and to include a custom button for delete action. <script type="text/x-jsrender" id="Template"> <input type="button" value="DeleteRecord" id="deleteItem" onclick="deleteRecord()"/> </script> <script type="text/javascript"> $(function () { dataSource: sampleData, childMapping: "subtasks", editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, editMode: "dialogEditing", dialogEditorTemplateID: "#Template" }, actionBegin: function (args) { //Codes for removing the save cancel buttons from Edit Dialog if (args.requestType == "openEditDialog") { $(".e-editform-btn").find(".e-save").remove(); $(".e-editform-btn").find(".e-cancel").remove(); } if (args.requestType == "openAddDialog") { $("#deleteItem").remove(); } }, //.. }) }); function deleteRecord() { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); selectedItem = treeObj.model.selectedItem; treeObj.deleteRow(); $("#TreeGridContainer_dialogEdit").ejDialog("close"); } </script> You can also find a sample to include a custom button in edit dialog here.Conclusion I hope you enjoyed learning about how to include a custom button in dialog editor.You can refer to our JavaScript TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In Gantt control, user can enable or disable required fields in both edit dialog box and add dialog box for all the predefined columns and custom columns with the help of “EditDialogFields” and “AddDialogFields” property. The provided fields in the “EditDialogFields” and “AddDialogFields” property alone will be displayed in the dialog box of the Gantt chart. Please refer the following code snippets for more details. Code snippets: ASP <body> <form id="form1" runat="server" //... <ej:Gantt ID="Gantt" runat="server" //... Load="Load"> <AddDialogFields> <ej:AddDialogField Field="Id" /> <ej:AddDialogField Field="Name" /> <ej:AddDialogField Field="StartDate" /> <ej:AddDialogField Field="Duration" /> </AddDialogFields> <EditDialogFields> <ej:EditDialogField Field="Name" /> <ej:EditDialogField Field="StartDate" /> <ej:EditDialogField Field="ExpectedDate" /> <%--To display custom column--%> </EditDialogFields> </ej:Gantt> <script> function Load(args) { var columns = this.getColumns(); columns.splice(2, 0, { field: "ExpectedDate", headerText: "Expected Date ", editType: "stringedit", mappingName: "ExpectedDate", //Provide this mapping name width: "180px" }); } </script> </form> </body> The following screen shots shows the output of the above code snippets. Add Dialog Window: (General Tab) Edit Dialog Window: (General Tab) Edit Dialog Window: (Tab for custom column) DisplayInGeneralTab: The “DisplayInGeneralTab” property in Edit Dialog fields and Add dialog fields is required to provide the support for displaying the fields of custom columns in the General tab of dialog box. By default the value of this property will be false. In the above Edit dialog box, to display the field of “ExpectedDate” custom column in General Tab, the following code snippets can be used in “EditDialogFields” property. Code snippets: ASP //... <EditDialogFields> <ej:EditDialogField Field="Name" /> <ej:EditDialogField Field="StartDate" /> <ej:EditDialogField Field="ExpectedDate" DisplayInGeneralTab="true"/> <%--To display this custom column field in General Tab--%> </EditDialogFields> //... The following screen shots shows the output of the above code snippets. Note:A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In Gantt control, user can enable or disable required fields in both edit dialog box and add dialog box for all the predefined columns and custom columns with the help of “EditDialogFields” and “AddDialogFields” property. The provided fields in the “EditDialogFields” and “AddDialogFields” property alone will be displayed in the dialog box of the Gantt chart. Please refer the following code snippets for more details. Code snippets: <body style="position: static; margin: 0px; padding: 2px"> @(Html.EJ().Gantt("Gantt"). //... .AddDialogFields(eve => { eve.Field("Id").Add(); eve.Field("Name").Add(); eve.Field("StartDate").Add(); eve.Field("Duration").Add(); }) .EditDialogFields(eve => { eve.Field("Name").Add(); eve.Field("StartDate").Add(); eve.Field("ExpectedDate").Add();//To display custom column }) .ClientSideEvents(eve => { eve.Load("Load"); }) .Datasource(ViewBag.dataSource) ) @(Html.EJ().ScriptManager()) <script> function Load(args) { var columns = this.getColumns(); columns.splice(2, 0, { field: " ExpectedDate", headerText: " Expected Date", editType: "stringedit", mappingName: "ExpectedDate", //Provide this mapping name width: "180px" }); } </script> </body> The following screen shots shows the output of the above code snippets. Add Dialog Window: (General Tab) Edit Dialog Window: (General Tab) Edit Dialog Window: (Tab for custom column) DisplayInGeneralTab: The “DisplayInGeneralTab” property in Edit Dialog fields and Add dialog fields is required to provide the support for displaying the fields of custom columns in the General tab of dialog box. By default the value of this property will be false. In the above Edit dialog box, to display the field of “ExpectedDate” custom column in General Tab, the following code snippets can be used in “EditDialogFields” property. Code snippets: MVC //... .EditDialogFields(eve => { eve.Field("Name").Add(); eve.Field("StartDate").Add(); eve.Field("ExpectedDate").DisplayInGeneralTab(true).Add();//To display this custom column field in General Tab }) //... The following screen shots shows the output of the above code snippets. ConclusionI hope you enjoyed learning about how to customize the dialog fields of Gantt in ASP.NET Web Forms.You can refer to our ASP.NET MVC Gantt feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Gantt example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In Gantt control, user can enable or disable required fields in both edit dialog and add dialog, for both the predefined and custom columns using editDialogFields and addDialogFields properties. The fields displayed in the editDialogFields and addDialogFields properties alone will be displayed in the Gantt dialogs. Please refer the following code snippets for more details. Code snippets: <body style="overflow: hidden; position: static; margin: 0; padding: 0;"> <div id="gantt" style="position: absolute; height:450px; width:1300px"></div> <script type="text/javascript"> $(function () { $("#gantt").ejGantt({ load:"load", //... addDialogFields: [ { field: "Id" }, { field: "Name" }, { field: "startDate" }, { field: "Duration" } ], editDialogFields: [ { field: "Name" }, { field: "StartDate" }, { field: "ExpectedDate" } //To display custom column ], }); }); function load(args) { var columns = this.getColumns(); columns.splice(2, 0, { field: "ExpectedDate", headerText: "Expected Date ", editType: "stringedit", mappingName: "ExpectedDate", //Provide this mapping name width: "180px" }); } </script> </body> The following screen shots shows the output of the above code snippets. Add Dialog: (General Tab) Edit Dialog: (General Tab) Edit Dialog: (Tab for custom column) DisplayInGeneralTab: The “displayInGeneralTab” property in edit dialog and add dialog fields is required to provide the support for displaying the fields of custom columns in the General tab of dialog box. By default the value of this property will be false. In the above edit dialog box, to display the field of “ExpectedDate” custom column in General Tab, the following code snippets can be used in “editDialogFields” property. Code snippets: //... editDialogFields: [ { field: "Name" }, { field: "StartDate" }, { field: "ExpectedDate", displayInGeneralTab: true } //To display this custom column field in General Tab ], //... The following screen shots shows the output of the above code snippets.
