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:
I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...
I have an item that contains data which I need to display. {"text": "active user active user213123 idle user234234234 loggedout userafdadf" }, To extract the content, I used the following code: Response = message.s ...
I'm struggling to fix an error in my JavaScript code. I created a script to display a tab indicator when a tab is clicked, but I keep getting the error message: "Property 'style' doesn't exist on type 'Element'". The tabs them ...
Today, I am facing an interesting challenge. I need to extract the page source of a webpage that includes an iframe. Surprisingly, when using the PhantomJSDriver with the code snippet below, I am only able to retrieve either the page content or the iframe ...
I am trying to achieve a specific task where I need to move one term under another in SharePoint. However, despite my efforts using JSOM and SharePoint 2013, I have not been able to find a direct method for moving terms. The code snippet I have used below ...
I am facing an issue with a webpage that contains a script tag in the HEAD section: <script src="somescript.js" type="text/javascript" async></script> Since it has the async attribute, this script loads asynchronously, allowing the browser to ...
Array#map and Array#filter both create a new array, effectively iterating over the original array each time. In languages like rust, python, java, c#, etc., such expression chains only iterate once, making them more efficient in certain cases. While this ...
I'm having trouble incorporating my variable into this specific string: var liPad = 20; $(this).css({'width' : width , 'height' : height, 'padding' : "'0px' + liPad + 'px'"}); The desired outcome is ...
I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...
While working with Vue.js in IntelliJ IDEA, I encountered a small problem related to defining component templates. The issue is that IntelliJ seems to struggle when the template spans more than one line and attempts to concatenate them together. For examp ...
I am currently developing a website using Django and I am in need of a popup window that can display logging messages and automatically refresh itself every N seconds. In order to achieve this, I am utilizing the standard Python logger, JavaScript, and Daj ...
I am presenting JSON data that looks like this: [ { "id": "i_1", "name": "abc", "address": [ { "city": [ "city1", "city2" ] }, { "city": [ "city1", "city2" ...
I am currently exploring how to change the content of a div based on button values, utilizing angular2+. Below is my implementation in HTML and js export class TestComponent implements OnInit { title:string = "provas"; constructor() { } popula ...
Is there a way to determine if a function passed is a React Hook? isHook(useState); // returns true isHook(() => {}); // returns false; I am looking for a method to distinguish whether a function attached to an object property is a hook or not. In cas ...
Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...
I'm having trouble getting the Infinite Scroll feature to work on my website. I've successfully implemented Masonry and Will Paginate, but for some reason, the Infinite Scroll isn't functioning as expected. I suspect that the issue lies wit ...
My React component features a material table view, shown here: https://i.stack.imgur.com/OUVOD.png Whenever the delete icon is clicked in the table, I want to access the rowdata associated with that particular row. However, all I am able to retrieve is ...
I have a collection of objects and I'm looking for a way to empower the user to choose which attributes they want to import into the database. Is there a method to map and generate a separate array containing only the selected properties for insertion ...
Struggling to create smooth camera movement between two points, trying to implement the function below. Currently working with the Globe from Chrome Experiments. function changeCountry(lat, lng) { var phi = (90 - lat) * Math.PI / 180; var theta = ...
I am trying to reduce every letter prop from the child component, Palata. How can I achieve this? index.js <Block letter="I" mb={16}> <Palata letter="I" start={4} end={9}/> <Wall/> <Empty/> <Palata le ...