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/
Related
I would like to remove row from Treelist after click in button. I bind function in event "click: remove". Firstly , I choose a row and next try remove object from DataSource. And this point is not correct.
remove: function () {
var that = this;
if (this.isGridSelected) {
var arr = [];
arr = this.selectedRow.toJSON();//this line show selected row
this.roleDataSourcePrzypisane.remove(this.arr);//I think this row is wrong ...Remove no work
console.log(this.roleDataSourcePrzypisane);
this.set("roleDataSourcePrzypisane", this.roleDataSourcePrzypisane);
} else {
iwInfo('Please choose row', 'warning');
}
}
function removeRow(e) {
var treelistCurrentInstance = $("#treelist").data("kendoTreeList");
var currentRow = $(e).closest('tr');
treelistCurrentInstance.removeRow(currentRow);
}
I have tried something similar, i'm taking reference of current row by instance of button and using removeRow method of kendo treelist.
Assume a button control:
<button id="btn">Remove selected row</button>
The click event removes a selected row in the kendoUI jQuery TreeList control:
$("#btn").click(function()
{
let Treelist = $("#treelist").data("kendoTreeList");
let Row = Treelist.select();
Treelist.removeRow(Row);
});
Ensure that the TreeList is editable, e.g. with:
"editable": true
in the TreeList creation definition, otherwise the .removeRow() method won't work.
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 a custom formatter to create hyperlinks in one of the columns of my grid.
In my code, there are cases when I need to disable the selected row. The row disabling works as I want it to, but the hyperlink for that row is not disabled. I can not select the row and all the other column values are displayed as grey colored to indicate that the row is disabled. The only column whose content does not change color is the one having links.
Any ideas on how to disable links?
This is my loadComplete function:
loadComplete: function (data) {
var ids =jQuery("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var rowId = ids[i];
var mod = jQuery("#list").jqGrid('getCell',ids[i],'mod');
if(mod=='y'){
jQuery("#jqg_list_"+rowId).attr("disabled", true);
$("#list").jqGrid('setRowData',ids[i],false, {weightfont:'bold',color:'silver'});
var iCol = getColumnIndexByName.call(this, 'adate');
$(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
$(row.cells[iCol]).children("a").click(function (e) {
e.preventDefault();
// any your code here
alert("No Good");
return false;
});
});
}
}
}
I want the links disabled in all the rows where the value of the column mod=y
You can try to use onClick callback of dynamicLink formatter described here, here and here. It gives you maximum flexibility. Inside of onClick callback you can test something like $(e.target).closest("tr.jqgrow").hasClass("not-editable-row") and just do nothing in the case.
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