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.
Related
I have a kendo grid and I am hiding the top row showing all the headers. I am doing this to give it a cleaner appearance and the users should know instantly the data in each column after some use.
I want to add the column names in the tooltip of each cell in case a new user comes in, they can hover over the data and see the column name.
I have the code below but I need to know how to target the column name.
myGrid.kendoTooltip({
filter: "td",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
myGrid.kendoTooltip({
filter: "th[data-title]",
content: function (e) {
if (e.target) {
var target = e.target;
return $(target).text();
}
}
});
Modified the filter to "th" in order to show tooltip on column headers. Further modified with [data-title] to only show tooltip where there is a title. Thus, disabling tooltip or mouseover on columns with no title. Online resources say to add [title] but that alone does not work. Hopefully this helps someone.
I have to change in one function, after the initialization of a datatable, bSearchable property of a column. I need first to enable and then disable it.
I found an example for visibility:
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
Can something similar be used also in my case? Something like column.seachable?
This is an old question, but one that cost me several hours to research the answer to... mostly based on my lack of JS skill though.
The usecase was that I have a table with an ID column that is a GUID. This Id is seldom used uses a lot of space, so it's hidden and not searchable by default. But for internal users who might have access to logs or the database, we need to be able to search the ID column as well.
I added a checkbox for these users and it should change visibility and the searchable attribute of the ID column.
My solution is based on another question regarding searching on columns. But in this question, the search was only intended on one single column and not on all searchable columns as well (normal DataTable.search() API). Sadly, to change the searchable property, there seems to be no public API. If you change the searchable property, you have to invalidate the data in the table afterwards, otherwise the columns data will still be / not be present in the tables aoFilterData. This forces the table to reload the data from the datasource (in this case, the DOM).
I had a lot of problems with registering the eventhandlers at the right place. The filter field is not present at the first draw event of the table, so i had to register the handlers in the init event that is fired after the table is fully initialized.
var userTable;
var idSearchCbx;
var searchField;
$(document).ready(function () {
userTable = document.getElementById("table-users");
if (userTable) {
userTable = $("#table-users").DataTable(
{
"columnDefs": [
{
//First column invisible and not searchable by default
"targets": [0], //first column = ID
"visible": false,
"searchable": false
}],
//Other initialization options
); //Table creation
userTable.on("init",
function () {
$("input[type='search']").on("change cut input keypress keyup paste search recheck",
function () {
var searchValue = $(this).val();
userTable.search(searchValue).draw();
//width attribute is calculated and added to the table
//it loses 2 pixels everytime the checkbox is checked/
//unchecked somehow - so delete it
document.getElementById("table-users").removeAttribute("style");
});
idSearchCbx = $("#cbx-search-id");
idSearchCbx.on("change",
function () {
if (this.checked === true) {
//this makes the first column searchable, not official API
userTable.context[0].aoColumns[0].bSearchable = true;
//make it visible as well, official API
userTable.columns(0).visible(true);
//invalidates cached table data so that the column values are
//added to the filterdata
userTable.rows().invalidate().draw();
} else {
userTable.context[0].aoColumns[0].bSearchable = false;
userTable.columns(0).visible(false);
userTable.rows().invalidate().draw();
}
//trigger the normal search again so that the
//filter is / is not applied to the first column
$("input[type='search']").trigger("recheck");
});
}); //DT on init
} //table present
});//document ready
I assume context is related to settings(), so keep in mind that names in the context might change and this is most likely not version-stable even in minor releases. But I didn't find any other way. Hope it helps someone.
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 */
}
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.
I'm using the jqGrid and have 3 columns that can NOT be sorted. At this point the cursor changes to a hand when the user hovers over the headers regardless of sorting set to true or false. I'd like that cursor to be something other than a hand (text or pointer) on those column heads. It's confusing to the users this way. Is this something that can be set?
Thanks,
Mark
I find the question very good. So +1 from me.
You are not the first person (and not the last one) who wish to have another cursor on non-sortable columns. It's pity, but jqGrid gives you not classes or some other simple attributes which can be used to find the elements at which one can set CSS "cursor:default".
So I suggest to do this with the following code:
var myGrid = $("#list");
// create the grid
myGrid.jqGrid({
// all jqGrid parameters
});
// fix cursor on non-sortable columns
var cm = myGrid[0].p.colModel;
$.each(myGrid[0].grid.headers, function(index, value) {
var cmi = cm[index], colName = cmi.name;
if(!cmi.sortable && colName!=='rn' && colName!=='cb' && colName!=='subgrid') {
$('div.ui-jqgrid-sortable',value.el).css({cursor:"default"});
}
});
You can see on the demo live that the method work. In the demo the last column 'Notes' is non-sortable.
It would be nice if such behavior would be standard in the next version of jqGrid. I will try to find time and to write suggestion what from the code of jqGrid should be changed to make the behavior out-of-the-box.
UPDATED: The problem with the cursor on non-sortable columns is not exist more in free jqGrid 4.8.
Welcome to SO.
Absolutely. CSS:
th.unsortableclass {
cursor: default;
}
Now apply that class to your column headers that aren't sortable.
Oleg's example worked great but I had a request to always show the arrows if the column was sortable. I know I'm commenting but thought some one might have the same requirement.
So I added this to his loop:
jQuery('span.s-ico',value.el).remove();
Then after his code runs:
jQuery(".s-ico").show();
And then added this to my grid create:
onSortCol:function(index, iCol, sortorder){
// redisplay all arrows
jQuery(".s-ico").show();
}
$("jquery selector to pick only non-sorted columns").css("cursor", "default");