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();
});
Related
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
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 a Kendo grid with a checkbox as a column along with other columns. I want to get all the rows where the checkbox is checked.
Please give me some idea.
Why not use the multi select feature of Kendo ui Grid
var checkDataSource = new kendo.data.DataSource({
data: checks
});
$("#CheckGrid").kendoGrid({
dataSource: checkDataSource,
change: CheckGridOnChange,
selectable:"multiple",
...
});
function CheckGridOnChange() {
var data = checkDataSource.view(),
selected = $.map(this.select(), function(item) {
return data[$(item).index()].CheckId;//CheckId is my unqiue id for my data, yours would probably be different
});
var ids = selected.join(",");
}
Ref url: Kendo ui grid Events Just hold control and select multiple rows
I am using dhtmlx grid.I have two grids named grid1,grid2.
I have loaded the two grids using json object.
If i select one record in the grid1 and click on the button that record has to load in the second record.I am able to load that selected record in the second grid using document.location.reload(true);with this, the total page is refreshing.but i want to refresh grid2 only.
I want to refresh grid2 only after click on the button.how can i refresh/reload grid2.
You can use Ajax to load and replace the second grid. Let's say the second grid has an id of second-grid, something like
#Ajax.ActionLink("Load Second Grid", "ActionName", new AjaxOptions
{
UpdateTargetId = "second-grid",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
})
will replace what's inside second-grid with the result from ActionName when Load Second Grid is clicked.
You can use onRowSelect handler to catch moment when row clicked in master grid.
And you can use grid.parse API to load new data in second grid.
<script>
grid1.attachEvent("onRowSelect", function(id){
grid2.parse(some_data, "json")
})
</script>