I have a column with checkboxes. I'd like the user to be able to press the down arrow, go to the next checkbox and press space to toggle the checkbox.
I don't want to select the rows, I just want to edit the checkbox on the current row.
I was able to create a custom cell renderer, but I don't know how to tell 'when this cell is selected, select the checkbox inside of it'.
This is how the column currently looks like:
You can listen to cellKeyDown event from AgGridVue like so:
<AgGridVue
style="height: 100vh; width: 100%"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
#cellKeyDown="onKeyDownHandler($event)"
/>
And add method/function:
function onKeyDownHandler(params) {
const { colId } = params.column;
if (colId === 'isValid' && params.event.code === 'Space') {
params.node.setDataValue(colId, !params.value);
}
}
That checks if key was pressed in your isValid column, and that it is Space key, if it is, it toggles the cells value.
Here's a quick sandbox/stackblitz: https://stackblitz.com/edit/vue-khblqw?file=src/App.vue
Related
I have created a table component in Pentaho in which I add a column with a hyperlink of the format https://www.aaaa.com/id.
It correctly shows in the table.
Now I want to create another hyperlink in the same table, but it has format
https://www.aaaa.com/probe&bbbbb%20&bbb$probe2.
How can I make it show only the field and not the path?
I have achieved something similar but clicking anywhere in the row the page is opened while I want it to only open the hyperlink.
you have to write a function under click Action under advance property something like below.
tableData[e.rowIdx][1] is a column name where you have to specify the column where you have to specify the click event.
function testClick(e) {
var id = e.tableData[e.rowIdx][1];
window.open('/pentaho/api/repos/%3Apublic%3Asample%3Adashboards%3Aname.wcdf/generatedContent?p_site='+id,"_self");
}
also you can write CSS to put underline and hover change color.
also put below code for all the table columns where you don't want click event.
#tbl_waste_overviewTable tbody tr td:nth-child(2) {
pointer-events: none;
}
You should check the column name you want to achieve the click action on as below
function(obj) {
if(obj.category == 'Desired Column'){
// perform desired click action below
}
}
I have made list whose delegate is RowLayout consist of Button. The list takes data from cpp.
My problem is the button variable width. The button side changed based on data. I want to keep fix button side and wrap text
To give your Button a fixed width, just set the property with the same name to a fixed value.
The Button has a contentItem that is a Text. You can change the wrapMode there to Text.WordWrap
As the contentItem is of type Item you can't set the wrapMode like this:
Button {
width: 100
text: 'Very very long button description.'
contentItem.wrapMode: Text.WordWrap // Won't work
}
Instead you might use Component.onCompleted like this:
Button {
width: 100
text: 'Very very long button description.'
Component.onCompleted: contentItem.wrapMode = Text.WordWrap
}
I have placed a check box in the first column (zero) of my datatable. When the user selects the row, the check box switches icons, indicating that the row has been selected.
tr td:first-child {
text-align: center;
}
tr td:first-child:before {
content: "\f096";
/* fa-square-o */
font-family: FontAwesome;
}
tr.selected td:first-child:before {
content: "\f046";
/* fa-check-square-o */
}
The next stage is to capture another field in the row, and fire off a click event, this is what i'm having difficulty with. I'm using server side processing, using DataTables.net 1.9.4
In the past, I've used this method:
"fnRowCallback": function(nRow, aoData) {
$('td:eq(0)', nRow).html('<a class="btn btn-default" data-container="body" data-toggle="tooltip"' +
' onclick="ViewMessage(\'' + aoData[9] + '\');">' + "View" + '</a>');
}
however, I prefer using the FontAwesome icons.
UPDATE
Ok, so as recommended, I've created another function outside of the main DataTable :
$("#tblMessageDate").on("click", "tr", function () {
var iPos = oMessageDate.fnGetPosition(this);
var aData = oMessageDate.fnGetData(iPos);
var id = aData[9];
ViewMessage(id);
});
This now works, If I select any column within the row, in the sense that it fires off the ViewMessage function. However, this doesn't replace the icon with the checked icon. But, I do still have the icon in the first column (zero). And this works. So, how can I limit the selection of only column zero, using the above function?
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?
I want to change the font color of a row after a cell in that row has been edited and set to a certain value.
myStore is the dojo.data.ItemFileWriteStore associated to the dojox.grid.DataGrid dataGrid.
I have written this:
myStore.onSet = function(item, attribute, oldValue, newValue) {
if (item.myField == myValue) {
var index = dataGrid.selection.selectedIndex;
dojo.style(dataGrid.getRowNode(index), "color" , "red");
}
}
but unfortunately this doesn't make any effect...
UPDATE: I added the following style property: "backgroundColor" : "red". Well, the background color of the row changes to red, but when the mouse moves away from the row, the color changes back to the default! It might be that some default event handlers restore the default styles...
The dojo.style line works if you call it by itself. Either your function isn't being called at all, the if's condition false or there is no row selected and you are getting an invalid number for the index. (You can put some console.logs there to check)