checkall jquery - javascript

Here is what I have so far for the check all checkboxes and these checkboxes are in a dropdownlist.
_popup: function () {
e.fn._popup.call(this), this.popup.one("open", function () {
this.wrapper = c.wrap(this.element).addClass("km-popup")
});
// Modify popup to include a "Select All" checkbox.
$(this.popup.element).children("ul:first-child").before("<ul class='k-list k-reset' unselectable='on' style='overflow: auto;'><li class='k-item' unselectable='on'><input id='selectall' type='checkbox' /><span>Selected</span></li></ul><hr/>");
// Attach event handler to "Select All checkbox.
$("#selectall").bind('change', function(){
if($(this).prop('checked')){
$(".checkbox").prop('checked', true);
}else{
$(".checkbox").prop('checked', false);
}
});
this updates the check boxes to visually appear on the screen all selected or deselected. I have a button that tells me the state of the viewmodel ie if the checkboxes are true or false. The problem is, is that with the selectall working and checking everything, the viewmodel is not getting updated with those changes ie everytime you click the select all checkbox everything stays false when the test button is clicked no matter if they are checked or not. I need some way to update the viewmodel when I click select all. The whole of the program is pretty complex but if you need more to understand my issue let me know.
here is what my viewmodel has in it
var viewModel = kendo.observable({
options: [{ text: "test1", value: 1, selected: false },
{ text: "test2", value: 2, selected: false },
{ text: "test3", value: 3, selected: false },
{ text: "test4", value: 4, selected: false }
]
});

Try something like this
$("#selectall").bind('change', function(){
if($(this).prop('checked')){
$(".checkbox").not(':checked').click();
}else{
$(".checkbox:checked").click();
}
});

Related

select2 is not updated after disable of selected option

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.
My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.
$("#select-filter").select2({
placeholder: "Select a category",
data:[{
id: "",
text: ""
},{
id: "project",
text: "project"
},{
id: "date",
text: "date"
},{
id: "user",
text: "user"
}]
}).on("change", function(e) {
$("#select-filter :selected").attr("disabled", "true");
});
See example : https://jsfiddle.net/bkqeqbay/1/
You can use the select event and the data like so:
...}).on("select2:select", function(e) {
console.dir(e.params.data);
e.params.data.disabled = true;
});
Updated fiddle: https://jsfiddle.net/bkqeqbay/4/
Note that if you must also disable the underlying select element option you can do:
var index = $(e.params.data.element).index();
$("#select-filter").find('option').eq(index).prop('disabled',true);

Kendo Grid Acting Weird on Update

I have a kendo grid which is acting weirdly. I'm trying to select a row and update value in the data source. The grid has 2 rows: one template i.e. check box and one value in data source which is Boolean.
All I'm trying to do is:
When clicked on checkbox - Update the value of IsChecked in the data
source and mark the row as selected
The code below works fine but only after each check box is clicked at least once.
To replicate: Click on any checkbox, you'll see the value in the row gets updated, but check box is not checked. Click on it again and you'll see the check box gets checked and row gets selected. But never on first time. Same happens with all the rows. After 2nd run they work fine, but not at first.
Here is the Telerik fiddle link to play around
$("#grid").kendoGrid({
columns: [
{
title: "Check",
template: '<input class="checkbox" type="checkbox" />'
},
{ field: "IsChecked" }
],
dataSource: [
{ IsChecked:false},
{ IsChecked:false },
{ IsChecked:false },
{ IsChecked:false }
],
dataBound: function () {
$(".checkbox").bind("change", function (e) {
var row = $(e.target).closest("tr");
row.toggleClass("k-state-selected");
var grid = $("#grid").data("kendoGrid");
var index = $("tr", grid.tbody).index(row);
var data = grid.dataSource.at(index);
data.set("IsChecked", true);
});
}
});
Thank you
Try below code. Working fiddle http://dojo.telerik.com/UNIpU/3
$("#grid").kendoGrid({
columns: [{
title: "Check",
template: '<input class="checkbox" #= IsChecked ? \'checked="checked"\' : "" # type="checkbox" />'
},
{
field: "IsChecked"
}
],
dataSource: [{
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}, {
IsChecked: false
}],
dataBound: function(e) {
var grid = e.sender;
var data = grid._data;
data.forEach(function(entry) {
if (entry.IsChecked) {
$('tr[data-uid="' + entry.uid + '"]').addClass("k-state-selected");
} else {
$('tr[data-uid="' + entry.uid + '"]').removeClass("k-state-selected");
}
})
}
});
$("#grid .k-grid-content").on("change", "input.checkbox", function(e) {
var grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("IsChecked", this.checked);
});

Kendo UI Grid: if I make changes and save them, I can still cancel them afterwards. How to lock them in?

I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.

How to select an element in Webix richselect area?

I use Webix 2.5.14. There was a problem with a component Richselect.
In this form there is a richselect with options.
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
....
]
});
I click on the button and opens a form for editing, and I need to select an element in the richselect area, for example with id = 3.
How to do it? setValue () adds a new one (element), but doesn't select what i need.
You need to use
$$("rule").setValue(3); // 3 - id of record
It is a bit counterintuitive, but you need to use the "id" of record in the setValue command, not the value.
See my example:
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
{ view:"button", value: "Select Value", click:function(){
$$("rule").setValue(2);
}}
]
});
or if you prefer http://webix.com/snippet/5df7e1b1

kendo multiselect option attribute set

I am trying Kendo multiselect demo.
var multi = $("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
}).data("kendoMultiSelect");
In them I want to set option element attribute selected if value = "2".
like $('option[value=2]').attr('selected','selected');
Any idea how I can do this?
add an databound event to multiselect
function MultiSelectDataBound()
{
var multiSelect = $("#multiselect").data("kendoMultiSelect"),
multiSelect.dataSource.filter({}); //clear applied filter before setting value
multiSelect.value(2);
}
Or you can create a text box and button add an clicked event and get values from text box
function btnClicked()
{
var multiSelect = $("#multiselect").data("kendoMultiSelect"),
multiSelect.value($("#textbox").val().split(","));
}
For more information abot MultiSelect

Categories