My UI-grid is not reflecting changing based on the checkbox.
Checkbox I have is --> mainCtrl.check700 (either true or false)
UI Grid does not refresh based on the checkbox change. How do i make the UI grid to change isrowselectable based on checkbox
mainCtrl.mainGrid.isRowSelectable = function (row) {
if (mainCtrl.check700){
if (row.entity.detailStatus === '700') {
return true;
} else {
return false;
}
}else{
if (row.entity.detailStatus === '100' || row.entity.detailStatus === '200' ) {
return true;
} else {
return false;
}
}
};
You need to assign it to $scope.gridOptions
So in your case I suppose using mainCtrl.gridOptions.isRowSelectable = ... instead of mainCtrl.mainGrid.isRowSelectable should solve the problem.
Related
I've got two checkboxes and I need to have only one of them true at the time.
So if checkbox1 is true then checkbox2 should be false.
My current code works only when I play around with first checkbox but the second one doesn't behave correctly.
Here are my checkboxes:
<Checkbox
checked={checkbox1}
onChange={onChange}
/>
<Checkbox
checked={checkbox2}
onChange={onChange}
/>
My CheckBox component:
<input
type="checkbox"
className="filled-in"
checked={this.state.checked}
data-cy={this.props.cyCheckbox}
/>
And my parent component where I am trying to manipulate state to set CheckBox checked true or false:
<Access
checkbox1={this.state.input.checkbox1}
checkbox2={this.state.input.checkbox2}
onChange={this.updateInput}
/>;
state = {
input:{
checkbox1: false,
checkbox2: false,
}
}
updateInput = (key, value) => {
let { input } = this.state;
input[key] = value;
this.setState({ input });
window.input = input;
//this is where I try to set another Checkbox false if first one is true.
if (input.checkbox1) {
input.checkbox2= false;
} else if (input.checkbox2) {
input.checkbox1= false;
} else {
input.checkbox2= true;
input.checkbox1= true;
}
}
I can't be sure because your examples are incomplete, but I think your issue is that your checkbox code can never reach the else if clause unless the first checkbox is already unchecked. Make your conditionals based on key and value and you'll be fine. Something like:
if (key === 'checkbox1' && value) {
input.checkbox1 = true;
input.checkbox2 = false;
} else if (key === 'checkbox2' && value) {
input.checkbox1 = false;
input.checkbox2 = true;
}
I use Axios to GET data from my server. Basically, what I want to achieve is use the response from the GET request and get the data to set the checkbox to true or false depending on the response.
But the problem is, it does not set the checkbox to true or false. But rather, the value of this.checked will always be "".
Here is my code:
<template>
<input type="checkbox" value="Yes" v-model="checked">Yes</label>
</template>
export default {
data () {
return {
checked: ''
}
}
...
...
created () {
...
...
if ((response.data.categoryTypeId) === noSubCat) {
// checkbox is not checked
this.checked === false
} else {
// checkbox is checked
this.checked === true
}
}
}
You should assigne the value, instead you're doing a comparisation with ===
created () {
...
...
if ((response.data.categoryTypeId) === noSubCat) {
// checkbox is not checked
// this.checked === false // this is a comparison
// I guess is assign what you want.
this.checked = false
} else {
// checkbox is checked
this.checked = true
}
}
}
And you can simplify the code above to something like this:
this.checkbox = (response.data.categoryTypeId) === noSubCat ? false : true;
I have a smimple ng-repeat that displays user details. I am trying to set all the rows to be selected.
Currently I can manually click and select all the rows individually using following code:
<tr ng-repeat="room in classrooms" ng-class="{'selected': room.selected}" ng-click="select(room)">
in controller
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
and to get data from the selected rows I use following logic
$scope.getAllSelectedRows = function()
{
var x = $filter("filter")($scope.classrooms,
{
selected: true
}, true);
console.log(x);
}
UPDATED FROM #KADIMA RESPONSE
$scope.toggleSelectAll = function()
{
angular.forEach($scope.classrooms, function(room) {
room.selected ? room.selected = false : room.selected = true;
})
}
Set up a new function in your controller:
$scope.selectAll = function() {
angular.forEach(classrooms, function(room) {
room.selected = true
}
}
And then you can create a button in your html to call this function.
If you want to select all data you got you can set selected property using angular.forEach() method.
https://docs.angularjs.org/api/ng/function/angular.forEach
In your case:
angular.forEach(x, fuction(value) {
value.selected = true;
}
On page load I checked few of check boxes . using following code
<li ng-repeat="template in alltest" >
<input type="checkbox" name="template" ng-model="template.isselected" value="{{template.id}}" id="{{template.id}}" ng-checked="isChecked(template.id)">
<label for="{{template.id}}" class="position-relative"><span></span>
</label>
</li>
isChecked function
$scope.isChecked = function(id){
var match = false;
if($scope.alltest!=null)
{
for(var i=0 ; i < $scope.alltest.length; i++) {
if($scope.alltest[i].tmp_id == id){
match = true;
}
}
}
return match;
};
When I click on button to get those checkboxes then didn't get those check boxes
angular.forEach($scope.alltest, function(template){
if (template.isselected)
{
alert(template.id)
}
})
If I again deselected those check boxes and again select then i get value..but on page load by default few of check boxes coming with true option and directly i click on submit button then didn't get those checked check box
what is wrong with this code? please help me to solve this
ng-model is defult undefined. When checkbox is checked ng-model create property. that is why you get only checked checkbox when form submitted. You need define false checkboxes also inside isChecked function
ng-checked="isChecked(template.id, $index)">
js
$scope.isChecked = function(id, index) {
var match = false;
if ($scope.alltest != null) {
for (var i = 0; i < $scope.alltest.length; i++) {
if ($scope.alltest[i].tmp_id == id) {
match = true;
}
}
}
if (!match) $scope.alltest[index].isselected = false
return match;
};
i am using kendo ui tree view with check box
i want the check box's id when it is getting unchecked
this is kendo ui mine code
// var homogeneous contains data
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: false,
template:"# if(!item.hasChildren){# <input type='hidden' id='#=item.id#' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' id_a='#= item.id #' name='c_#= item.id #' value='true' />#}else{# <div id='#=item.id#' style='display:none;' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#",
},
dataSource: homogeneous,
dataBound: ondata,
dataTextField: "value"
});
function ondata() {
//alert("databound");
}
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
in this code i am not getting checkbox's id when it is unchecked so i have tried this
jquery code
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
this code is only working in js fiddle but not in my case http://jsfiddle.net/NPUeL/
if i use this code then i can get the number of count but i dont know how to use it
var treeview = $("[data-role=treeview]").data("kendoTreeView");
treeview.dataSource.bind("change", function (e) {
if (e.field == "checked") {
console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
}
});
what changed i need to do in data source so i can get id
thanks in adavance
If you want to get the id you might do:
$('input[type=checkbox]').click(function (e) {
var li = $(e.target).closest("li");
var id = $("input:hidden", li).attr("id");
var node = treeView.dataSource.get(id);
if (node.checked) {
console.log('checked');
} else {
console.log('not checked');
}
});
What I do in the event handler is:
find the closest li element that is the node of the tree that has been clicked.
the id is in an HTML input element that is hidden (this is the way that I understood that you have stored it).
Get item from dataSource using dataSource.get method.
See your code modified and running here
i made the small change and its working now
function ondata() {
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
}