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.
Related
I have to customize the kendo grid filter event. On applying filter instead of filtering the records based on the available records on the grid i need to requery along with filters.
i.e:
Onfilter
{
prevent filtering on existing data()
requery from db and apply filter on that data()
}
so i have coded like below.(in document ready)
(document).ready(function (){
grid.bind("filter", function (e) {
if ((e.filter == null) ) {
mymanualretrieve();
}
if (e.filter!=null) {
tempFilter = e.filter.filters;
}
//i don't want the default filtering. to prevent that i am clearing it out
e.filter = grid.dataSource.filter({});}
I have one dropdown where i should call retrieve again with the filters applied.so i am trying like below in change event of drop down.
if (tempFilter != null && tempFilter != undefined) {
grid.dataSource.filter({ tempFilter });
mymanualretrieve();
tempFilter = grid.dataSource.filter().filters;
//I need to prevent default filtering here as well, but on applying the below code, my manual retrieve is not queried based on filters
grid.dataSource.filter({});
After this changes dcument.ready also doesn't get hit on filtering
custom filter options for every column: asp.net MVC
columns.Bound(c => c.columnName).Format("{0}%").Filterable(
ftb=>ftb.Cell(cell=>cell.ShowOperators(true))
.Extra(false)
.Operators(op=>op.ForNumber(fn=>fn.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)))
.Title("Column Name");
I'm using the DataTables library to create a table with extra functionality. What I'd like to achieve, is that the user can select rows and then press a button. This will call the server, do some stuff and the rows should be updated accordingly.
However, after I'm done iterating over the rows to be changed and setting its values, re-drawing the table does not actually update its values. I update the data object, invalidate the cache and call table.draw(). It's very similar to the last example on this page.
I have created a JSFiddle of this issue. The button updates the date objects of the selected rows and the table is re-drawn, but the data inside the table is not updated. The core JS code:
$('#updateRow').click(function() {
//Get the table
var table = $('#example').DataTable();
//Iterate over selected rows
var rowData = table.rows({
selected: true
}).every(function() {
//For every selected row, update startDate
var d = this.data();
d.startDate = "01/01/2017";
console.log('Set startDate of ' + d.name + ' to ' + d.startDate);
//Invalidate the cache
this.invalidate();
});
//Re-draw the table
table.draw();
});
I forked and did the solution from your JsFiddle. Here's the relevant snippet from fiddle https://jsfiddle.net/k38r9be5/1/
var rowData = table.rows({
selected: true
}).every(function(rowIdx) {
var colIdx = 4; // startDate is the fifth column, or "4" from 0-base (0,1,2,3,4...)
table.cell( rowIdx, colIdx).data('01/01/2017').draw();
});
Basically, via the API you can get the cell object itself, and modify the contents with .data(). In your version you weren't actually getting a particular cell object and instead just copied the data contents of the row to a variable, and modified that.
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 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.
I have a datagrid that displays data and a user can select the "view" action column on this datagrid. When this happens, the user should view details of the selected row in a new gridpanel. I am populating a new store for this grid in the action column as follows:
Action Column handler:
//code in action column handler
var store;
console.log ('About to load the store');
var rec = view.getStore().getAt(rowIndex);
var rowid = rec.get('ID');
store = Ext.getStore('MetadataJsonPStore').load({
params:{
solution: 'DemoDocuments',
project: 'MyDemoDocuments',
process : 'RetreiveFileMetadata',
user :'admin',
password :'changethis',
waittofinish :'true' ,
FileID : rowid
},
callback: function(records, options, success) {
if(success) {
var fileMetadataPanel = Ext.getCmp('matadataPanel');
//if (records.length = 0)
console.log(records[0])
;
}
else {
Ext.Msg.alert('Request Failed','Service currently not available');
}
}//end-callback-function
});
My store is correctly populated but my grid doesn't display. When I view my console i do not have errors so i assume i am missing a step.
My datagrid is linked to a store ( the store being loaded above) but the data does not display. Any ideas of how to complete this function?
You need to refresh that Grid view.
Sencha: grid view refresh
gridView = this.getCmp('gridID');
grid.refresh();
Other solution:
Load data on the store2 before render the new grid view