i'm using jquery datatable with responsive
the (+) responsive sign show correct when screen size decrease
i had event row click on the table
$('#datatables tbody').on('click', 'tr', function (e) {//Code});
My problem that the responsive button fires both function
the responsive (Default) function that expand the row
and my row click event
is there a way to Prevent that
Edit : Same happens with any attached button on the row if the button is clicked it execute both button click event and row click event
I fixed the problem with UGLY workaround
first i added empty td index 0 so that the responsive button show on it
second i changed the event from tr click to td click
then check for the td index
$('#datatables tbody').on('click', 'td', function (e) {
var tdIndex = this.cellIndex;
if (tdIndex == 0)
{//For Responsive Click leave Empty
}
else { //Normal Code}
i still waiting a better solution
Try https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html
if that does not help please assign a class to the column like:
"columns": [
{ "data": "MyColumn", "className": "toggle-btn-add" }
]
and call it like:
$('#datatables tbody').on('click', 'td.toggle-btn-add', function (e) {//Code});
Hope this helps
Related
I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?
I have the following code for adding tooltip for onclick of a span id as shown below:
new dijit.Tooltip({
connectId: ['gridEditHelp'],
label: 'Double click on an item in the below table to perform inline editing of attributes',
position: ['above']
});
The problem is that I want the tooltip to be visible always on the web page.
Any ideas or existing API available for the same?
Use TooltipDialog instead - or else you will have to mess with the _MasterTooltip manager (there's more or less only one global, reusable tooltip). Then call dijit.popup.open - and never call .close
dijit.popup.open({
popup: new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog."
});,
around: dojo.byId('thenode')
});
I am stuck with one problem with one problem in stop the window from closing using ESC button.
The window gets closed as soon as I click the ESC button from my keyboard. I want the window should not close, instead it should prompt a message box asking 'YOU REALLY WANTS TO close' with two button yes or cancel
If person click yes button the the window should destroy and else the window should be as it is.
but don't know why the window is getting close on ESC press.
I am prompting message as the user click the esc button using below code
listeners: {
show : function(win) {
Ext.create('Ext.util.KeyNav', win.getEl(), {
"esc" : function(e){
alert('hi.. closing');
win.hide();
},
scope: win
});
}
}
now I want the message box to be appeared and based on the person answer things to be happend.
any help ??
There is very convenient onEsc function in window's config. Use it this way:
onEsc: function() {
var me = this;
Ext.Msg.confirm(
'Closing confirmation',
'YOU REALLY WANTS TO close',
function(btn) {
if (btn === 'yes')
me.hide();
}
);
},
Here is live example.
Try using the beforeclose event.
When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.