Hi,I have a WebDataGrid where the columns are editable. The Editor used is the DropDownProvider.When we click on the cell, we show a dropdown as the editor to select items from the dropdown. If the cell text is small then the dropdown shows correctly within the cell. Issue ocurs when the cell text is huge. If we click on the cell, then the dropdown opened will not be within the cell. It opens at the bottom.Please check the sample attached and provide solution for this.STEPS TO REPRODUCE:1. Run the attached sample code.2. Click on any of the cells in the grid. The position of the dropdown editor is correct that is it opens correctly within the cell.3. Now click on the button "Bind Large Text" button. This binds large text in Row2 -> Cell2.4. Now click on the large text cell (Row2 -> Cell2) which opens the Dropdown Editor.5. Observe the position of the dropdown editor.
Thanks,
Hello,
Thank you for the sample shared. The dropdown editor shows up at the vertical middle of the cell it will edit. If you right click > Inspect Element over the given cell you will see that its height exceeds the total grid's height and the dropdown editor appears in the middle. This is by design and is expected. To make this more user-friendly I suggest that you set
white-space: nowrap; style for the grid cells:
<ig:WebDataGrid ItemCssClass="nowrap">
...
<style> .nowrap { white-space: nowrap; } </style>
Please let me know if you have any further questions on the matter.
I'm just following up to see if you have any further questions with this issue. If so please let me know.
This is possible, however you should handle the EnteringEditMode client side event of the grid. In this event you can get the element of the dropdown as follows:
el = ig_controls.Editor1 // will work when ID = "Editor1" and ClientIdMode = "static"
el.style.position = "relative";
el.style.top = "-300px" // will move the element 300px higher then current position. Of course you will want to calculate the number of pixels that want to move the element up/down