Any idea what’s wrong with the following JS Fiddle : https://jsfiddle.net/walker123/peguh5rt/
I am using jqwidgets JS library and having one issue in displaying the dropdown under Year column. As can be seen in the code below, the Year column is not displaying the jqxDropdownList unless I click on it. For example, when I clicked on the first cell of Year column, it showed me the list as shown in the image here.
Just to clear things up, the current behaviour is that you click in a year field and a dropdown list appears, and you need to click again to drop down the list.
You are wanting just a single click in a year field to automatically dropdown the list, showing the available options.
As I suspect that the dropdown is not a standard HTML dropdown, this is likely to require specialised knowledge about jqwidgets to resolve the issue.
I see in the list of properties that the autoOpen property can be used to automatically open the dropdown list when your mouse is on it.
editor.jqxDropDownList({
autoOpen: true,
autoDropDownHeight: true,
source: list,
selectedIndex: 0
});
Thanks Paul. For some reason, it was not opening for me when I mouse on it after setting the above property to true.
That’s odd as it works for me. I err’d the first time calling it autoopen, which was wrong. It’s autoOpen instead.
There is also an open method that I see in that same list. Perhaps combining autoOpen with that will be better?
createeditor: function(row, column, editor) {
var list = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'];
var dropdown = editor.jqxDropDownList({
autoDropDownHeight: true,
autoOpen: true,
selectedIndex: 0,
source: list
});
$(dropdown).jqxDropDownList('open');
}
Is this how you are seeing this ? https://jsfiddle.net/walker123/peguh5rt/83/
It does shows the list on mouse over bt only after clicking the cell.
Okay good, yes on clicking the cell.
Are you wanting no click to happen at all, so that only hovering results in the dropdown being shown?
That seems result in poor usability, so I’m curious about what else you might intend.
I am basically looking for something like the default functionality - just like they have shown here:
Basically, I am wanting it to display the placeholder and a dropdown arrow so that users would know that they need to click there to see the drop down list of years. Right now, that is happening only when user clicks on that particular cell. I tried adding placeholder thing (https://jsfiddle.net/walker123/peguh5rt/91/)but it shows select item only when I click on the cell. I was hoping if it’s possible to show it as soon as the grid loads.
Okay, let’s see if I’m understanding you right. You want all of the dropdown lists to appear in the year column, closed, so that they can then click on the year they want to set and take action from there.
I think we’re on the same page now.
Going back to the original code, the createeditor function is where you currently have the code to create the dropdown list, but that only runs once you’ve clicked in the cell.
It seems clear that the code needs to be elsewhere, but I think that it’s going to require someone more familiar with jqwidgets to fully resolve the matter.
Thanks for your inputs. I was looking at some of my old JS Fiddles I think I may have to do something like this : https://jsfiddle.net/walker123/m8y2p0wq/2/
It has the following for displaying the icon.
var iconrenderer = function(row, columnfield, value, defaulthtml, columnproperties) {
return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + newAdapter.formatDate(value, 'd') + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
}
But I might have to figure out how to display a placeholder on the left side of dropdown icon saying Select a year or something similar instead of date.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.