jQWidgets Forums

jQuery UI Widgets Forums Grid Dropdownlist popup within Grid boundary

This topic contains 3 replies, has 2 voices, and was last updated by  Vladimir 9 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Dropdownlist popup within Grid boundary #75458

    yatinpatel
    Participant

    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,
    Yatin

    Dropdownlist popup within Grid boundary #75465

    Vladimir
    Participant

    Hello Yatin,

    The dropDownHeight property is only applied when autoDropDownHeightis 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,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    Dropdownlist popup within Grid boundary #75482

    yatinpatel
    Participant

    Hi 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,
    Yatin

    Dropdownlist popup within Grid boundary #75485

    Vladimir
    Participant

    Hello 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,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.