I am using a handsontable, I customize the error in cells.
var cell = hot.getCell(rowKey, id);
$(cell).css('background-color', '#ff4c42');
$(cell).text(message);
$(cell).css('color', 'white');
Now when I scroll up and down and cells with error style disappeared, when I scroll to them again the style disappeared!
I made this example JSFiddle for you.
afterValidate: function(isValid, value, row, prop, source) {
if (row == 2 && hot.propToCol(prop) == 2) {
hot.setDataAtCell(row, hot.propToCol(prop), 'error');
}
},
invalidCellClassName: 'myInvalidClass',
You need to declare a validator and set a invalidClass in your css.
You can't update the css with your method because the Handsontable settings doesn't have this parameters and when you scroll, it re-render the table and "delete" your changes.
Related
Is there any way to hide the nav-bar in jqgrid and reappear on selecting the row?
And how to reload the grid dynamically after selecting new value
To show or to hide the navigator bar one need to call show/hide jQuery-method on the div having "navtable" class. The div contains all buttons on the bar. If you use, for example, pager: "#mypager" then to hide the navigator bar one need do the following:
$("#mypager").find(".navtable").hide();
In more common case you can use the method
var visibilityNavBar = function (show) {
var pagerSelector = $(this).jqGrid("getGridParam", "pager");
$(pagerSelector)
.find(".navtable")[show ? "show" : "hide"]();
};
and to call it inside of onSelectRow callback
onSelectRow: function (rowid, status) {
visibilityNavBar.call(this, status);
}
To hide the navigator bar initially you can call
visibilityNavBar.call($("#list")[0], status);
directly after calling of navGrid method.
The demo https://jsfiddle.net/OlegKi/s2qkh9mn/ demonstrates the code. On selecting of a row the nav-bar will be displayed, on deselection it will be hidden.
When a Kendo grid cell is open for editing, what is the best way to close the cell (and move to the next cell) with the right arrow key?
Take a look on the following snippet. It is a simple way for doing what you want:
// Bind any keyup interaction on the grid
$("#grid").on("keyup", "input", function(e)
{
// Right arrow keyCode
if (e.keyCode == 39)
{
// Ends current field edition.
// Kendo docs says that editCell method:
// "Switches the specified table cell in edit mode"
// but that doesn't happens and the current cell keeps on edit mode.
var td = $(e.target)
.trigger("blur");
// Find next field
td = td.closest("td").next();
// If no cell was found, look for the next row
if (td.length == 0)
{
td = $(e.target).closest("tr").next().find("td:first");
}
// As ways happens on kendo, a little (ugly)workaround
// for calling editCell, because calling without
// the timer doesn't seem to work.
window.setTimeout(function()
{
grid.editCell(td);
}, 1);
}
});
I don't know why but I could not save a Fiddle for that, I got 500 Internal error. Anyway it seems to achieve what you need. The grid needs to be in edit mode incell.
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
I am having a little trouble figuring out how to turn on the grid visualization: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids.
Can someone point me to more help or share an example?
This can be found deep within the singularitygs Ruby gem:
Grid Overlay & Background
There are three ways you can display a grid:
Manually apply the background to the element
.container {
#include background-grid;
}
Add a switch to toggle an overlay -
#include grid-overlay('.container');
Toggle grid with JavaScript
#include grid-toggle in an SCSS * { … } or html { … } element.
Add [data-development-grid="show"] to item you want grid applied to
Add "grid.js" to the HTML head
The first will apply a grid background to your container calculated using your
grid settings, media breakpoints etc.
The second will add a switch to your page which allows you to view a grid
overlay over your container (or if none is provided) by hovering over
the switch. if you need your mouse for other things you can toggle the overlay
on permanently by inspecting and checking :hover in your styles panel.
The third will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard.
I couldn't get grid.js to work, so I rewrote it using a bit of jQuery. Here is my version:
// A working jQuery/javascript script for the hide/show grid
$(document).ready(function() {
$('html').keypress(function(event) {
if (event.which === 103) {
var wrap = document.getElementById("wrap");
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
});
});
I find method 2 is rather neat. You get a symbol of 4 vertical bars in the bottom left of your webpage and the grid appears with mouseover. Similar to Susy's Home Page
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();});