I am working on a Kendo UI grid. I have a grid which contains data from an external source. Also I have a radio button assigned to each row as a template.
How can I make the radio button select when I click a row? Currently, I have to click on the radio button to make it selected.
I'm using a checkbox instead, and here is how I am defining it.
columns.Bound(x => x.IsChecked).ClientTemplate(
"<input name='IsChecked' class='chkBox' type='checkbox'
data-bind='checked: IsChecked' #= IsChecked ? checked='checked' : '' #/>");
And then on click function of the grid
$('#Grid').click(function () {
var gview = $("#Grid").data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
var bool = selectedItem.IsChecked;
selectedItem.set("IsChecked", (bool) ? 0 : 1);
console.log(selectedItem);
//This is what you need to do to keep the row selected.
gview.tbody.find("tr[data-uid='" + selectedItem.uid + "']")
.addClass("k-state-selected");
})
If you view the selectedItem in the console, you will see that kendo adds a uid property.
So we are findind that uid and adding the k-state-selected class.
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 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 RadGrid in with all rows in EditForm mode. This Radgrid has virtual scrolling. I need to jump (scroll) to a specific row.
I've tried several options. To put a row in select is not applicable in this case. I now have tried:
RadScriptManager.RegisterStartupScript(Page, typeof(RadGrid), "myScript", "scrollItemToTop('" + e.Item.ClientID + "');", true);
in the ItemDataBound, but the :
function scrollItemToTop(itemID) {
$('.rgVragenPanel').scrollTo(0, $telerik.$($get(itemID)).offset().top);
}
does not seem to work.
Any thoughts on how to best tackle this?
try this Scrolling to the Selected Item
I select the item in the code behind in the databound event.
Set one of the items in the control as selected.
Provide a handler for the client-side GridCreated event.
In the event handler, locate the selected row using the GridTableView object's get_selectedItems() method.
Use the RadGrid object's GridDataDiv property to access the DOM element for the scrollable region of the grid.
Use the DOM element for the row to check if it is visible in the scrollable region. If it is not, set the scrollTop property of the scrollable region to scroll the grid so that the selected row is showing.
The following example demonstrates this technique:
CopyJavaScript
<script type="text/javascript">
function GridCreated(sender, eventArgs) {
//gets the main table scrollArea HTLM element
var scrollArea = document.getElementById(sender.get_element().id + "_GridData");
var row = sender.get_masterTableView().get_selectedItems()[0];
//if the position of the selected row is below the viewable grid area
if (row) {
if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
//scroll down to selected row
scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
}
//if the position of the the selected row is above the viewable grid area
else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
//scroll the selected row to the top
scrollArea.scrollTop = row.get_element().offsetTop;
}
}
}
Notice : The function does not work on page postbacks. you should triger directly from javascript (i notice that the ongridcreated event of the grid is not fired on the Telerik example).
So a better way is to handle the scrolling with JQuery like this :
1) Create a function for a specific grid
2) At the telerik code replace the sender with var sender = $find("<%= RadGrid1.ClientID%>");
3) $(window).load(function () {
thefunctiontoscrollthegrid();});
I searched all over and can't seem to find the answer.
I have a MVC3 project with a WebGrid on it. The first column is a Select that is currently using the normal item.GetSelectLink to create a link to select that row.
I want this to be a checkbox instead of the test "Select". When the user hits the checkbox I want that row in the grid to be selected and the box to become "checked".
I would like the checked and unchecked states to be images that I provide.
How do I do this?
Unless you're doing something fancy with Ajax, the "select" link refreshes the page with "Selected=index" added to the query string. That would be an unusual experience, because people aren't used to checkboxes triggering a page reload.
You could do something like this, which completely mimics the "Select" link functionality. First add the checkbox to the row:
grid.Column(
format: (item) => #Html.Raw("<input class='select' type='checkbox'" + ((grid.SelectedRow == item) ? "checked" : "") + " />")
)
Then add some Javascript to handle the checkbox clicks:
var index = 1;
$("input.select").each(function () {
$(this).data('row', index);
$(this).click(function () { window.location = "?Selected=" + $(this).data('row'); });
index++;
});
i have a status column in my model which is true or false.
i show this column on telerik grid for mvc when item is true checkbox is checked and while
false is unchecked.
Problem is i want bind custom event to checkbox to toggle item status.
How can bind custom event to checkbox and on check or uncheck update item.
I show in grid view :
columns.Bound(o => o.Status).ClientTemplate("<input type='checkbox'
name='Status' value='<#= Status#>' />");
You can either use jQuery:
$("#Grid").delegate("[name=Status]", "click", function() {
var checkBox = this;
alert(checkBox.checked);
});
or add an onclick attribute to the checkbox:
columns.Bound(o => o.Status).ClientTemplate("<input type='checkbox' name='Status' value='<#= Status#>' onclick='checkboxClicked(this)' />");
function checkboxClicked(checkBox) {
alert(checkBox.clicked);
}