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?
Related
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
I am trying to update de viewport of el-table in Element.io as I set the current row (setCurrentRow) using the down button. I have tried:
this.$refs.SearchTable.syncPostion();
this.$refs.SearchTable.updateScrollY();
My current call function is :
selectUpFromSearchTable(){
if(this.SearchResult.length > 0 && this.rowIndex-1 >= 0){
this.rowIndex--;
}
else{
this.rowIndex;
}
// Update selected element in table.
this.$refs.SearchTable.setCurrentRow(this.SearchResult[this.rowIndex]);
// function to update table scroll position here this.$refs.SearchTable.updateScrollY(this.rowIndex);
}
My goal is for the table to update its scroll position as I change the selected row. Any ideas how I could do this using a native element.io/vue function?
Turns out it was more of a HTML DOM manipulation.
The code to select the current row and ask it to come into view was:
var ScrollTable = document.querySelector('.SearchTable');
var innerTable = ScrollTable.querySelector('.el-table__body');
var innerTbody = innerTable.querySelector('tbody');
var currentRow = innerTbody.querySelector('.current-row');
currentRow.scrollIntoView();
i'm using jquery datatable with responsive
the (+) responsive sign show correct when screen size decrease
i had event row click on the table
$('#datatables tbody').on('click', 'tr', function (e) {//Code});
My problem that the responsive button fires both function
the responsive (Default) function that expand the row
and my row click event
is there a way to Prevent that
Edit : Same happens with any attached button on the row if the button is clicked it execute both button click event and row click event
I fixed the problem with UGLY workaround
first i added empty td index 0 so that the responsive button show on it
second i changed the event from tr click to td click
then check for the td index
$('#datatables tbody').on('click', 'td', function (e) {
var tdIndex = this.cellIndex;
if (tdIndex == 0)
{//For Responsive Click leave Empty
}
else { //Normal Code}
i still waiting a better solution
Try https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html
if that does not help please assign a class to the column like:
"columns": [
{ "data": "MyColumn", "className": "toggle-btn-add" }
]
and call it like:
$('#datatables tbody').on('click', 'td.toggle-btn-add', function (e) {//Code});
Hope this helps
Using dojo, I create a chart with ColumnsPlot.
The chart is created and displayed the way I want it.
In order to handle a click on a column and to change the color of the clicked column I have the code below:
var handler = barChart.connectToPlot("default", function (event) {
if (event.type == "onclick") {
var currentSeriesData = event.run.data;
barChart.updateSeries("Yearly Offense Count", reverseColors(currentSeriesData, event.index));
barChart.render();
}
});
And the reverseColors is:
reverseColors = function (data, index) {
var tempData = [];
for (var i = 0; i < data.length; i++) {
tempData.push(data[i]);
if (i == index) {
tempData[i].fill = "red";
} else {
tempData[i].fill = "green";
}
}
console.log(i + " - " + tempData[i].fill);
return tempData;
}
I am testing in Google and using the Developers Tools to debug. If I set a break point inside the if statement and debug the app, the barChart is updated and the clicked columns get a red color, and all the others are green (as desired).
If I am not debugging, the barChart is updated, but all columns are green (originally chart is created with all green columns except one red column).
The reverseColors function returns the data in the correct format and wiht the correct fill while debugging, and when not debugging in the console I have 1 red and the rest of the items are green, as expected. But my chart has only green columns.
What am I messing up?
Dojo beginner!
Edit: Doesn't work in Chrome, works once in a blue moon in Firefox, and works fine is IE8.
The chart had a Highlight defined.
Removing the Highlight solved the problem.
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();