Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?
Related
I'm with problems trying to edit a cell in slickgrid. I'm still not familiar with slickgrid... I can normally put the data in the grid but I can't edit the cells value. I already set in my options the editable camp as true (editable:true), but still nothing happens when I try to edit. I guess I have to call something else to make the cell editable? Sorry if this question looks stupid, but indeed I'm still a "noob" with slickgrid. Below is my script where I initiate the grid
var grid;
var columns = [
{ id: "Id", name: "Id", field: "Id" },
{ id: "Name", name: "Name", field: "Name", minWidth: 70 },
{ id: "Salary", name: "Salary", field: "Salary" },
{ id: "Address", name: "Address", field: "Address" }
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
asyncEditorLoading: true,
forceFitColumns: true,
editable: true
};
$(function () {
var myData = [];
$.getJSON('/Home/getEmployeeList', function (data) {
myData = data;
console.log(myData);
grid = new Slick.Grid("#myGrid", myData, columns, options);
});
});
You have to add this
editor: Slick.Editors.Text,
editor: Slick.Editors.LongText
editor: Slick.Editors.Date
editor: Slick.Editors.Checkbox
based on your requirement to a particular cell which needs to be edited
{ id: "Name", name: "Name", field: "Name", minWidth: 70, editor: Slick.Editors.Text},
The best place to start is the examples.
You probably want this one: http://6pac.github.io/SlickGrid/examples/example3-editing.html
I'd advise you to use the 6pac repo, it's up to date. The original mleibman one has not been updated for about four years.
I got similar issue and resolved it by including slick.editors.js.
<script src="slickgrid/slick.editors.js"></script>
What I'm trying to accomplish is to apply an "automatic" secondary column sort when a user sorts a column in a kendo grid.
So in this JS fiddle example, if a user sorts by "Value", it'll also sort by "Name". Note that the 0s are sorted together, but the names aren't alphabetical. I'd like them to be alphabetical (the secondary sort).
Here's an attempt at overriding the datasource sorting to accomplish this. I'm taking the user's original sort and the adding an additional sort on "SortedName". Based on the sorting array that's logged, it seems to be close but is still not working.
Any other ideas on how to accomplish this?
Note: I don't want to allow users to sort by multiple columns. The real world example I'm using this for can have up to 50+ columns (unfortunately), so multiple sort can get confusing / unintuitive. And I'd like it to be done behind the scenes without extra user interaction.
Example code for overriding kendo datasource sort():
dataSource.originalSort = dataSource.sort;
dataSource.sort = function () {
// take the user's sort and apply sorting on an additional column
// the sort array should look like this:
[
{ field: "Value", dir: "asc" }, // this is what the user sorted by
{ field: "SortedName", dir: "asc" }, // and I'm adding this
]
return dataSource.originalSort.apply(this, arguments);
}
Please try with the below code snippet.
<div id="grid">
</div>
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "Lisa", Value: 1 },
{ Name: "Dan", Value: 12 },
{ Name: "Ken", Value: 5 },
{ Name: "Arthur", Value: 15 },
{ Name: "Bob", Value: 0 },
{ Name: "Sally", Value: 0 },
{ Name: "Alexis", Value: 0 },
{ Name: "Cody", Value: 0 },
{ Name: "Steve", Value: 0 },
{ Name: "Andrew", Value: 0 },
{ Name: "Duke", Value: 0 }
],
schema: {
model: {
fields: {
Name: { type: "string" },
Value: { type: "number" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var isSortedByName = false;
var grid = $("#grid").data("kendoGrid");
var ds = grid.dataSource;
var sort = ds.sort();
if (sort) {
for (var i = 0; i < sort.length; i++) {
if (sort[i].field == "Name") {
isSortedByName = true;
}
}
if (isSortedByName == false) {
sort.push({ field: "Name", dir: "asc" });
ds.sort(sort);
}
}
},
columns: [
{ field: "Name" },
{ field: "Value" }
],
sortable: true
});
</script>
I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.
I have developed a kendo UI grid in my HTML page and one of the columns is of type 'email'.
Now the problem is I cannot filter on the email type column data.
model: {
PrimaryEmail: { type: 'email' }
}
To give more clarity, if I enter any text in the filter, it always takes Equal to condition, and the dropdown list is blank to select the condition.
Please let me know if we have a solution for this.
Basically the KendoUI Model does not support such data type : "email", so either you have to declare your field to type: "string" or it would take default as "string"
however if you need to validate column of the Grid as an e-mail you should enable it in the column validation options
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
PrimaryEmail: { type: "string", validation: { email: true, required: true} },
Username: { validation: { required: true} }
}
}
}
}
there is no type called email . The available options are "string", "number", "boolean", "date". The default is "string" .
You may use the string for the Email Type then you will have all the conditions
I have a kendo grid that does a create/delete, both of them ending with errors.
I would like to:.
When having an error on delete to prevent the row deleting from the grid (that is the default behavior when having errors)
When having a create error to prevent the popup editor to close
Please see this fiddle:
http://jsfiddle.net/andreigavrila/p49eV/2/
var data = [
{ Id: 1, Name: "Decision 1", Code: 1 },
{ Id: 2, Name: "Decision 2", Code: 2 },
{ Id: 3, Name: "Decision 3", Code: 3 }
];
$("#grid").kendoGrid({
dataSource: {
error: function (a) {
console.log('error');
$('#grid').data("kendoGrid").cancelChanges();
//$('#grid').data("kendoGrid").one("dataBinding", function (e) {
//e.preventDefault(); // cancel grid rebind
//});
},
transport: {
read: function(e) {
e.success({data: data});
},
create: function(e) {
console.log('creating');
e.error();
},
destroy: function(e) {
console.log('deleting')
e.error();
}
},
schema: {
data: "data",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "number" },
Name: { type: "string" }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "Code", title: "Code", },
{ field: "Name", title: "Name" },
{ command: ["destroy"], title: " " }],
editable: {
mode: "popup"
}
});
The second point works by default (so having an error on create does not close the popup)
The first point works by adding the error function, but that breaks the popup (it closes on error).
So I can have either one of my , but not both in the same time. I am kind of stuck.
I also saw this 2 questions on kendo forums:
delete error
server validation
The second link said "to prevent the Grid from closing you need to prevent the next dataBinding event." but i can't make that work.
Thank you for your help.
Andrei
I finally managed to push this to Kendo forums:
Tthe official solution to that:
http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid-handling-create-delete-errors-with-popup-editor.aspx
"I suggest you to use an if condition in the error event handler to
determine which of the two workarounds should be executed. In this
case the server should provide information about type of the error
that occurred. You can retrieve the error status from error event
arguments."