I have a Kendo grid that has a selectbox on each row.
When I perform an update action on a row, in the database the data for the row is updated and the data for the selectbox is updated. Then I run a dataSource.read() on the grid to refresh the screen. However, even though the row refreshes, the data in the selectbox does not.
So the question is, how do I tell Kendo grid to refresh the data in the selectbox?
you can use dataSource.sync(); for manually refresh the dropdownlist.
var dataSource=new kendo.data.DataSource({
// Datasource Code with Parameter
});
var grid = JQuery("#grid").kendoGrid({
dataSource:dataSource,
});
jQuery('#changeevent').change(function()
{
dataSource.read({
parametername:jQuery("#valueoffeild").val()
});
var grid = jQuery("#grid").data("kendoGrid")
grid.refresh();
});
I am using Kendo UI v2014.1.528
Binding data in Kendo Grid like below
$("#list485").kendoGrid({
dataSource: dataSource,
sortable: true,
columns: [
//Column List
]
);
It gives me a grid with "Sort" and "Add New Record" feature.
If i click on "Add New Record" button, it adds an empty record in the first row of the grid. This is fine.
But if i sort the grid on any column and then click on "Add New Record" button, the empty row for new record gets added somewhere in between the existing rows.
Can someone help me understand and fix this issue?
You can clear the sorting or filtering from the Kendo grid while clicking on the custom Add button.
I have added the Razor code
Code to add a custom Add button to catch the Javascript
.ToolBar(toolbar =>{ toolbar.Custom().Name("cmdAddRecord")
.Text("Add New Record")
.HtmlAttributes(new { #id = "cmdAddRecord" }); })
Javascript to clear the sorting and filtering.
$("#cmdAddRecord").click(function (e) {
var grid= $("#Grid").data("kendoGrid");
var sorting = grid.dataSource.sort();
var filtering = grid.dataSource.filter();
if (filtering) {
grid.dataSource.filter(null);
}
if (sorting) {
grid.dataSource.sort(null);
}
grid.addRow();
e.preventDefault();
});
I am using Kendo UI grid without pagination. I have set the below code to load the data in the grid view while scrolling
scrollable: { virtual: true },
My problem is, I have selected 100th row in the grid by scrolling . I am refreshing the grid. After refresh, I need to select the 100th row again. Is it possible ?
Regards
Senthil
After refresh select the row you need as shown below
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(100)");
For more info check out kendo DOC http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select
Basically the question is annotate the row that you have selected when it changes to do so and then in dataBound event select that same row.
In order to save the selected row you can do:
change: function (e) {
// Save some information from the selected row
var item = this.dataItem(this.select());
// Here we save uid
var uid = item.uid;
this.selectedRow = uid;
},
dataBound: function (e) {
// If we have any row selected
if (this.selectedRow) {
// Use this.select for selecting it
this.select("tr[data-uid='" + this.selectedRow + "']");
}
}
You can see this here: http://jsfiddle.net/OnaBai/eLk7zkzs/
I have both TreeView and Grid on the same page and I need to populate the TreeView from the grid data. So the flow is like this:
User selects a something from a dropdown and clicks on a button -> web service call -> populate the grid with data from web service -> populate TreeView with some massage of the grid data
The logic to populate TreeView is currently in the grid.dataSource.fetch() method like this:
// this function is called when user clicks on the button
function getData() {
grid.dataSource.read();
grid.dataSource.page(1);
grid.dataSource.fetch(function () {
var data = this.data();
... // logic to massage the data to populate TreeView
...
}
}
However, if the user selects another thing from the dropdown and clicks on the button again, this.data() seems to have the old data (fromt the 1st time), as a result, TreeView is populated with old data.
Which is the right event/method other than fetch() I should use to put my logic in?
I think you should use kendoGrid's dataBound event.
http://docs.kendoui.com/api/web/grid#events-dataBound.
Here is the sample code for kendoGrid dataBound event handler:
function Grid_DataBound(e) {
console.log("Grid_DataBound", e);
var grid = e.sender;
var dataItems = grid.dataSource.view();
console.log(dataItems);
var treeData = new Array();
for (var i = 0; i < dataItems.length; i++) {
treeData.push({
OrderId: dataItems[i].OrderID,
ShipName: dataItems[i].ShipName
});
}
var dataSource = new kendo.data.HierarchicalDataSource({
data: treeData,
schema: {
model: {
id: "OrderId"
}
}
});
$("#treeview").data("kendoTreeView").setDataSource(dataSource);
}
Let me know if you need full sample code.
I am trying to change the columns collection of my Kendo grid in the below way.
var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
.success(function (data) {
grid.columns = data;
})
.error(function (data) {
console.log(data);
});
This is changing the column collection but not reflecting immediately in my grid. But when I try to perform some actions in the grid (like grouping), then my new column set is appearing.
Please let me know how can I achieve this.
Regards,
Dilip Kumar
You can do it by setting the KendoUI datasource, destroy the grid, and rebuild it
$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;
$.ajax({
url: "/Home/Load",
success: function (state) {
state = JSON.parse(state);
var options = grid.options;
options.columns = state.columns;
options.dataSource.page = state.page;
options.dataSource.pageSize = state.pageSize;
options.dataSource.sort = state.sort;
options.dataSource.filter = state.filter;
options.dataSource.group = state.group;
grid.destroy();
$("#grid")
.empty()
.kendoGrid(options);
}
});
});
here you can just do this :
var options = grid.options;
options.columns = state.columns;
where you can retrieve the columns in a session or in a db
This jsfiddle - Kendo UI grid dynamic columns can help you - using kendo.observable.
var columns = data;
var configuration = {
editable: true,
sortable: true,
scrollable: false,
columns: columns //set the columns here
};
var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel); //viewModel will be data as in jsfiddle
For the ones who are using Kendo and Angular together, here is a solution that worked for me:
The idea is to use the k-rebind directive. From the docs:
Widget Update upon Option Changes
You can update a widget from controller. Use the special k-rebind attribute to create a widget which automatically updates when some scope variable changes. This option will destroy the original widget and will recreate it using the changed options.
Apart from setting the array of columns in the GridOptions as we normally do, we have to hold a reference to it:
vm.gridOptions = { ... };
vm.gridColumns = [{...}, ... ,{...}];
vm.gridOptions.columns = vm.gridColumns;
and then pass that variable to the k-rebind directive:
<div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
</div>
And that's it when you are binding the grid to remote data (OData in my case). Now you can add or remove elements to/from the array of columns. The grid is going to query for the data again after it is recreated.
When binding the Grid to local data (local array of objects), we have to somehow postpone the binding of the data until the widget is recreated. What worked for me (maybe there is a cleaner solution to this) is to use the $timeout service:
vm.gridColumns.push({ ... });
vm.$timeout(function () {
vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
}, 0);
This has been tested using AngularJS v1.5.0 and Kendo UI v2016.1.226.
I'm use this code for change columns dynamic:
kendo.data.binders.widget.columns = kendo.data.Binder.extend({
refresh: function () {
var value = this.bindings["columns"].get();
this.element.setOptions({ columns: value.toJSON });
this.element._columns(value.toJSON());
this.element._templates();
this.element.thead.empty();
this.element._thead();
this.element._renderContent(this.element.dataSource.view());
}
});
Weddin
Refresh your grid
.success(function (data) {
grid.columns = data;
grid.refresh();
})
Here is what i use
var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
grid.setOptions({ columns: columns });
grid._columns(columns);
grid._templates();
grid.thead.empty();
grid._thead();
grid._renderContent(grid.dataSource.view());
I think a solution for what you are asking is to call the equivalent remote DataSource.read() method inside of the function. This is what I used to change the number of columns dynamically for local js data.
$("#numOfValues").change(function () {
var columnsConfig = [];
columnsConfig.push({ field: "item", title: "Metric" });
// Dynamically assign number of value columns
for (var i = 1; i <= $(this).val(); i++) {
columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
}
columnsConfig.push({ field: "target", title: "Target" });
columnsConfig.push({ command: "destroy", title: "" });
$("#grid").data("kendoGrid").setOptions({
columns: columnsConfig
});
columnDataSource.read(); // This is what reloads the data
});
Refresh the grid
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
Instead of looping through all the elements. we can remove all the data in the grid by using a single statement
$("#Grid").data('kendoGrid').dataSource.data([]);
If your grid is simple and you don't need to configure special column-specific settings, then you can simply omit the columns argument, as suggested in the API reference.
Use autogenerated columns (i.e. do not set any column settings)
... and ....
If this [column] setting is not specified the grid will create a column for every field of the data item.
var newDataSource = new kendo.data.DataSource({data: dataSource}); $("#grid").data("kendoGrid").setDataSource(newDataSource);
$("#grid").data("kendoGrid").dataSource.read();
After fighting this for a day and seeing hints in this thread that Kendo had simplified this problem, I discovered you can just use setOptions with a single property.
.success(function (data) {
grid.setOptions({
columns: data,
});
})
Grid Set Options