I am using google visualisation table and adding check boxes in the list. I want to select some rows with check boxes and perform some action on those selected row. But when the sort or page event is called the table is redrawn and the check boxes goes unchecked.
Here is the fiddle
How can I keep the checkbox state after the table is sorted or page is changed?
Thank you
Before the event is called, you can do something like this to save the checked state of you checkboxes:
var checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
var checkboxesState = {};
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", function(){
checkboxesState[this.getAttribute("id")] = this.checked;
});
}
And after the event is called, restore it:
google.visualization.events.addListener(table, 'sort', function(ev) {
//Needed, since the whole table DOM will change
checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxesState[checkboxes[i].getAttribute("id")]){
checkboxes[i].checked = checkboxesState[checkboxes[i].getAttribute("id")];
}
}
});
Related
I have some rows in a grid that are editable by a user. When the user clicks the edit button in a grid row, i'm displaying a multi-select dropdownlist
("ddlEditRegionList") with options to choose from. When this dropdownlist is shown i want to keep the already saved selections checked.
I'm trying with the code snippet below but that does get my existing selections.
//Get currently selected options into array regionArr
var region = $.trim($tr.find(".tdRegion").html());
$("#hidRegionList").val($.trim($tr.find(".tdRegion").html()));
var regionArr = region.split(',');
$tr.find(".tdRegion").html($("#divRegionList"));
//keep selected options checked in edit mode - this isn't working
$('#ddlEditRegionList option').map(function () {
for (var i = 0; i < regionArr.length; i++) {
if ($.trim($(this).text()) == $.trim(regionArr[i])) {
return this;
}
}
}).attr('selected', 'selected');
Note that i'm using jquery-3.2.1
Try .val() instead of .text(), Like:
if ($.trim($(this).val()) == $.trim(regionArr[i])) {
return this;
}
I have a jqGrid where a row is editable on click (i.e. 'editRow' inside 'OnSelectRow' works fine). But my requirement is to "load the grid with ALL ROWS IN EDIT MODE by default (Inline edit)", so there should not be any need for me click individual rows.
so i implemented following code:
loadComplete: function () {
var $this = $(this),
ids = $this.jqGrid('getDataIDs'),
i,
l = ids.length;
for (i = 0; i < l; i++) {
$this.jqGrid('editRow', ids[i], true);
}
}
but i cant save row data on focus out.can any one please suggest me a way to do it.
I am using Dojo "dgrid/OnDemandGrid".In that i am using its inbuilt functionality of check-box for each row.
The problem is whenever i am selecting all the check-boxes one by one then its header check-box i.e. select all check-box is not getting checked and same with whenever am deselecting all the check-boxes one by one then the select all check-box didn't get deselected remains in mixed state . There three states True,False and Mixed.
When i was searching a solution for this i found that its a bug in Dojo Dgrid itself.
This is the URL where you can check.DOjo Dgrid Sellect All functionality
Please help me to resolve this issue, Thanks in advance.
The property used to updated the header checkbox (allSelected) is not updated when you select the rows individually. You might be right it might be a bug. Have you reported it?
The workaround solution I could think of is to update the state of the header checkbox yourself. Below is the code to do the same.
grid.on('dgrid-select', function () {
var selectedRows = [];
for (var e in grid.selection) {
grid.selection[e] && selectedRows.push(e)
}
//get the selector column and checkbox from that column
var column = grid.columns["select"];
var headerCheckbox = column._selectorHeaderCheckbox;
if (selectedRows.length === grid.get('total')) {
//update the checkbox when the selection count equal to total count.
headerCheckbox.indeterminate = false;
headerCheckbox.checked = true;
headerCheckbox.setAttribute('aria-checked', 'true');
grid.allSelected = true;
}
});
grid.on('dgrid-deselect', function () {
var selectedRows = [];
for (var e in grid.selection) {
grid.selection[e] && selectedRows.push(e)
}
//get the selector column and checkbox from that column
var column = grid.columns["select"];
var headerCheckbox = column._selectorHeaderCheckbox;
if (selectedRows.length === 0) {
headerCheckbox.indeterminate = false;
headerCheckbox.checked = false;
headerCheckbox.setAttribute('aria-checked', 'false');
grid.allSelected = false;
}
});
Hope this was helpful.
I have some multiselect and i use jquery select2.I want to disable one option in other multiselect when this option is selected in one multiselect.
i write this code,but it does work.
$("select.multiselect").on("change", function(e) {
if(e.added){
for(var i=0;i<this.options.length;i++){
var vals = $(this).select2("val");
for(var j=0;j<vals.length;j++){
if(this.options[i].value===vals[j]){
this.options[i].selected=true;
}
}
};
}
if(e.removed){
for(var i=0;i<this.options.length;i++){
if(this.options[i].value===e.removed.id){
this.options[i].selected=false;
}
};
}
});
how to do it?
It was more complicated then I thought but here is what I came up with:
$('select.multiselect').on('change', function(e) {
// the selected values
var vals = $(this).select2("val");
// selects contains all the OTHER select forms
var selects = $('select').not('#'+$(this).attr('id'));
// loop trough all the selects
for (var i = 0; i < selects.length; i++) {
//re-enable all options before
$(selects[i]).find('option').removeAttr('disabled');
// loop trough all the values
for (var j = 0; j < vals.length; j++) {
// disabled attribute
$(selects[i]).find('option[value='+vals[j]+']').attr('disabled', 'disabled');
}
}
});
Here's a fiddle if you want to see the result in action
Make sure all your select elements have a unique id.
I want to do a javascript function that check the unchecked checkbox. My function nowadays, check all the unchecked checkbox, and I need that just check a specific GridView unchecked checkbox
function checar() {
var el = document.getElementsByTagName("input");
for (var i = 0; i < el.length; i++) {
if (el[i].type == "checkbox") {
el[i].checked = true;
}
}
}
You want to first limit the scope of your search for elements. One way to do so would be to use getElementById
function checar() {
var grd = document.getElementById("<%=grd.ClientID%>"); // <-- Add this line
var el = grd.getElementsByTagName("input"); // <-- change the scope of this to grd
//rest of your code here.
}
Sample using divs, but you'll get the idea I think: http://jsfiddle.net/8LRkk/
Edited to include setting the specific Grid ID.
To get at all of the checkboxes of a particular gridview, you need to grab checkboxes whose ClientID contain the portion of the gridview's ClientID as well since all controls have an id which is "stacked".
Your function should work as a base, it just needs to have an added check in it:
function checar() {
var el = document.getElementsByTagName("input");
// Get the client id of the gridview from ASP here
var gvID = '<%= this.myGridview.ClientID %>';
for (var i = 0; i < el.length; i++) {
// Call the id of the checkbox and check to see if it
// contains the client id of the gridview at the same time
if (el[i].type == "checkbox" && el.id.indexOf(gvID) != -1) {
el[i].checked = true;
}
}
}