Using a Kendo ListView and when my page reloads, if a selection has been made, I need to have my code automatically select the ListView Item that was previously selected. I'm able to obtain the Kendo DataItem by iterating over the datasource collection, but when I do listView.select(item) the UI does not display anything as selected.
Here is my list view:
$("#listview").kendoListView({
dataSource: coverages,
template: kendo.template($("#listTemplate").html()),
selectable: true,
change: function() {
var index = this.select().index();
dataItem = this.dataSource.view()[index];
if (selectedCoverageCode == null) {
selectedCoverageCode = dataItem;
}
onCodeChanged(categoryId, planId, dataItem);
}
});
And here is my code to set the previously selected item:
function setSelectedCoverageCode(code) {
var listView = $("#listview").data("kendoListView");
var dataSource = listView.dataSource.view();
if (listView) {
$.each(dataSource, function(index, item) {
if (item.Code === code) {
listView.select(item);
selectedCoverageCode = item;
}
});
}
}
I need the DOM object not the data source DataItem, I believe. The above setSelectedCoverageCode function fires the Change event, but the actual element is not selected at that point in the DOM.
How can I do this so I can show the item as already selected whenever a reload happens? Suggestions?
Thanks
You can get the DOM element for the data item by looking for its UID.
var item = // the item out of the DataSource that you want to select
var listView = $("#listview").data("kendoListView");
listView.select(listView.element.find('[data-uid="' + item.uid + '"]'));
Related
I have a HTML page with a DataTable (datatables.net) with data that is populated from the database. What I'm trying to accomplish is to be able click on a row in the datatable and when it's selected, store an ID value contained in the datatable into an array for later use. If a particular row is unselected, the array would be searched, and the matching ID value would be removed. Here is what I have tried so far. It seems to work sporadically:
$('#businessTable tbody').on('click', 'tr', function () {
var data = BusinessFileTable.row({ selected: true }).data();
if ($(this).hasClass('selected') == false) {
FullBusinessRecordIDs.push(data.BusinessID);
} else {
var index = FullBusinessRecordIDs.indexOf(data.BusinessID);
if (index > -1) {
FullBusinessRecordIDs.splice(index, 1);
}
}
});
Any suggestions on what I can do to improve on it? Does anyone know of a sample out there?
I think you should use the select extension and rebuild FullBusinessRecordIDs on each select / deselect event :
var FullBusinessRecordIDs = [];
$('#example').on('select.dt deselect.dt', function() {
FullBusinessRecordIDs = [];
table.rows({ selected: true }).every(function() {
FullBusinessRecordIDs.push( this.data().BusinessID )
})
//how as demo string
$('#ids').val( FullBusinessRecordIDs.toString() )
})
demo -> http://jsfiddle.net/4rnsq28s/
I have two columns on a page, with a checkbox jstree on the left and a table using datatables on the right. The table rows and tree are all loaded at startup.
I would like to show a row when the node is selected on the tree and hide the row when its unchecked and I'm using a class for this. I am having problems with looping though all the rows in a datatables and setting a class, so I can filter it. This is the code I'm using below, but its not working. I can't get any id for the table row.
table.rows().iterator( 'row', function ( context, index ) {
var tableNode = $(this.row(index).node());
tableNode.removeClass('VisibleRow').removeClass('HiddenRow').addClass('HiddenRow');
var id = tableNode.id;
var treeNode = data.instance.get_node(id);
if(treeNode != undefined){
var currentId = '#row-' + node.id;
var rowInTable = table.row(currentId).node();
$(rowInTable).removeClass("HiddenRow");
$(rowInTable).addClass("VisibleRow");
}
});
Let me know if there are better ways to do this.
I believe you can do it with the snippet below. The rows iteration is jQuery based, there is no DataTables-specific logic there.
Also check demo - Fiddle Demo
var $tableRows = $('#yourTableId').find('tr');
$('#yourTreeContainer').on('select_node.jstree', function(e, data) {
$tableRows.each(function() {
if (this.id === '#row-' + data.node.id) {
$(this).removeClass('HiddenRow');
} else {
$(this).addClass('HiddenRow');
}
});
});
I created same with some changes and it works fine, but even with hidden row I don't want datatable showing empty pages. Any advice, please?
this my code
$('#jstree')
.jstree({
core: {
data: treeData
},
checkbox: {
three_state : false, // to avoid that fact that checking a node also check others
whole_node : false, // to avoid checking the box just clicking the node
tie_selection : false // for checking without selecting and selecting without checking
},
"plugins" : ["checkbox","conditionalselect"]
})
.on("check_node.jstree uncheck_node.jstree", function(e, data) {
$tableRows.each(function(){
//$(this).addClass('HiddenRow'); //should not be there
if( this.id === data.node.id ) {
if(data.node.state.checked ){
//alert("removeClass");
$(this).removeClass('HiddenRow');
}else{
//alert("addClass");
$(this).addClass('HiddenRow');
};
}else{
}
})
})
This is the link http://jsfiddle.net/cf7tata9/56/#&togetherjs=jqPTfx3gpk
Is there a way to force the UI Sortable to change item position in a list when I click some link or a button that pass a value to any of the possible UI events?
Here the Sortable function:
$("#sortable").sortable({
start: function(event, ui) {
// ...
},
update: function(event, ui) {
// ...
},
stop: function(event, ui) {
// ...
}
});
And here is the even of a button which update the value of a text input in spicific row ... It actually fires an Ajax but I'm making it simple here:
$("#sortable tr").on("click", ".row-button", function () {
var sort_id = $this.closest('tr').find('.text-sort-id').val();
...
...
});
UPDATE:
Here is a jsFiddle result of what I did till now. I need to be able when I change the input in second row for example to "5" and click change it visually move to the bottom of the table and so on when change the fourth row input to "1".
I want to be able to change item value when click the change button without resetting all others and from another side, be able to drag any row and change its input value to be less than the one after and more then the input before it and this all happens without changing other values even if we needed to set an equal value.
Please see the comments in the code for an explanation of what I'm doing. I've updated the .sort-btn click event with the following code:
$(".grid-sort-table tbody tr").on("click", ".sort-btn", function() {
var allItems = $('.ui-sortable').children();
//Select all of the input values
var orderedInputValues = $.map(allItems, function(item) {
return $(item).find('input').val();
});
//Order the input values (smallest to largest, by default)
orderedInputValues = orderedInputValues.sort();
//Store the "tr" in a variable so it can be manipulated.
var selectedItem = $(this).closest('tr');
var selectedItemVal = $(selectedItem).find('input').val();
var indexToInsertAt = 0;
for (var i = 0; i < orderedInputValues.length; i++) {
if (orderedInputValues[i] == selectedItemVal) {
indexToInsertAt = i;
break;
}
}
//Find the item at the index the selected item will be inserted at (before or after)
var itemAtIndex = allItems[indexToInsertAt];
//If the selected item's value is greater than the item at the required index, insert it after the item.
if ($(selectedItem).find('input').val() > $(itemAtIndex).find('input').val()) {
selectedItem.insertAfter(itemAtIndex);
}
else { //Otherwise, insert it before the item at the required index.
selectedItem.insertBefore(itemAtIndex);
}
//Additional code below
...
});
Updated Fiddle
I'm new to kendo I have a list populated from a data source (with template : Each list item has mobile switch in it).I need to get all the id's of selected mobile switches when I clicked on a single button. Can anyone let me know how to do that in kendo ?
Cheers,
Chinthaka
I solved that Using following code (Only Active Items checked items)
var checkedWorkCentersIds = new Array();
$('#workcenters :checkbox:checked').map(function () {
if (this.checked == true) {
checkedWorkCentersIds.push(this.id);
}
});
Without the code it is hard to give an exact answer, but you should be able to just loop over the data items in the array and find the ones that are selected.
For example:
var dataSource = new kendo.data.DataSource( ... );
function getSelected() {
return $.grep(dataSource.view(), function (item) {
return item.selected;
});
}
Assuming the switches/checkboxes are bound to the "selected" property.
In response to your comment, you can get the selected checkbox element IDs with jQuery:
$("#workcenters :checkbox:checked").map(function (index, checkbox) {
return $(checkbox).attr("id");
});
The following snippet uses a MultiSelect field to filter through an array of items. Filtering only occurs when items have been selected in the MultiSelect and the 'Filter' button has been clicked.
http://jsbin.com/iVIQoKiV/1/edit
How can it be set up using a DropDownList instead? Also, once an item has been selected in the DropDownList, how can the grid be filtered instantly without the need to click a button?
Edit:
Here's a new JSBin. Managed to implement a DropDownList. I've used the following change event but now filtering doesn't work:
change: function() {
var value = dropdown.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({
field: "Territories",
operator: function (itemValue) {
var matchingItem = itemValue.find(function (item) {
return $.inArray(item.TerritoryID, value) >= 0;
});
return matchingItem !== null;
}
});
}
Hello just the same scenario is covered in the Toolbar Grid online demo here. It filters instantly beucase it uses the change event of the DropDownList to invoke the filter method immediately.