I need to recalculate the table by calling recal after a row was selected by check box. If it is selected by clicking the row calling recal works. I copied the below code from plugin site
{formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
console.log("table ",table);
// cell.getRow().toggleSelect();
console.log("table ",table);
table.recalc();
}},
but nothing gets executed. The checkbox gets checked and the row highlighted. You can try my jsFiddle.
UPDATE 1
so it works if I click off the checkbox but I want the function to be triggered when the checkbox is clicked.
As the name suggest cellClick which should be called on cell element click there is another element which is considered cell and checkbox is contained inside cell that's why cellClick is not trigger when you click checkbox and triggered when click outside of checkbox
Issue
As Suggested by #EugeneOlisevich instead of listening to cellClick, Listening to rowSelectionChanged would be better option.
Instead of using table to call recalc as table reference is not created until first load completes.
Another way you can access recalc function is through this
...
rowSelectionChanged: function(e, row) {
this.recalc();
},
...
Issue
When you click editable column if row is selected then it will deselect the row
which can be solve by preventing event bubbling to parent through cellClick function.
...
{
title: "mn",
field: "mn",
editor: "number",
cellEdited: function(cell) {
aktualizuj_m(cell);
},
cellClick: function(e, cell) {
e.preventDefault();
e.stopPropagation();
},
},
...
Issue
As table reference is not created on first load here i added condition to not run loop until table reference is undefined/null
table && values.forEach(function(value, index) {
var row = table.getRow(index + 1);
if (row.isSelected() && value) {
calc = calc + value;
}
});
Issue
If you change mn column input to 0 then sum is not updated
which can be solved by updating condition.
...
if (typeof mnozstvi == "number") {
cell.getRow().update({
cena_m: cena * mnozstvi
});
}
...
Note: Negative range can be input in mn column
Here working example
You can try to use another event handler instead of listening to direct cell click or row selection (or it depends on behaviour you want)
Here is the link to fiddle to check the solution:https://jsfiddle.net/02phqxz8/
...,
rowSelectionChanged:function(data, rows) {
if(table) {
table.recalc();
}
},
...
What was changed:
Instead you can handle rowSelectionChanged event. Every time it is called, by clicking row, or clicking checkbox you can call recalculate for table. Just be sure to check teh table object by default, because the event is fired prior the constuctor return tha table itself.
Or as an option to avoid this additoinal check every time, you can subscribe to this event right after table is created.
You can use rowSelectionChanged
rowSelectionChanged:function(data, rows) {
if (updatedDataLength != data.length) {
updatedDataLength = data.length;
table.recalc();
}
},
var updatedDataLength = 0;
You need to add a local variable that could check data changed because the first time the table rendered, it will also call table.recalc() that will cause a problem of rendering the initial table.
So I suggest using to check updated data length to keep it simple rather than comparing whole data.
Or you can just add a flag var tableRendered = false;.
rowSelectionChanged: function(data, rows) {
if (!tableRendered) {
tableRendered = true;
} else {
table.recalc();
}
},
Related
I have a column in a DataTable in Jquery where in each row the cell respective to the column has a dropdown box inside of it.
I am rendering this dropdown by defining it in the 'columnDefs' options as such:
$(document).ready(function() {
$('#example').DataTable(
"columnDefs":[
{
"render": function(d,t,r){
var $select = $("<select></select>", {
"id": r[1]+"start",
"value": d,
"class": r[1]
});
$.each(times, function(k,v){
var $option = $("<option></option>", {
"text": v,
"value": v
});
if(d === v){
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
},
"targets": 2
}
]
)})
The data variable times in the $.each statement is just a variable that I am loading from localStorage, which consists of dates.
Since I want to wait for the data in the DataTables to be loaded before I select an item, I add an option called initComplete and in it I add the change() method as well as a method to store the change value into localStorage:
"initComplete": function(settings, json) {
$(function() {
$('.SomeDate').change(function() {
localStorage.setItem('storeddata', this.value);
});
if(localStorage.getItem('storeddata')){
$('.SomeDate').val(localStorage.getItem('storeddata'));
}
});
}
The dropdown <select> tag generated in the front end looks as such:
<select id="SomeDatestart" value="SomeValue" class="SomeDate"></select>
For some reason when I select an item in the dropdown box, I don't get any results stored in the localStorage.
I could have made the selector select the select tag id instead of the select tag class, but even while trying that, I was not able to trigger a change() event.
However I tried to take the change() method above, and isolate it from the datatable function, and create a dummy dropdown box with the same select tag and sample <option> tags, and after doing that, I was able to successfully trigger the change() method, and similarly store the value in localStorage.
Am I missing something? Perhaps there is a different way of triggering the change() method for selections in DataTables?
Currently working on jquery clone where user click add it will clone the div perfectly but I have dropdown. If user select cellphone in drop down and in other dropdown if user select the same cellphone it should duplicate found and the dropdown value has to clear.
$('.slt_major select option:selected').each(function(i, e) {
alert("check");
//Check if values match AND if not default AND not match changed item to self
if ($(e).val() == cI.val() && $(e).val() != 0 && $(e).parent().index() != cI.index()) {
alert('Duplicate found!');
cI.val('0');
}
});
I was not able to see where the error was even the alert was not generating. Here is the fiddle link.
Thanks.
So here it is: DEMO
First I would like to correct your adding part since you were adding duplicate ids into internal elements of cloned row. So just change your code as below and check for inline comments.
$(document).on("click", ".btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
$clone.find('[id]').each(function(){
this.id=this.id +(count) //change the id of each element by adding count to it
});
$clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='Del' id='buttonless"+count+"'/>")
$clone.attr('id', "added"+(count)); //just append count here
$clone.find('.preferred').attr('checked', false);
$clone.find('.sslt_Field').val(0);
$clone.find('.txt_CC').val('');
$clone.find('.txt_Pno').val('');
$(this).parents('.em_pho').after($clone);
count++; //increment count at the end.
});
Now to check for duplicate options you can do it as below. Also check inline comments:
//attach event handler to document since you need event delegation on dynamically created elements
//attach change event to class 'sslt_Field'
$(document).on('change','select.sslt_Field',function(event) {
var cI = $(this); //store a reference
var others=$('select.sslt_Field').not(cI);
//store reference to other select elements except the selected one
$.each(others,function(){
//iterate through remaining selects
if($(cI).val()==$(this).val() && $(cI).val()!="")//check if value has been
//already selected on other select
{
$(cI).val('');//empty the value
alert('already selected');//display alert.
}
});
});
I have two Gridviews, one loaded with data and the other not. When I double click an item from gvDisplayAvailItems, I want the row to go to gvDisplaySelectedItems, and vice-versa. The Grids are also multi-select, with a button allowing all selected items to be moved. gvDisplaySelectedItems differs by 1 additional input column.
AddDisplayParams() is called when the button is pressed.
function AddDisplayParams() {
var rows = $("#gvDisplayAvailItems").find('tr.selected');
rows.each(function (index, element) {
element.classList.remove("selected");
var newRow = element.cloneNode(true);
newRow.appendChild(customIdTb.cloneNode(true));
$("#gvDisplaySelectedItems").append(newRow);
element.remove();
});
}
AddDisplayParam is called on double-click.
function AddDisplayParam(param) {
var newRow = param.clone(true);
newRow.append(customIdTb.cloneNode(true));
$("#gvDisplaySelectedItems").append(newRow);
param.remove();
}
And here is how I trigger the selection and double clicks.
$("#gvDisplaySelectedItems tr").click(function () {
$(this).toggleClass("selected");
});
$("#gvDisplaySelectedItems tr").dblclick(function () {
RemoveDisplayParam($(this));
});
$("#gvDisplayAvailItems tr").click(function () {
$(this).toggleClass("selected");
});
$("#gvDisplayAvailItems tr").dblclick(function () {
AddDisplayParam($(this));
});
When I both double click and mass select rows on gvDisplayAvailItems, the rows are moved to gvDisplaySelectedItems correctly. However, nothing is triggered for the functions of gvDisplaySelectedItems for rows that were added via AddDisplayParams. Those added by AddDisplayParam can be highligted, but when double clicked only append another textbox to the row in gvDisplaySelectedItems.
So it seems that .clone and .cloneNode are doing something very different here despite having basically the same function. Could someone please explain why one partially works, while the other does not? And also, why my functions for the second grid are not triggered upon single and double click?
I'd suggest to try delegated event handlers.
E.g.
$("#gvDisplaySelectedItems").on("click", "tr", function () {
$(this).toggleClass("selected");
});
instead of
$("#gvDisplaySelectedItems tr").click(function () {
$(this).toggleClass("selected");
});
and so on for other event handlers.
More info
Regarding other improvements - you don't have to clone()/append()/remove() to move an element. Just doing append() to a new parent will effectively move it since an element can have only one parent each moment of time.
Example: JSFiddle
I am currently using this code for row click event in a bootstrap table
$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element)
{
//....my operation
}
The problem is this triggers for the entire row and I want to be able to trigger it for a single cell.
Note I am using the arguments, row and $element
Here is the FIDDLE
$element is the entire row, you cannot know what cell have been clicked by this way,
bootstrap table do not have cell click event, so you need manually add click event on last cell and fill your needed vars yourself
$('#table').bootstrapTable({
data: data
}).on('click','td:last-child',function(){
var $t = $(this), $row = $t.parent(), i = $row.index(), row = data[i];
var $firstTd = $row.children().eq(0);
if($firstTd.data("haveTable") !== true){
$firstTd.data("haveTable",true);
$firstTd.append('<table class="newTable"><tr><td>NEW TABLE</td></tr></table>');
} else {
$firstTd.data("haveTable",false);
$firstTd.children("table").remove();
}
});
https://jsfiddle.net/e3nk137y/1663/
try
$('#myTable').bootstrapTable().on('click-row.bs.table td', function (e, row, $element)
{
//....my operation
}
Based on my guess, when you click on that cell, you probably want only the triggers for that particular cell to execute and not for the whole table.
This can be achieved by stopping the propagation of event from the table cell to the table row.
$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element){
//stop the propagation for target cell
if($(event.target).hasClass('myClass')) e.stopPropagation();
//the code for handler
...
...
}
There are many ways stopPropagation can be utilized to do this thing. This was just one of those.
Since I dont know how your other triggers are set, I can't write code that works with those with assumptions.
Try this:
$('#myTable tr td:last-child').on('click', function() {
if( $('.newTable', $(this)).length ) {
$('.newTable', $(this)).remove();
} else {
$(this).append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
I'm using jquery.tablednd.0.7.min.js to drag and drop table rows. When I add new row in table dynamically (i.e. with javascript add row) that new row did not drag n drop. Other rows that are already present in table can be dragged.
I think this new row is not being synched with jQuery drag n drop code.
I am adding new row like this.
This is jquery dragnDrop file code.
On page load I am using this code to assign this functionality to table
$(document).ready(function() {
$("#tableId").tableDnD({
onDragClass : "myDragClass",
onDrop : function(table, row) {
},
onDragStart : function(table, row) {
console.log("drag start");
}
});
});
Just use $("#tableId").tableDnDUpdate()
From the docs:
Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells).
This is useful if you have updated the table rows using Ajax and you want to make the table draggable again.
The table maintains the original configuration (so you don't have to specify it again).
You haven't shown the code which does the appending of the rows, which is where you would need to rebind the tableDnD related events, but it would look something like this:
$(document).ready(function() {
//on load
addTableDnD();
//appending a row
$(".add-row").click(function() {
$("<tr />").appendTo("#tableId");
addTableDnD(); // re-attach events to pick up the new row.
});
});
function addTableDnD() {
$("#tableId").tableDnD({
onDragClass : "myDragClass",
onDrop : function(table, row) {
},
onDragStart : function(table, row) {
console.log("drag start");
}
});
}
As simple as:
$("#tableId").tableDnDUpdate()
after adding that new row.
Please try this:
function sample()
{
$("#tableId").tableDnD({
onDragClass : "myDragClass",
onDrop : function(table, row) {
},
onDragStart : function(table, row) {
console.log("drag start");
}
});
}
Call sample() function in body onload and once again call sample() function in each new row entry time.
Note: To Avoid twice issue please try to use "live" function in jquery
If a newly added row tr has the same id as an existing row, tablednd may not make it dragable.
$("#table_id").tableDnDUpdate();
I solved same issue with this