Modify the header template for the expandable rows column in AngularJS ui-grid

Is there a way to change the header of the expandableRow Column in ui-grid? I'm having trouble figuring out how.

https://i.sstatic.net/ZbDYj.png

Specifically, I am referring to the circled plus symbol in the image above. I want to replace this with a different button that serves a completely separate function.

I tried adding my own columnDef with field: "expandableRow" and a headerCellTemplate, but it resulted in an error about duplicated fields (and broke my grid). I couldn't find any information about this in the documentation. Can anyone guide me on how to add a template file to customize what is shown in the cell?

EDIT: Just to clarify, I don't want to entirely remove the column as suggested in another similar question. I still want to keep the expanding rows functionality. My only objective is to modify the expand all button highlighted in the image above.

javascriptangularjsangular-ui-grid

Answer №1

Check out this plunker for a solution: http://plnkr.co/edit/QOqIxoArHgBCyP3iDVfa?p=preview

I implemented $timeout to hide the expand all button:

$timeout(function(){
    var x = document.getElementsByClassName('ui-grid-header-cell')[0];
                if (x != null) {
                  var y = x.getElementsByClassName('ui-grid-icon-plus-squared')[0];
                  if (y != null) {
                      x.style.backgroundColor = "white"; // "#009933";
                      y.style.visibility = "hidden";
                  }
                }
  });

Alternatively, you can modify the default expandableTopRowHeader as demonstrated in this plunker: http://plnkr.co/edit/4ChfeZ4cjc8RC9ARdTde?p=preview

$templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ng-if="grid.options.showExpandAllInHeader"><div class="ui-grid-cell-contents"><i ng-class="{ "ui-grid-icon-plus-squared" : !grid.expandable.expandedAll, "ui-grid-icon-minus-squared" : grid.expandable.expandedAll }" ng-click="grid.api.expandable.toggleAllRows()">'
);

Add the following option to the gridOptions: showExpandAllInHeader : false

To customize the button functionality, change the ng-click attribute in the button code like shown in this plunker: http://plnkr.co/edit/zzYI9Sn1qJNxgub6dpxQ?p=preview

$templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ><div class="ui-grid-cell-contents"><i class="icon-cog" ng-click="grid.appScope.main.test()">'
); 

vm.test = function(){
    alert('Hey!');
  }

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

How can I make the expired date display in red color in a JavaScript date property?

In my HTML, I have 4 different dates. The expired date "END MAR 20" should be displayed in red color instead of green. The next date, "END APR 29," should be in green color. All preceding dates should also be displayed in red. I have successfully filtered ...

javascriptjqueryhtmlcolors

Add objects to a web address that leads nowhere but can still be linked to

It has come to my realization that the vagueness of my question might be obstructing my search efforts online. Here is the scenario: I am aiming to create a URL structure like this: http://app.myurl.com/8hhse92 The identifier "8hhse92" does not correspo ...

javascriptphpangularjsurl

Substitute terms with the usage of array map

Here is an array for you (2) ['beginning=beginner', 'leaves=leave'] as well as a string its beginner in the sounds leave that has been converted to an array using the following code var words = text.split(' '); My goal ...

javascriptjquerytypescript

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

Looking for a way to dynamically append a child element within another child

Struggling to include a new child within a specific child in Json myObject:any[] = []; this.myObject = { "type": "object", "properties": { "first_name": { "type": "string" }, "last_name": { "type": "string" }, } } addF ...

javascriptangulartypescript

Disregard periods in URLs when configuring nginx servers

While developing with Vite in development mode via Docker on my Windows 10 machine, I encountered an issue where the local custom domain would not load due to a required script failing to load. The specific script causing the problem is /node_modules/.vit ...

javascriptdockervue.jsnginxvite

Ways to assign an identification attribute to HTML elements within innerHTML

Utilizing Ajax in conjunction with php $("#test1").click( .... function(data){ document.getElementById("test2").innerHTML=data; } ) php will return the data echo "<input type='text' id='test'>"; Seeking adv ...

javascriptphpajax

How to extract value from the URL in NextJS

I am attempting to pass a value through the URL and then extract that value in search.js using a router. However, I keep encountering this error: TypeError: Cannot read properties of undefined (reading 'q') <form onSubmit={handleSubmit}&g ...

javascriptreactjsnext.js

Recursive React components. String iteration enhancement

In my React app, I am trying to create a string hierarchy from an object. The object structure is like this: { name: 'name1', parent:{ name: 'name2', parent:{ name: 'name3', parent: null }}} My plan is to use a state variable ...

javascriptreactjsrecursion

Is your Jquery validation malfunctioning?

I am currently facing a challenge with required validation on an asp.net page. In order to validate the inputs, I have implemented multiple controls which can be hidden or displayed based on certain conditions. These controls include checkboxlists, dropdow ...

javascriptjqueryhtmlasp.netcss

When the PHP response is received by AJAX, an error occurs due to a failed JSON parsing request

Every time I try to run my small JavaScript code with an AJAX call to PHP, it keeps coming back with a JSON parser error. In the PHP code, I can see that the JSON is populated with an array like this: json encode: {"Year":"2012","Make":"Ford","Model":"Tau ...

javascriptphpjqueryjsonajax

What is the key element missing from my code while attempting to integrate Threejs into React?

I recently undertook the task of converting a project from vanilla Three.js to React. For reference, here is the original project: https://codepen.io/Mamboleoo/pen/rNmRqeK And here is the code I have been working on: You can view the code in CodeSandbox ...

javascriptreactjsreact-hooksthree.js

Download button on Rshiny platform for collecting numerous files from different sources

I am on a quest for knowledge regarding the inclusion of a download button in my application that consolidates various files into a zip archive. Within my application, there are a timeline and a datatable, with files linked to entries on the datatable. Th ...

javascriptrshiny

Retrieve the value of the element and combine them together (The parseFloat function may not work as expected

The following code is what I am currently working with: var num1=$("#num1").val(); //the num1 value is 12.60 //html code for this number <input id="num1" value="12.60" /> num1=parseFloat(num1).toFixed(2); var num2=$("#num2").text(); //the num2 valu ...

javascript

How can I change a date string into a date object?

Seeking assistance: I am looking to generate the following: Sunday 4 October 08.30 - 10.30 CET Additionally, I would like to show the local timezone information below this line. Could someone recommend the most effective method for achieving this? Can ...

javascriptstringdateparsingmomentjs

The issue of file uploading not functioning properly with AngularJS on a lighttpd server is causing frustration

Currently in my project, we are utilizing the lighttpd server. I am attempting to upload a file and encountering two Response Headers. The first has a 301 status code (Moved Permanently) and the second has a 200 status code (OK). However, upon checking th ...

angularjsfile-uploadlighttpd

Tips for personalizing error messages for the "required" field by utilizing a dictionary feature on VeeValidate in Vue.Js

I am trying to update the error message that appears when an input field with the "cpf" rule is left empty (meaning it does not meet the "required" rule). I believe using the "dictionary method" with custom messages is the solution, but I am struggling to ...

javascriptvue.jsvuejs2vee-validate

What is the method for assigning a value to a JSON object using data from another JSON object?

I am faced with the task of setting the seqNo property in one JSON object, b, based on the id from another JSON object, a. How can I achieve this? var a = [{id: "Make", seqNo: 4}, {id: "Model", seqNo: 1}, {id: "XModel", seqNo: 2 ...

javascriptangularjsjson

Is it possible to transition an Angular application from Electron to a browser environment?

I have an existing Electron-based Angular application that was developed by someone else. I am interested in running it in my browser and potentially converting it into a Progressive Web App (PWA). Can this be done, and if so, what is the process? ...

angularjselectron

What is the best way to store the JSON data that is returned in a JavaScript function as a variable

My goal is to save the client's IP address in a variable after fetching it in JSON format from api.ipify.org. I have managed to display the IP if I alert the result, but I am struggling to store it in a variable. This code snippet works: <script& ...

javascriptjsonfunctionvariablesip-address