Anyone please tell me how can i select next consecutive row from first page to second page of my kendo grid and reverse back to the previous page ? Kendo Grid API just only gives me information on 'select' and from there I have no clue at all how to implement my desired selection. What I have now is only selecting the row of the selected/active cell. Any insight/references are also appreciated. So far I haven't came across with any examples or article.
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
data.select($("#grid_active_cell").closest("tr"));
},1);
}
});
http://dojo.telerik.com/eSUQO
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
var navrow_uid; ** add this tracking variable;
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
// break this up
// data.select($("#grid_active_cell").closest("tr"));
// fetch next row uid and compare to tracker
var nextrow = $("#grid_active_cell").closest("tr");
var uid = nextrow.data('uid');
if (navrow_uid == uid ) {
console.log("last navigable row");
data.dataSource.page(1+data.dataSource.page());
// best option here would be to set auto-page flag for databound event handler
} else {
data.select(nextrow);
navrow_uid = uid;
}
},1);
}
});
You will want to add a grid data bound handler, and have that check the aut-page flag to see if you need to select first or last row of page.
We are using Kendo menu UI
once we are opening and adding the list menu an activity is being created.But if you are clicking it multiple times multiple activities are being created
how to restrict kendo menu UI multiple clicks?
Code:
function NewAc(arg) {
if (arg.item.id != "Mactive" && arg.item.id != "") {
var scope = angular.element('#Div').scope();
scope.save();
if(!scope.isSaveSuccess) {
selectedItem.preventDefault();
return;
}
default: var selectedActTypePK = arg.item.id;
var parentActId = stageTreeView.Id;
var htmlClient = new htmlContentClient();
htmlClient.getHtml();
break;
}
}
I have two slickgrid and one delete button,
When i click on delete,i want focused grid so that i will delete items.
How to get focused grid ?
This is what i have done so far....
function deleteRow(e, args){
//code to delete items from "grid"
var selectedrows = grid.getSelectedRows();
var len = selectedrows.length;
var itemNo = "";
for(var i=0;i<len;i++)
{
var data = grid.getData().getItem(selectedrows[i]);
dataView.deleteItem(data.id);
itemNo =data.id;
var url = "delete_Item_Master?itemNo="+itemNo;
$.get(url, {itemNo : itemNo},function(data) {
location.reload(true);
});
}
//code to delete items from "metalGrid"
var metalSelectedrows = metalGrid.getSelectedRows();
var mlen = metalSelectedrows.length;
var itemNo = "";
for(var i=0;i<mlen;i++)
{
var mData = metalGrid.getData().getItem(metalSelectedrows[i]);
meyalDataView.deleteItem(mData.id);
itemNo =mData.id;
var url = "delete_subItem?itemNo="+itemNo;
$.get(url, {itemNo : itemNo},function(data) {
location.reload(true);
});
}
}
But this code delete items from both grid..
I think that the correct way to do this is to write your own selection model. It should be a Singleton, and two grids should interact with it. It should know which grid was last active.
But you need to ask yourself is that behaviour is good. What if user will delete an item from another grid - because there's only one button. IMHO every grid should have it's own button. And I work for an ERP company where we got that dillemas everyday ;)
The SlickGrid supports editors for a cell that can be configured to be displayed on click or double click. However I don't see an option where, the editor is VISIBLE by default for all cells without having to click/double click on the cell.
Is it possible to support editors in slick grid where the editors are
"init" by default for all cells?
Is there a known workaround?
Thank you.
I know it's not exactly what you asked for, but I thought I'd add the code below in case anyone finds it useful. It's a semi-workaround and it at least lets the user navigate around the grid and start typing in the cell to edit, without having to "initialise" the edit first by pressing Enter or double-clicking the cell; a bit like editing an MS Excel sheet.
myGrid.onKeyDown.subscribe(function (e, args) {
var keyCode = $.ui.keyCode,
col,
activeCell = this.getActiveCell();
/////////////////////////////////////////////////////////////////////
// Allow instant editing like MS Excel (without presisng enter first
// to go into edit mode)
if (activeCell) {
col = activeCell.cell;
// Only for editable fields and not if edit is already in progress
if (this.getColumns()[col].editor && !this.getCellEditor()) {
// Ignore keys that should not activate edit mode
if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1) {
this.editActiveCell();
}
}
}
}
No. The grid is designed to have one cell editable at a time.
Below is what I ended up with (improved version njr101's answer) to make this work. I've added a check for CTRL key so it doesn't break the copy paste plugin I use on the grid.
function (e) {
var keyCode = $.ui.keyCode,
col,
activeCell = this.getActiveCell(),
activeCellNode = this.getActiveCellNode();
var isInEditMode = $(activeCellNode).hasClass("editable");
if (activeCell && !isInEditMode) {
col = activeCell.cell;
if (this.getColumns()[col].editor && !e.ctrlKey) {
if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1) {
this.editActiveCell();
}
}
}
};
and dont forget to subscribe:
slickGrid.onKeyDown.subscribe();
Update to use editor define in row metadata and not in column definition.
In my case, one row of two contains in cell 1 text editor and one row of two contains nothing.
grid.onKeyDown.subscribe( function ( e, args ) {
var keyCode = $.ui.keyCode;
var activeCell = this.getActiveCell();
if( activeCell ) {
// get metadata
var columnDefinition = grid.getColumns()[ activeCell.cell ];
var rowMetadata = dataView.getItemMetadata && dataView.getItemMetadata( activeCell.row );
var rowColMetadata = rowMetadata && rowMetadata.columns;
rowColMetadata = rowColMetadata && ( rowColMetadata[ columnDefinition.id ] || rowColMetadata[ activeCell.cell ] );
if ( rowColMetadata && rowColMetadata.editor && !this.getCellEditor() ) {
if( $.inArray( e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP, keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK, keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1 ) {
this.editActiveCell();
}
}
}
});
How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.
I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript">
//
function
startRotator(clickedButton, rotator, direction)
{
if
(!rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(
function
()
{
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function
stopRotator(clickedButton, rotator)
{
if
(rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID =
null
}
}
function
showNextItem(clickedButton, rotator, direction)
{
rotator.showNext(direction);
refreshButtonsState(clickedButton, rotator);
}
// Refreshes the Stop and Start buttons
function
refreshButtonsState(clickedButton, rotator)
{
var
jQueryObject = $telerik.$;
var className = jQueryObject(clickedButton).attr("class"
);
switch
(className)
{
case "start"
:
{
// Start button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"startSelected"
);
// Find the stop button. stopButton is a jQuery object
var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"
);
if
(stopButton)
{
// Changes the image of the stop button
stopButton.removeClass();
stopButton.addClass(
"stop"
);
}
}
break
;
case "stop"
:
{
// Stop button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"stopSelected"
);
// Find the start button. startButton is a jQuery object
var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"
);
if
(startButton)
{
// Changes the image of the start button
startButton.removeClass();
startButton.addClass(
"start"
);
}
}
break
;
}
}
// Finds a button by its className. Returns a jQuery object
function
findSiblingButtonByClassName(buttonInstance, className)
{
var
jQuery = $telerik.$;
var ulElement = jQuery(buttonInstance).parent().parent();
// get the UL element
var allLiElements = jQuery("li", ulElement);
// jQuery selector to find all LI elements
for (var
i = 0; i < allLiElements.length; i++)
{
var
currentLi = allLiElements[i];
var currentAnchor = jQuery("A:first", currentLi);
// Find the Anchor tag
if
(currentAnchor.hasClass(className))
{
return
currentAnchor;
}
}
}
//]]>
And the following code for the calls:
<
a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>
')); return false;"
class="stopSelected" title="Stop">Stop
'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
class="start" title="Start">Start
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs
e)
{
Page.RegisterClientScriptBlock(
"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);"
);
}
There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx