I am trying to get selected column value based on the selection of a column on ui grid. From that value i used to filter another uigrid table so how to call a function on select of column and the selected column value.
This is my sample code which i am using presently:
$scope.gridOptions[0].onRegisterApi = function(gridApi){
$scope.gridApi.push(gridApi);
gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
var name = newRowCol.col.name;
var filterWithData = newRowCol.row.entity[name];
//$scope.filtert(name,filterWithData);
});
};
I have created a plunker for your problem. Please check:
Plunker
$scope.refreshData = function (termObj) {
$scope.gridOptions2.data = $scope.data;
if (termObj.length > 2) {
while (termObj) {
var oSearchArray = termObj.split(' ');
$scope.gridOptions2.data = $filter('filter')($scope.gridOptions2.data, oSearchArray[0], undefined);
console.log($scope.gridOptions2.data)
oSearchArray.shift();
termObj = (oSearchArray.length !== 0) ? oSearchArray.join(' ') : '';
}
}
else {
$scope.gridOptions2.data = $scope.gridData;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
}
$scope.$apply();
};
Related
I have three dropdownlist controls in my asp.net web app project from which the user will choose items. What I want is that the user must not choose the same values, meaning that the value selected in the one Dropdownlist can not be selected in the other dropdownlist, and if the user tries to select the same value I want to reset the selectedValue property to that dropdownlist. Is there anyway I can achieve this using javascript? It's better to make it on the client side.
Thank you!
The Dropdownlist Looks like this: Image here
First add same class name in all three dropdowns. e.g
'class=dropdownClass'
Add dropdown Number as attribute in all
three dropdowns -> 'dropdownNo=1' , 'dropdownNo=2' , 'dropdownNo=3'
Also add ids (it must be different)-> dropdownId1 , dropdownId2 ,
dropdownId3 respectivitely
<script>
$(document).ready(function () {
$('.dropdownClass').on('change', function () {
//when ever any dropdown change (class name is same)
//get the attribe no
var CurrentdropdownNo = $(this).attr('dropdownNo')
var CurrentdropdownValue = $(this).val();
if (CurrentdropdownNo == 1) {
var value2 = $('#dropdownId2').val() ;
var value3 = $('#dropdownId3').val() ;
//check with dropdown 2,3
if (CurrentdropdownValue == value2 || CurrentdropdownValue == value3)
{
//reset the current dropdown
//do stuff here , what you want
}
}
if (CurrentdropdownNo == 2) {
var value1 = $('#dropdownId1').val();
var value3 = $('#dropdownId3').val();
//check with dropdown 1,3
if (CurrentdropdownValue == value1 || CurrentdropdownValue == value3) {
//reset the current dropdown
//do stuff here , what you want
}
}
if (CurrentdropdownNo == 3) {
var value1 = $('#dropdownId1').val();
var value2 = $('#dropdownId2').val();
//check with dropdown 1,2
if (CurrentdropdownValue == value1 || CurrentdropdownValue == value2) {
//reset the current dropdown
//do stuff here , what you want
}
}
})
})
Note: Change class name Or id name as want ..
Use change Event of every dropdownlist
this is just one change event that i use for Dropdownlist. Do same thing for other drowpdownlists.
var firstDropVal="";
var SecndDropVal="";
var ThrdDropVal ="";
$("#dropOne").change(function () {
var firstDropVal = $("#dropOne").val();
var firstDropVal = $("#dropTwo").val();
var firstDropVal = $("#dropThree").val();
if(firstDropVal == SecndDropVal){
$("#dropOne").val(0)// Or Do what you want to do
}
});
In my Angularjs App, I'm creating dynamic table that also have a checkbox column and header of that column is also a checkbox for selectAll purpose.
Here is code of table creation
var dt = this;
// register function to call from dynamic html
dt.selectAll_Clicked = selectAll_Clicked;
var titleHtml = '';
titleHtml = '<input id="chkboxSelectAll" onClick="selectAll_Clicked()" type="checkbox">';
$('#dtData').DataTable().clear().destroy();
$("#invDiv").empty();
$("#invDiv").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");
var header = data[0],
dtColumns = [];
//create columns based on first row in dataset
for (var key in header) {
dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));
}
dtColumns.push(DTColumnBuilder.newColumn(null).withTitle(titleHtml)
.renderWith(function(data, type, full, meta) {
return '<input type="checkbox" id="chkboxSelect' + data.Id + '" name="SelectClient" >';
}));
$scope.dtColumns = dtColumns;
//create options
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('data', data)
.withOption('dataSrc', '');
//initialize the dataTable
angular.element('#dtData').attr('datatable', '');
$compile(angular.element('#dtData'))($scope);
In selectAll_Clicked function, I'm getting Id(s) of all checkboxes and manually updating its checked property to true/false.
function selectAll_Clicked() {
if ($scope.lstSelectedData != null && $scope.lstSelectedData.length === $scope.lstData.length) {
$scope.lstSelectedData = [];
for (obj in $scope.lstData) {
document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = false;
}
} else {
$scope.lstSelectedData = [];
for (obj in $scope.lstData) {
console.log(document.getElementById("chkboxSelect" + $scope.lstData[obj].Id));
if (document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).disabled == false) {
document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = true;
$scope.lstSelectedData.push($scope.lstData[obj].Id);
}
}
}
}
Its working fine with visible rows, but for invisible rows I'm facing issue
Uncaught TypeError: Cannot read property 'disabled' of null
document.getElementById returns null for invisible rows.
I tried this alternative solution. It returns definition of cell but it does not allow to update properties of that cell.
Is there any other way to do this?? Any kind of help will be appreciated.
I have $scope.addProcessOwner function in Add owner grid config now when user click on each owner i am creating new array object with selectedOwners, Now i want to set selectedOwners as dataSource of selected owner grid.
1- How can i set selectedOwners as a dataSource of selectedOwnerGridOptions ?
2- How can i refresh selected owner grid once owner is selected from Add owner grid ?
grid.html
Add owner
<div kendo-grid="ownerSearch" options="ownerSearchResultGrid"
k-rebind="getOwnerSearchResultGrid"></div>
selected owner
<div kendo-grid="selectedOwner" options="selectedOwnerGridOptions" k-data-source="selectedOwnerGrid"></div>
Ctrl.js
var selectedOwners = [];
$scope.addProcessOwner = function(dataItem){
var selectedOwner = {
fullName: dataItem.fullName,
workerKey: dataItem.workerKey,
stdId: dataItem.stdId,
workEmailAddressText: dataItem.workEmailAddressText
};
var isExists = function(e) {
if (e.fullName === selectedOwner.fullName && e.workerKey === selectedOwner.workerKey) {
return true;
}
};
if (!selectedOwners.some(isExists)) {
selectedOwners.push(selectedOwner);
}
console.log('WORKER DATA',JSON.stringify(selectedOwners));
$scope.selectedOwnerGrid = selectedOwners;
$scope.selectedOwnerGridOptions.dataSource.read();
};
Instead of this:
$scope.selectedOwnerGrid = selectedOwners;
$scope.selectedOwnerGridOptions.dataSource.read();
Try this:
$scope.selectedOwnerGridOptions.dataSource.data(selectedOwners);
This is a function
function collect_users_and_groups() {
var tos = [];
$('#mytable12 input:checked, #groupsTable1 input:checked').each(function(i, elt) {
//alert("to groups");
var dataids = $(this).parent().attr("data-selected").split(",");
alert("dataids "+dataids);
var name = $.trim($(this).parent().next().text());
tos.push(name);
});
return tos.join(', ');
}
which is called when I select check boxes
Actually groupsTable1 has data-selected attribute but mytable12 does not have.
I want to call this var dataids = $(this).parent().attr("data-selected").split(",");
when checkbox of groupsTable1 is clicked
Please tell me how to do?
This is the full fiddle,the above js codes can be found in between 22-33 in the js section
You can use .is() to check table is groupsTable1.
function collect_users_and_groups() {
var tos = [];
$('#mytable12 input:checked, #groupsTable1 input:checked').each(function(i, elt) {
//Check table is groupsTable1
if($(this).closest('table').is("#groupsTable1")){
//alert("to groups");
var dataids = $(this).parent().attr("data-selected").split(",");
alert("dataids "+dataids);
var name = $.trim($(this).parent().next().text());
tos.push(name);
}
});
return tos.join(', ');
}
OR
Simply use
$('#mytable12 input:checked, #groupsTable1 input:checked').each(function(i, elt) {
instead of
$('#groupsTable1 input:checked').each(function(i, elt) {
I have a list of checkboxes. Upon clicking on each of the checkboxes i am adding the value to the hidden variable. But the question is if I want to remove the value from the list upon unchecking the checkbox . How this piece cab be done
here is the hidden form variable
<input name="IDList[]" type="hidden" id="IDList" value="" />
and the jquery
$(".myCheckboxClass").change(function() {
var output = 0;
$(".myCheckboxClass").change(function() {
if ($(this).is(":checked")) {
output += ", " + $(this).val();
} else {
output = $.grep(output, function(value) {
return value != $(this).val();
});
}
$("#IDList").val(output);
});
});
Something like this: (demo) http://jsfiddle.net/wesbos/5N2kb/1/
we use an object called vals to store the info. ADding and removing as we check/uncheck.
var vals = {};
$('input[type=checkbox]').click(function() {
var that = $(this);
if (that.is(':checked')) {
console.log(this.name);
vals[this.name] = "In your Object";
}
else {
delete vals[this.name];
}
console.log(vals);
});
Following your logic, you could do this:
$('#IDList').data('value', []);
$(".myCheckboxClass").change(function() {
var list = $('#IDList').data('value');
if ($(this).is(":checked")) {
list.push($(this).val());
} else {
var indexToRemove = list.indexOf($(this).val());
list.splice(indexToRemove, 1);
}
$('#IDList').val(list);
});
But if you only care about the value of #IDList upon data submission or other actions, you probably want to consider an alternative approach: collating the checked values when you need them.
$('#form').submit(function() {
var list = $('input.myCheckboxClass:checked', this).map(function() {
return $(this).val();
}).get();
$('#IDList').val(list);
});
See both of the above in action: http://jsfiddle.net/william/F6gVg/1/.