I need to display open a pane where I can display the full text of selected column.
I was referring to
How can I add multiple tooltips on kendo ui grid.
but not getting how to get the tooltip for each column selected.
Thanks in advance.
See if this demo helps you.
The Tooltip widget has a content configuration that accepts either a string or a function returning a string.
This function gets a parameter containing the target for the tooltip which is the element your mouse is hovering over.
You can filter the elements so that only tds pop the tooltip.
Here's how I built and applied the tooltip options object I use in the example:
$("#container").kendoTooltip({
filter: "td",
content: function(e) {return e.target.html();}
});
This example will show a tooltip containing the same content as the cell you're poining at.
If you have any further questions, feel free to ask them.
Related
I have a Kendo UI Chart that contains data that updates every couple of seconds. When the user hovers over the data point a Kendo Chart tooltip appears. However, when new data comes in and the chart is refreshed, Kendo hides the current tooltip, giving the user very little time to read the tooltip.
After looking at the Kendo Chart doc, I tried to use showTooltip() after the chart was refreshed, but was confused with what the filter parameter would be. We have multiple data points on the chart and every point has its own tooltip.
Here is what I have so far:
seriesHover: function (e) {
prevTooltip = e.value;
}
chart.showTooltip(function (point) {
return point.value === prevTooltip;
});
However, it doesn't seem to filter and find the right data point so the tooltip does not get shown.
I would like to refresh the tooltip along with the chart. If a tooltip was active before the chart refresh, then it should update and remain visible after the refresh
I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.
In my application I have used jQuery Highcharts for reports.
In Highcharts, how can I sort the legend items? Means when I click on legend items, it should sort active items on top and hide items at the bottom automatically. Because I have more than 50 legend items in list. plugin has provided the pagination also. but if I active the bottom portion of the items, it will be remains at the bottom. we can't able to find out which items are active.
Is there any function or logic to sort items in legend?
It's not supported. You need to loop through all series and points and then update each series using series.update({ legendIndex: sortedIndex }) function.
I want to allow the user to color selected cells by clicking a button (say, red, green and blue buttons).
To get the selected cells I found this code:
$('div#example1').handsontable(options);
//get the instance using jQuery wrapper
var ht = $('#example1').handsontable('getInstance');
//Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
var sel = ht.getSelected();
//'alert' the index of the starting row of the selection
alert(sel[0]);
But I can't run this code when clicking a button, because the selection "disappear" after clicking and before the function starts to run.
I try following this instruction but I need a workaround this issue.
please add outsideClickDeselects: false, to your options in constructor and you can perform the 'ht.getSelected()' method.
How about using the afterSelectionEnd event to store the selection in a hidden field?
Then when pressing the button, you highligh/color the cells using the hidden selection info.
Would that work?
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.