I am trying to select data from a kendo grid. I need to select one cell at a time when user clicks one key element in that row. I am successful in getting each row's data from first page but when I go to the next page the same function does not work anymore. Do I have to add code in change function ie., in grid change?
Here's the code:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
I understand data source gets all the data but this doesn't work:
$('.data').click(function () {
alert($(this).text());
var grid = $("#List").data("kendoGrid");
var selectedItem = grid.dataItem(this.parentElement.parentElement);
CData.set('activedata', selectedItem);
}
for (var i = 0; i < datasourcedata.length; i++) {
var currentitem = datasourcedata[i].CompanyID;
if (currentitem == $('.data')) {
selectedItem = grid.dataItem(this.parentElement.parentElement);
alert($(selectedItem));
Comp.set('activeCompany', selectedItem);
}
}
Where am I wrong? Any help appreciated.
This will help you for printing all pages in kendo grid
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.pageSize(dataSource.total());
I change datasource settings.
serverPaging: false,
serverFiltering: false,
serverSorting: false
solved in this way.
I think you don't need to use jquery events but instead use some kendo approach with change event. That way you always can change selectedDataItems collection based on users actions.
Related
I am using jquery kendo grid Kendo UI v2019.2.514
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 15
Example given below but here there is no server side pagination
https://dojo.telerik.com/UHUKahIM
I need dataItmes of selected rows in on change event or some other event
Ex:- i selected 2 rows in page:1 and page :2 selected 3 rows so totally 5 rows, i need these selected 5 rows dataItems array in array variable.
Please help me on this
I tried like below
function onChange(e) {
var rows = e.sender.select();
rows.each(function(e) {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(this);
console.log(dataItem);
})
};
but this is not working for my expectation, this is working only the current page i need all the pages selected records as a array
The DOJO example you posted shows how to get the selected ids between pages, using this.selectedKeyNames(). Use that method to get an array of dataItems from the dataSource:
function onChange(arg) {
let selectedIds = this.selectedKeyNames(),
dataItems = this.dataSource.data().toJSON().filter(dataItem => {
return selectedIds.indexOf(dataItem.ProductID.toString()) > -1;
});
console.log(dataItems);
}
Updated DOJO
Note: The property ProductId used in the code above must be the same set in the schema.model.id parameter:
schema: {
model: {
id: "ProductID"
}
}
I am working on setting up a scenario as following:
1) User is shown existing results on first grid
2) User can select multiple results and click an 'Edit' button which will extract the selected items from the first grid
3)Second grid will be populated with the rows the user has selected from the first grid and will allow them to make edits to the content
4)Pressing save will update the results and show the first grid with the rows updated
So far using drips and drabs of various forum threads (here and here), I have managed to accomplish the first two steps.
$("#editButton").kendoButton({
click: function () {
// extract selected results from the grid and send along with transition
var gridResults = $("#resultGrid").data("kendoGrid"); // sourceGrid
var gridConfig = $("#resultConfigGrid").data("kendoGrid"); // destinationGrid
gridResults.select().each(function () {
var dataItem = gridResults.dataItem($(this));
gridConfig.dataSource.add(dataItem);
});
gridConfig.refresh();
transitionToConfigGrid();
}
});
dataItem returns what i am expecting to see with regards to the selected item(s) - attached dataItem.png. I can see the gridConfig populating but with blank rows (gridBlankRows.png).
gridConfig setup:
$(document).ready(function () {
// build the custom column schema based on the number of lots - this can vary
var columnSchema = [];
columnSchema.push({ title: 'Date Time'});
for(var i = 0; i < $("#maxNumLots").data("value"); ++i)
{
columnSchema.push({
title: 'Lot ' + i,
columns: [{
title: 'Count'
}, {
title: 'Mean'
}, {
title: 'SD'
}]
});
}
columnSchema.push({ title: 'Comment'});
columnSchema.push({ title: 'Review Comment' });
// build the datasource with CU operations
var configDataSource = new kendo.data.DataSource({
transport: {
create: function(options) {},
update: function(options) {}
}
});
$("#resultConfigGrid").kendoGrid({
columns: columnSchema,
editable: true
});
});
I have run out of useful reference material to identify what I am doing wrong / what could be outstanding here. Any help/guidance would be greatly appreciated.
Furthermore, I will also need functionality to 'Add New' results. If possible I would like to use the same grid (with a blank datasource) in order to accomplish this. The user can then add rows to the second grid and save with similar functionality to the update functionality. So if there is any way to factor this into the response, I would appreciate it.
The following example...
http://dojo.telerik.com/EkiVO
...is a modified version of...
http://docs.telerik.com/kendo-ui/framework/datasource/crud#examples
A couple of notes:
it matters if you are adding plain objects to the second Grid's dataSource (gridConfig.dataSource.add(dataItem).toJSON();), or Kendo UI Model objects (gridConfig.dataSource.add(dataItem);). In the first case, you will need to pass back the updated values from Grid2 to Grid1, otherwise this will occur automatically;
there is no need to refresh() the second Grid after adding, removing or changing its data items
both Grid dataSources must be configured for CRUD operations, you can follow the CRUD documentation
the Grid does not persist its selection across rebinds, so if you want to preserve the selection in the first Grid after some values have been changed, use the approach described at Persist Row Selection
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I am trying to implement a feature to select an item in kendo's multi-select control with server filtering. when user presses tab on the selected item. Here is my code of kepdown event:
if (e.keyCode === 9) {
var selectedItem = multiSelect.current();
if (selectedItem) {
var selectedIndex = selectedItem.data("idx");
if (selectedIndex >= 0) {
var currentValue = multiSelect.value().slice();
var dataitems = multiSelect.dataSource.view();
var selectedDataItem = dataitems[selectedIndex];
multiSelect.dataSource.filter({});
currentValue.push(selectedDataItem.relatedId);
multiSelect.value(currentValue);
multiSelect.trigger("change");
}
}
}
But it works fine as long as I am searching in same data view i.e. lets say I select two values starting with Cloud and then I select a value starting with App then kendo will remove previous two values starting with Cloud and control will contain just one value selected at the last.
I debugged kendo's code that the issue in function _index of kendo because it finds value in dataSource.view
I have recreated the issue at http://dojo.telerik.com/OtAvi
Your code is not working because you have serverFiltering set to true in the dataSource:
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
},
Since the data is being filtered on the server, the call multiSelect.dataSource.filter({}); is only clearing the already filtered data. With that said, when you call multiSelect.value(currentValue);, only the values from the currently filtered dataSource can be selected. This is causing the selection to only hold items from the current dataView.
Unless you have a strong reason not to, your easiest fix is to set serverFiltering set to false.
When performing an update on the grid it sends all column data.
I have something where updates are performed after the cell is closed:
change: function (e) {
if (e.action == "itemchange") {
this.sync();
}
}
Instead of sending all the data for every column, how can I get it to only send the data that was changed?
You can check for Isdirty flag.When cell data is modified the respective model item is marked as Isdirty=true.
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);
Here I'm doing for the entire grid data.You can do the same for single row.