Trying to select rows in bootgrid - javascript

I'm trying to select some rows based in Ids stored in a hidden field. There is a column in the boot grid table called Id, and it has the attribute "data-identifier = true". I'm passing the Ids in an array, and the values are correct (I've checked it in the debugger), but the rows aren't selected. What am I doing wrong? I've tried to pass it as a string array and a number array, and nothing seems to work.
$('td', row).each(function () {
if (this.className == $('#hdfSelectedShift').val()) {
if (this.children[1].value != "") {
var employeeIds = [];
employeeIds = this.children[1].value.split(';').map(Number);
$('#tableData').bootgrid("select", employeeIds);
}
else {
$('#tableData').bootgrid("deselect");
}
}
})
With the function shown above, no rows are selected, even though the array contains the ids. Can you guys please help me? If you need any other code, please ask me.

I Have managed to solve this by deselecting manually using javascript.
function deselect() { //função para deselecionar a tabela com employees (ajuste para o bootgrid)
$('#tableData tbody tr').each(function () {
this.cells[0].children[0].checked = false;
})
}

Related

sapui5 sap.ui.table How to uncheck the checkbox of table row programatically

Im facing a small issue in sap.ui.table. I want to uncheck the checkbox of the table if i delete the record. Here im able to delete the record, But the selection of checkbox was not getting cleared and it is appending for the below row.
In the above image if you see, if i delete "Rani Test", Rani Test row will get deleted but checkbox will get selected to "Surya Test". Please check the below code..
onPressDelete: function(evt) {
var deleteRecord = evt.getSource().getBindingContext('familyDetailsModel').getObject();
var tableId = this.getView().byId("familyDetailsModel");
var index = tableId.getSelectedIndex();
//this.getView().byId("familyDetailsModel").removeSelectionInterval(index,1);
for (var i = 0; i < this.getView().getModel('familyDetailsModel').getData().length; i++) {
if (this.getView().getModel('familyDetailsModel').getData()[i] == deleteRecord) {
this.getView().byId("familyDetailsModel").removeSelectionInterval(i, i);
this.getView().getModel('familyDetailsModel').getData().splice(i, 1);
this.getView().getModel('familyDetailsModel').refresh();
break;
}
}
},
In the above code, splice() method im using to delete the row which is working perfectly. But checkbox is not getting deselected. To uncheck the checkbox im trying with removeSelectionInterval() method. But it is not behaving as expected.
Can someone please help me to sort this issue
Thanks in advance
This line var index = tableId.getSelectedIndex(); returns -1 in your scenario. Furthermore, to delete one line you need to specify removeSelectionInterval(index,index);
The second parameter is not the number of positions to delete. Is the indexTo, so you want to remove from the selected row, to the selected row.
Getting the row index from the event will work better for you. Try this:
var iIndex = oEvent.getSource().getParent().getIndex();
var oTable = this.getView().byId("__table0");
oTable.removeSelectionInterval(iIndex, iIndex);
Here the snippet: https://plnkr.co/edit/wkMc4LcjYYS3K73ClYUc?p=preview

Datatables deleting a row where column value equals something

I have tried the following and I am unable to find a match. What am I doing wrong?
var table = $('#mytable').DataTable();
//hide the row where text in column 1 equals 202733001010
var index = table.row().eq( 0 ).filter( function (rowIdx) {
return table.cell( rowIdx, 0 ).data() === '202733001010' ? true : false;
} );
What i get is a convoluted empty array that does not seem to have any values in it. My end purpose is to delete a row where a column cell (in this case 0) equals a certain value but I think I may be using an incorrect approach. Many thanks in advance for your suggestions. Datatables documentation : https://datatables.net/reference/type/row-selector
If your goal is to actually remove the row (filter and search just hides/shows matching data), the logic below can do it fairly straight forward. I use a text box to enter a value to get ride of out of the first column. If found, I remove it.
See it work here http://live.datatables.net/natejiju/1/edit
$(document).ready( function () {
var table = $('#example').DataTable();
$("#btnGo").on("click", function(){
var s = $("#txtSearch").val();
table.rows().nodes().each(function(a,b) {
if($(a).children().eq(0).text() == s){
table.rows(a).remove();
}
} );
table.rows().invalidate();
table.draw();
});
});

Bootstrap form group checkboxes doesn't get checked in between nav pills

Here's the JSFiddle of my work: https://jsfiddle.net/pb23Ljd8/5/
I use Bootstrap nav-pills to show all products and categorized too like this:
And I based my checkboxes from here: http://bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes
I count the number of products checked in between the tabs like this:
jQuery(document).ready(function($) {
jQuery(".select-product").change(function() {
jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);
});
});
But the glyphicon check icons doesn't appear on the second and third tabs for some reason. But when I click the products on the second and third, it increases the counter and also when I view it on the first tab, it is checked.
I just need the products to also be visibly checked on the second and third tabs and not only on the first one so it's not confusing for the user.
Ideas, anyone?
Edit: I fetch the list of products from CMS so it's dynamic. I now understand that the duplication of IDs is causing the problem.
Before we try and resolve this issues, we should break it down and see what the actual problem is.
First, let's check if we remove the content from tab 1b is the issue still present?
Nope, if we remove the checkboxes from the first tab, the checkboxes function normally on the second and third.
Fiddle #1
What if we change the id of the checkboxes (remember ids should be unique).
Notice how Book #1 now works if we change the first checkbox's id to 1a.
Fiddle #2
So now we "know" the issue is likely due to the fact that we are using checkboxes with the same id value (ref). The "issue" is now:
How do we check multiple checkboxes if one is checked
(or something like that)
Here's what I would do:
assign all "like" checkboxes the same class (ex. Book #1 checkboxes will have class b1)
use jQuery/javascript to make sure all that all "like" checkboxes, check and uncheck in unison
Working Example
EDIT
Dynamic values for the classes can be achieved by putting the IDs as classes so the similar products would match. These can be passed to JS like this assuming that $products_id_array is a PHP array that contains all the classes needed.
var productIDs = <?php echo json_encode($products_id_array) ?>;
and then creating the snippet of jQuery code on the fiddle like this
productIDs.forEach(function(val, key) {
jQuery('.' + val).on('change', function(){
jQuery('.' + val).prop('checked',this.checked);
});
})
Try this JS, This will work
jQuery(".select-product").change(function() {
var checkValue = jQuery(this).prop('checked');
$('.select-product#' + jQuery(this)[0].id).each(function() {
if (checkValue == true) {
jQuery(this).prop('checked', true)
} else {
jQuery(this).prop('checked', false);
}
});
var uniqueId = [];
jQuery("[type='checkbox']:checked").each(function() {
uniqueId.push(jQuery(this)[0].id);
});
Array.prototype.getUnique = function() {
var u = {},
a = [];
for (var i = 0, l = this.length; i < l; ++i) {
if (u.hasOwnProperty(this[i])) {
continue;
}
a.push(this[i]);
u[this[i]] = 1;
}
return a;
}
jQuery(".counter").text(uniqueId.getUnique().length);
});

How to refresh datatable column data

I use data table plugin with table as data source. I have to change some column value via javascript when the user types in some numbers into an input (this input is part of the table too and I have to export this values to). It is working well but when I want to export the table the columns witch was changed with javascript is not displayed in the exported file.
I think the problem is that I have not refreshed the datatable plugin. Is this correct? If yes how do I refresh the datasource? If no what can be the problem and how can I solve it?
I tried the refresh() method (var dataTableObject = $(this).parents('table').dataTable(); dataTableObject.refresh();) and the $(this).parents('table').dataTable() but is not working.
Edit: Here is how do I change the cell value:
$item.find('input.quantity-coefficient').each(function (i, d) {
$(d).off('change').on('change', function () {
var multiplier = $(this).val();
//var dataTableObject = $(this).parents('table').dataTable();
$($(this).data("row-price-info-class")).each(function (i, d) {
var priceContainer = $(d);
var price = parseFloat(priceContainer.data('price-value'));
var priceInfoRatioContainer = $(priceContainer.data("ratio-input-class"));
if (multiplier * price == 0) {
priceInfoRatioContainer.closest("td").addClass("no-euro");
priceInfoRatioContainer.html(" ");
} else {
priceInfoRatioContainer.closest("td").removeClass("no-euro");
priceInfoRatioContainer.html(localizeNumber(multiplier * price));
}
});
//TODO redrow the data
$(this).parents('table').dataTable().fnDraw();;
});
});
You can refresh the dataTable with fnDraw(). In your example:
$(this).parents('table').dataTable().fnDraw();
Thank you guys but I think I found the solution in this post: jquery DataTables - change value of a cell not just display value
When I tried it on the first time the problem was that I started the row numbering from 1 and not from 0.
So for the others who may have this issue to, I have to use something like this:
(this).parents('table').dataTable().fnUpdate("new value", 0, 2)
To update the cell value. Actually this is not what I asked because this is not refresh all the table, but this is a solution for me now.

Displaying optgroup values from DB

Basically, I have a multiselect optgroup in the jQuery Mobile style. When the options are selected they appear as comma separated in the actual select display. I've used this code to separate each item selected and put them each on a different row in my SQLite Table:
db.transaction(function(transaction) {
var optgroup = String($('#myselect').val());
var optarray = optgroup.split(',');
for(var i=0; i<optarray.length; i++){
transaction.executeSql('INSERT INTO mytable(myvalue)\
VALUES(?)',[optarray[i]],
nullHandler);
}
});
}
My question is: How do I redisplay these values as comma separated when I go back onto the page with the optgroup? To be clearer:
say I selected item1 and item2 from the select...it would look like this item1,item2
these are then broken up into two rows
row1 item1
row2 item2
Now when I go back onto that page I want to see these values that the user selected back in the optgroup in the original comma separated form. I hope this makes sense, any help would be appreciated
EDIT: Usually I would just select from the database and display the value on pageload with the id of the select but I need to display multiple values from multiple rows in one selectmenu
EDIT: As suggested I tried
db.transaction(function(transaction) {
transaction.executeSql('SELECT GROUP_CONCAT (columname) FROM mytable', [],
function(transaction, result) {
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
$('#myselect').val(row['GROUP_CONCAT(columname)']);
}
$('#myselect').selectmenu('refresh');
}
},errorHandler);
},errorHandler,nullHandler);
But upon checking the value returned, it is null. I put the group_concat line into the database checker and it correctly returns the rows comma separated but they still won't display in my select. Not sure if the return type is the issue? group_concat appears to return a String.
If I try displaying without group_concat then it correctly displays, but only the last element in the column
The group_concat function returns a comma-separated list of values:
SELECT group_concat(myvalue) FROM mytable
For updating the select, we can set the value by selecting the options and setting the attribute "selected" to true. And because we're using jQuery mobile, we also have to refresh the view after doing it. You can put the code in the callback after you select the rows. So something like
db.transaction(function(tx) {
tx.executeSql("select colname from selected;", [], function(tx, result) {
dataset = result.rows;
for (var i = 0, item = null; i < dataset.length; i++) {
item = dataset.item(i);
//set option with value in colname to true
$("option[value="+item['colname']+"]").attr("selected",true);
}
$("#select-choice").selectmenu("refresh") //refresh select
});
});
Demo

Categories