What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column
What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column
We have successfully met your requirements by utilizing the Custom Contextmenu feature of the TreeGrid. We have managed to Insert, Delete, and Rename columns by following these steps:
Below is the sample code for reference:
App.Component.html:
<ejs-treegrid #treegrid
[dataSource]="data"
height="400"
childMapping="subtasks"
[treeColumnIndex]="1"
[contextMenuItems]="contextMenuItems"
(contextMenuClick)="contextMenuClick($event)">
<e-columns>
<e-column field="taskID"
headerText="Task ID"
width="80"
textAlign="Right"
editType="numericedit"></e-column>
</e-columns>
. . .
</ejs-treegrid>
App.Component.ts
export class AppComponent {
public data: Object[] = [];
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
public contextMenuItems: Object;
ngOnInit(): void {
this.data = sampleData;
this.contextMenuItems = [
{ text: 'Insert Column', target: '.e-headercontent', id: 'insert' },
{ text: 'Delete Column', target: '.e-headercontent', id: 'delete' },
{ text: 'Rename Column', target: '.e-headercontent', id: 'rename' },
];
}
contextMenuClick(args?: MenuEventArgs): void {
if (args.item.id === 'insert') {
let columnName = { field: 'priority', width: 100 };
this.treegrid.columns.push(columnName); // Insert Columns
this.treegrid.refreshColumns(); // Refresh Columns
} else if (args.item.id === 'delete') {
let columnName = 2;
this.treegrid.columns.splice(columnName, 1); //Splice columns
this.treegrid.refreshColumns(); //Refresh Columns
} else if (args.item.id === 'rename') {
this.treegrid.getColumnByField('taskName'); //Get the required column
this.treegrid.getColumnByField('taskName').headerText = 'Task details'; //Rename column name
this.treegrid.refreshColumns(); //Refresh Columns
}
}
}
Sample Link: https://stackblitz.com/edit/angular-grs5bm?file=app.component.ts
API link:
Documentation Link:
As I experiment with utilizing the React MUI Masonry Image List alongside the infinite scroll, I've found that they complement each other quite well. However, a challenge arises when appending new images to the Masonry image list. While I can success ...
Imagine having a div element: <div id="wrapper"> some text </div> How can you create an angular directive that changes the background based on user input? For instance, you might have tried: <div id="wrapper" color temperature="51"> ...
I'm facing a challenge with string truncation in my laravel and JS(jquery) app. Initially, I suspected it was an issue with the backend (as indicated in my question here: Laravel Truncating Strings). However, after thorough debugging, I discovered tha ...
I'm working with a textbox that is part of a table column. My goal is to make sure the entire column is not empty when the Ok button is clicked. If you have any suggestions on how I can achieve this, please let me know. var formatTableMandatoryVa ...
I have an electron app that executes a program and stores the output when data is received. My goal is to showcase the content of this output within an html pre element. One approach I can take is to create a variable and continuously add the output data ...
I am struggling with validating whether a username is already taken. I have been attempting to determine if the username exists by utilizing the "post" method in jQuery. However, every time I execute this function, the script seems to skip to the end of th ...
I am attempting to identify sets of characters that contain a mix of letters and non-letter characters, with many of them being just one or two letters. const match = 'tɕ\'i mɑ mɑ ku ʂ ɪɛ'.match(/\b(p|p\'|m|f|t|t ...
As I dive into the world of web development, I am currently working on crafting a blog dashboard. For the text editor, I've opted to use React Quill. While following the documentation, I came across a tutorial that includes an 'on change' ha ...
Wondering if there are any ways, possibly through JavaScript or CSS, to avoid having page breaks within <tr> elements specifically in Firefox. Given that FF does not yet fully support page-break-inside, I assume this might need to be addressed using ...
Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...
I am currently working on an Angular 11 application where I have implemented an icon to trigger the loading of a graph. However, I have noticed that there is a delay in loading the graph when the icon is clicked. To prevent users from triggering the icon m ...
I am looking to showcase images stored in an array called "image" within another array named product. Essentially, if a product has an array of 3 images, I want to display all 3 images, and so on. Here is the code snippet: <template> <div c ...
Would it be feasible to emphasize the border of a <tr> and add a background-color to the same <tr> within the table? ...
Currently, I am utilizing my environment variables by directly referencing process.env.NODE_ENV throughout my application. While this method works, it is becoming challenging to manage and keep track of. Therefore, I would like to consolidate all these var ...
Currently, I am retrieving a row from a Cassandra table called "emp". My objective is to pass the data retrieved from the JavaScript file to a Jade file in order to display this information on the user interface. In my JavaScript function: router.get(&a ...
As a beginner working with the Google Maps Javascript API v.3, I have written some code to initialize a map, perform an address lookup using the geocoder, re-center the map based on the obtained lat long coordinates, and place a marker. However, I am facin ...
I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...
My payment gateway component includes a feature where selecting credit card triggers the _formatCreditCard method to format the credit card number like this: 4444 2442 4342 3434 This is the function in question: _formatCreditCard: function() { var n ...
Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...
I have successfully connected knex with mysql and am working on a login form linked to a mysql database. Currently, I am performing a login check and I'm curious if there is any distinction between the following two queries: knex().select("id").from( ...