Is there a way to add links or buttons when you hover over a row on a kendo grid? I looked in the documentation and googled for a bit, but I could not find anything. I wasn't sure if I just needed to have my row template be able to show/hide my button/links based on hover over or if kendo grids had something out of the box that would make this easier. Any thoughts? Thanks in advance.
There is nothing out-of-the-box but you can do almost everything.
Lets assume that you want to show a standard button (ex: edit or destroy). Then your column definition is something like this:
columns : [
{ command: [ "edit", "destroy" ] },
// Other column definition
...
]
Next is hiding every button inside this grid identified by grid.
#grid .k-button {
visibility: hidden;
}
And then add a new style for making it visible when the mouse is over it:
#grid .k-button.showme {
visibility: visible;
}
Finally we have to add some handling code for controlling when the mouse is over the row. This is the tricky part:
It cannot be done via CSS (i.e. using :hover) because we want to control when the mouse is over the row but we want to change (add a CSS class) to the button.
Since the grid might be redraw (when you sort, paginate,...) we need to use live event handlers.
So what we do is when the mouse enters a row, we add showme class (make button visible).
$(grid.tbody).on("mouseenter", "tr", function (e) {
$(".k-button", e.currentTarget).addClass("showme");
});
When the mouse exits the row, we remove showme class.
$(grid.tbody).on("mouseleave", "tr", function (e) {
console.log("exit");
$(".k-button", e.currentTarget).removeClass("showme");
});
And here (http://jsfiddle.net/OnaBai/BjuVr/) a running example.
Related
I have two requirements in my project. First, when I click on button, a div should be visible and invisible. I have achieved that using JQuery, as shown in this link.Jsfiddle
Now second requirement is, I'm opening a div in first case, now I have to open same box but as a dropdown list. That means if I click on dropdown Filter, this box given in link should open, and it should overlay if something under it, like in my case I have grid. So dropdown should overlay this grid but not replace it. I have googled it but didn't find any appropriate solution. I just need that control which will do the magic. Not whole code.
if any clarification needed. please comment. thanks.
Commented out the code which I have added. See the fiddle.
First you need to set position: absolute then add the JS to position the dropdown below the button.
JS
$(document).ready(function ()
{
$('#btn').live('click', function (event)
{
$('#div1').toggle('show');
});
// added the following script
var offH = $('#btn').outerHeight();
var offT = $('#btn').offset().top + offH;
var offL = $('#btn').offset().left;
$('#div1').css('top', offT+"px").css('left', offL+"px");
});
CSS
#div1{
display:none;
position: absolute; /* ADDED THIS LINE */
}
I have an interactive basket whereby the user can drag and drop an item into the basket. However, the same item cannot be placed in the basket twice (but it remains visible, albeit faded), so once it is in the basket, the draggable property must be disabled.
I tried doing this:
$("#product_badges li:not(.on)").draggable({
// Options here
});
However, as this just initiates the draggable() property, the element is still draggable even if I do add the on class to it when it has been dropped.
I therefore cannot see a way of achieving this without having several instances for the draggable property like so:
$("#product_badges li:not(.on)").each(function(){
$(this).draggable({
// Options here
}
});
With the above method I can then call the individual product_badge and disable dragging like so:
This only gets called once the item has been placed into the basket (dropped)
$('.item',$('#product_badges')).draggable('disable');
Is there a better way of achieving this? Can you set an HTML element to only be draggable if it does not have a particular class?
Update
See example here: http://jsfiddle.net/mB6GK/2/
use the cancel property.
$("#product_badges li").draggable({ cancel: ".no" })
fiddle:
http://jsfiddle.net/sGguz/
You could use the start event,
$("#container").draggable({
start: function( event, ui )
{ return !$(ui.helper).hasClass('nodrop'); }});
http://jsfiddle.net/mB6GK/4/
I'm trying to create a table of inputs that automatically adds a new row when you enter text in one of the inputs on the bottom line. For the most part, it works fine. However, I'm having some trouble with jQuery UI checkbox buttons.
The checkbox buttons are supposed to change their icon when clicked. This works fine for the original buttons, but the cloned button that appears when you add a new row doesn't work properly.
You can see it in jsfiddle here. To replicate the issue, put some text in the third input down. You'll see that a fourth row appears. If you press the fourth checkbox, you'll see the third checkbox is the one whose icon changes. The wrong button also gets ui-state-focus but doesn't actually get focus, which really baffles me, though the correct button does get ui-state-active and seems, as far as I can tell, to evaluate as having been checked properly.
To be clear, the two checkboxes do not have the same ID, and their labels are for the right checkbox - the createNewRow() function takes care of that. If you comment out the line that turns the checkboxes into jQuery UI checkboxes, you'll see everything works fine. If you console.log the value of $(this).attr('id') in the buttonSwitchCheck function, you'll see that it has the right ID there too - if you click the fourth button, it'll tell you that the id of $(this) is "test4", but it's "test3" (the third button) that gets the icon change.
I'm going mad staring at this and I'd appreciate any help people can give. Here's the code:
// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
if ($(this).prop('checked') === true) {
$(this).button("option", "icons", {
primary: "ui-icon-circle-check"
});
} else {
$(this).button("option", "icons", {
primary: "ui-icon-circle-close"
});
}
}
// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
// Identify the row and clone it, including the bound events.
var row = $(this).closest("tr");
var table = row.closest("table");
var newRow = row.clone(true);
// Set all values (except for buttons) to blank for the new row.
newRow.find('.ssheet').not('.button').val('');
// Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
newRow.find('.ssheetRowId').each(function () {
var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
var idNum = idArr[2] - 0 + 1;
var newId = idArr[1] + idNum;
$(this).attr('id', newId);
$(this).siblings('label.ssheetGetRowId').attr('for', newId);
});
// Add the row to the table.
newRow.appendTo(table);
// Remove the old row's ability to create a new row.
row.removeClass('ssheetNewRow');
row.find(".ssheet").unbind('change', createNewRow);
}
$(document).ready(function () {
// Activate jQuery UI checkboxes.
$(".checkButton").button().bind('change', buttonSwitchCheck).each(buttonSwitchCheck);
// When text is entered on the bottom row, add a new row.
$(".ssheetNewRow").find(".ssheet").not('.checkButton').bind('change', createNewRow);
});
EDIT: I was able to find a solution, which I'll share with the ages. Thanks to "Funky Dude" below, who inspired me to start thinking along the right track.
The trick is to destroy the jQuery UI button in the original row before the clone, then reinitializing it immediately afterwards for both the original row and the copy. You don't need to unbind and rebind the change event - it's just the jQuery UI buttons which have trouble. In the createNewRow function:
row.find('.checkButton').button('destroy');
var newRow = row.clone(true);
row.find('.checkButton').add(newRow.find('.checkButton')).button().each(buttonSwitchCheck);
Try using the newer method .on, that allows for delegation, which should help with the dynamic changes to your DOM:
$(".checkButton").button().each(buttonSwitchCheck);
$("table").on("change", ".checkButton", buttonSwitchCheck);
I'm not sure, but it might help with not having to worry about binding events to specific elements.
Also, you could use it for the textbox change event:
$("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);
Here's your fiddle with my changes: http://jsfiddle.net/Cugb6/3/
It doesn't function any different, but to me, it's a little cleaner. I thought it would've fixed your problem, but obviously hasn't, due to problems with the button widget.
And funny enough, it doesn't seem they "support" cloning: http://bugs.jqueryui.com/ticket/7959
i think you are using deep clone, which also clones the event handler. in your create new row function, try unbinding the change event then rebind on the clone.
Humor me here. It seems like other grids like ExtJs do this out of the box, but for the life of me I can't find any solution to having a grid remain highlighted after a user clicks it. My interim solution is just a quick css rule to highlight a row on mouseover.
Are there really no options to just set this? It seems like I'm going to have to go through a rowSelection model and set it up so that only one row can be selected at a time, is that right?
Your negative tone aside, I see nothing wrong with using the provided Slick.RowSeletionModel and setting multiSelect in grid options to false.
You can do something like this (JSFiddle demo here) :
/////////////////////////////////////////////////////////////////////
// Augment grid object with a method to highlight the currently active row
//
mygrid.highlightActiveRow = function () {
var currentCell;
var $canvas = $(this.getCanvasNode());
currentCell = this.getActiveCell();
$canvas.find(".slick-row").removeClass("active");
if (currentCell) {
$canvas.find(".slick-row[row=" + currentCell.row + "]").addClass("active");
}
};
mygrid.onActiveCellChanged.subscribe(function () {
this.highlightActiveRow();
});
This marks the current row with the class active which can be styled as required:
/* Currently selected row */
#mygrid .slick-row.active
{
background: #ff0000;
}
/* Currently selected cell */
#mygrid .slick-cell.active
{
background: #00ff00;
}
There may be better ways to do this but this worked for me.
I want to create a simple tool so that user can fill colors inside html table fields or whatever the alternative you can suggest.
Take a look at this page:
http://www.olmares.com/Price%20and%20Availability.htm
I am looking for some tool, interface, Javascript or any other way so that my client fill in the table boxes with colors easily. How can I achieve this?
I have added an extra, so when you click on highlighted td, it will remove it.
Working link : http://jsfiddle.net/dEy2H/
CSS
.HighLight {background-color:#ff0000 !important;}
jQuery
$(function() {
$('td').click(function() {
if ($(this).hasClass('HighLight'))
$(this).removeClass('HighLight');
else
$(this).addClass('HighLight');
});
});
you can set csscalass for your table td by javascript.
<Table><tr>
<td cssclass="a"></td><td cssclass="b"></td>
</tr></table>
and your css:
.a{backgroundcolor:red}
.b{backgroundcolor:green}
you need to set up a click handler for your table cells that react by changing the color of the cell clicked in .. in jQuery it'd be something like
var current_color = 'red';
$('td').click(function() {
$(this).css('background-color', current_color);
});
thus whatever the current_color is (changed perhaps via other user interaction) gets applied to subsequently clicked cells.