Dragging a child column in ag-grid can be made more efficient by also allowing the user to drag

My grid layout resembles the one shown in this image: https://i.sstatic.net/S7F0n.png

The ag-grid feature allows you to drag individual child columns (such as 'Game Name' or 'Bought') out from the parent column, dividing the parent into two. I am looking to disable this functionality so that when attempting to drag a child column like 'Bought', it will actually move the entire 'Game of Choice' column along with its children.

If disabling only the dragging of child columns while keeping the capability to drag parents intact is not possible, I am open to exploring alternative solutions.

Answer №1

If you're searching for something similar, take a look below:

https://www.ag-grid.com/javascript-grid-grouping-headers/#grouping-example-with-marrychildren-set

Marry Children

There are times when you want columns in a group to stay closely linked together. By setting the column group property marryChildren=true, this can be achieved. The example provided showcases the following:

  • Both 'Athlete Details' and 'Sports Results' have marryChildren=true.

  • If you try to move columns within these groups, you won't be able to drag them out of the group. For instance, attempting to drag 'Athlete' will not allow it to be moved out of the 'Athlete Details' group.

  • Attempting to move a non-group column like 'Extra 3' will prevent you from inserting it into the middle of a group, hence keeping the group intact.

  • You can place a column between groups (e.g., putting 'Extra 3' between 'Athlete Details' and 'Sports Results').

https://i.sstatic.net/k1CXW.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to retrieve individual sentences from a paragraph

I'm facing a challenge trying to identify the two shortest sentences from a collection of paragraphs. The structure of the paragraphs is as follows: <p class="some_paragraph">This is a sentence. Here comes another sentence. A third sentence.< ...

Programme for Server Login

After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...

Unable to expand the width of the video element

So I have encountered a situation like this The video displayed does not fully expand to the width of its containing element. This is what my HTML structure looks like - <div class="webcam"/> <div class="control-container"> </div> ...

Using Knex in ExpressJS to insert a list of entries into SQLite with unique field constraints

I'm currently facing an issue with inserting a list of exercises into an sqlite database. The app is built on express JS and I am utilizing sqlite3 and knex to handle interactions with the DB. My goal is to add a set of exercises into the table exerci ...

Accessing variables from outside the query block in Node.js with SQLite

I'm looking to retrieve all the rows from a table and store them in an array called "arr". I need to access this stored array outside of the query section. Is there a way for me to get all the rows outside of the db.each function so that I can continu ...

Creating a dynamic 3D camera view in three.js for navigating around the scene

As a newcomer to Three.js, I am looking to implement a fly-around camera in my scene. I have discovered that THREE.Geometry has a method called .computeBoundingSphere() and a property called .boundingSphere that provides me with the center and radius of t ...

Leverage the power of an HTML button to trigger a JavaScript function

To find the solution when inputting values for a, b, and c (for example, a=1, b=-3, c=-4), simply press the button. function solve(a, b, c) { let x1 = (-1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c))) / (2 * a); let x2 = (-1 * b - Math.sqrt(Mat ...

Guide on updating an object with an array in MongoDB through a request

In my attempt to update an object that contains an array in Mongo DB, the current structure is as follows: {id: 'idString', propA: propA, arrayB: [{propC: propC}, {propC: propD}, {propC: propE}] My goal is to send a request to update it to the ...

What is the best way to update the color of a v-select component?

https://i.sstatic.net/6VOIo.png Currently utilizing Vuetify for my project <v-select id="makeMeBlue" dense outlined :items="form.values.urlTypes" label="Single or Multi URL" v-model="form.values.urlType" ...

Choosing items while using the Orthographic camera in Three Js

Currently, I am working on an isometric level and facing issues while trying to select objects within the level. I have tried various solutions from Stackoverflow, such as this one Orthographic camera and selecting objects with raycast. However, none of t ...

Issue with jQuery .on('change') function not functioning correctly following a row being duplicated

Within my input form, I have implemented an on-click function that triggers an ajax call to submit a table row to the database. Upon submission, the row is then duplicated so that the user can input more data if necessary. The issue I am currently facing r ...

Using PHP to dynamically update image source upon clicking an upload button:

Is it possible to dynamically display a new image after uploading it using an ajax-upload script on a 'edit product' page for a shop products? On load, all thumbnails are fetched from the DB but when a user uploads a new file, I want the new imag ...

skip every nth element in the array based on the specified value

The Challenge I'm currently working on a graph that relies on an array of data points to construct itself. One major issue I've encountered is the need for the graph to be resizable, which leads to the necessity of removing certain data points ...

Make necessary changes to empty objects within a JSON array

Modify the null objects in a JSON array. I attempted to use map, but it did not update all the JSON objects. Here is an example of a JSON array: var response = { "code": null, "message": "Total 1 records found", "result": { "ordersList": [ ...

jQuery setup for doWhen

Struggling to get doWhen functionality to work properly. Here is my index.html setup: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dowhen.min.js"></sc ...

Determining the character encoding of a JavaScript source code file

For my German users, I want to display a status message with umlauts (ä/ü/ö) directly in the source file instead of requiring an extra download for messages. However, I'm having trouble defining the encoding for a JS source file. Is there a way si ...

Learn how to implement an HTML button that triggers your JavaScript function and shows the output of the code, generating a random token

Currently, I am in the process of creating an HTML page with a form that allows users to send email invitations to join a website. One of my requirements is to have a random token generated and displayed to the user before they submit the invitation. To ac ...

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

Navigational elements, drawers, and flexible designs in Material-UI

I'm working on implementing a rechart in a component, but I've encountered an issue related to a flex tag. This is causing some problems as I don't have enough knowledge about CSS to find a workaround. In my nav style, I have display: flex, ...

SyntaxError: The input on line one ended unexpectedly and was not caught

This issue is commonly associated with messy close parentheses, however, the error is occurring on line 1 of the file! Below is the javascript code from (filename: calculate.js) var colors = new Array(); colors["SILVER"] = -2; ... Although there is m ...