jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Dropdownlist popup within Grid boundary
Tagged: DropDownList Height
This topic contains 3 replies, has 2 voices, and was last updated by Vladimir 9 years, 10 months ago.
-
Author
-
I am facing issue with dropdownlist popup going out of the grid. I have gone through following post.
http://www.jqwidgets.com/community/topic/dropdownlist-height-issue
Requirements :
1) keep Dropdownlist popup within Grid boundary.
2) Fix the Dropdownlist height so that popup has scrollbar as it has too many items.I am using the below code :
columns: [ { text: 'Category', datafield: 'categoryId', displayfield: 'category', columntype: 'dropdownlist', cellclassname: 'group1', renderer: this.renderGroupHeader1, width: 175, columnGroup: "BudgetItem", createeditor: function (row, value, editor) { editor.jqxDropDownList({ source: categoryDataAdapter, displayMember: 'Name', valueMember: 'Id', dropDownWidth: 200, dropDownHeight: 100, autoDropDownHeight: auto, enableBrowserBoundsDetection: true }); }, cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) { if (newvalue.value != oldvalue) { $("#jqxgrid").jqxGrid('setcellvalue', row, "subcategory", ""); }; }, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) { if (value == "" && IsInvalid == true) { var element = $(defaulthtml); element.css({ 'border': '1px solid Red', 'width': '96%', 'height': '75%', 'margin': '2px' }); return element[0].outerHTML; } } }]
Result :
1) Category DropDownList popup is getting displayed within grid.
2) DropDownList height is not getting set to 100, it comes with maximum height without scrollbar even though I have set dropDownHeight property.Can anyone please help me
Regards,
YatinHello Yatin,
The
dropDownHeight
property is only applied whenautoDropDownHeight
is set to false.In the mentioned thread the workaround uses a variable auto which is set depeneding on the number of items loaded. And is then used to set the autoDropDownHeight property.
var number = source.length; var auto; if (number > 10) { auto = false; } else { auto = true; };
In the fragment you’ve shown, you are using the ‘auto’ variable, but you have not included the code logic behind it, so I guess your problem is somewhere there.
Best Regards,
VladimirjQWidgets Team
http://www.jqwidgets.comHi Vladimir,
That’s correct, but It doesn’t solve the issue.
The problem is, for the last row when I select Category DropDownList in cell, it opens up the popu menu toward upside. However for the second last row, popu menu opens up downward which is going out of the screen and eventually hide some of the DropDownList items.
Is there anyway I can control the Dropdownlist popup menu to be opened upside/downside based on the vertical position of the row in the grid ?
Thanks,
YatinHello Yatin,
I have tested the functionality using this demo and I can see that it is working as expected. When I am using a small browser window the menu is correctly opened to the direction where it has enough space.
Note that the menu is attempting to recognize browser boundaries, and not grid boundaries. If however, you don’t want it to get out of the grid boundaries, I am afraid that there is no such option.If you are still having an issue with browser boundries can you please provide a fiddle with the problem and steps to reproduce it?
Best Regards,
VladimirjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.