Hi,
PFA sample we have a IGGrid with a column which has a datepicker.
When the attached html file is opened from a chrome browser and go to the 4th row having the store 124, try opening calendar control in any of the New Set Date / Print Date or discontinue Date column(for row 4). Calendar opens with March being displayed for month value now try changing the month to Either May or August, the calendar control disappears and nothing is displayed in the cell.
This issue occurs only for 4th row and when we modify the month to May or August (these 2 months have 6 weeks displayed in the calendar).
Thanks,
Kiran
Hello Kiran,
What version of Chrome are you experiencing this issue on? I am testing with "41.0.2272.89 m" and I am unable to reproduce the behavior you are describing using your sample. When I open the page, I double click the New Set Date cell for row 124 and I open the drop down calendar. If I navigate to May or August with the navigation arrows in the calendar or through the month dropdown, the month displays and I can click a date as expected. I did notice an issue where the selected date is placed in the first row's cells and I explain this below.
Do any of your colleagues experience the issue you are describing as well? It may help to clear your browser's cache if this issue is only occurring for you.
After further examining your sample, I noticed that your test data does not include the primaryKey you have set in the igGrid (StoreDisplayId). The igGrid relies on the primaryKey for many features and this may be causing some issues for you. Adding a primaryKey to the data resolves the issue I mentioned above where the selected date is placed in the first row's cells.
Please try including a non-null, unique primary key in your test data rows and let me know if this helps resolve the issue.
Looking forward to hearing from you.
Hi Michael,
Yes all my team members are facing this issue on Chrome.
You are right we missed the Primary Key in the given sample and StoreSequenceNumber can be set as a primary key for the sample attached above.
We are using Chrome Version 41.0.2272.89 m.
One observation when retested is when we click on the row having 124 the calendar dropdown is displayed at the bottom of that cell and not above.
Can you check if the calendar window appears at the top or bottom on your browser. We are consistently able to see this issue on chrome, clearing cache did not work for us.
Attached the Screen resolution and the calendar popup shown on chrome browser for reference.
Thank you for the information and the images. After viewing your screenshot, I realized that my DatePicker's dropdown was not close to the bottom of the page. After resizing my browser window so the dropdown appears at the bottom of the page, I am able to reproduce this issue. This is being caused due to the May and August months expanding the calendar below the page and causing a scrollbar to appear.
I have created a support case for you with an ID of CAS-152904-T4G8C9. The matter has been determined to be a development issue and has been logged in our tracking system with ID: 190949.
I will leave this case open and update you with any new information. You can view the status of the development issue connected to this case by going to the “Account” tab on our website, selecting "My Support Activity" and then this support case will be listed there. Then, you may select the "Development Issues" tab to view details of this development issue.
Please let me know if you have any questions.
Hi Kiran,
After our developers have investigated this, this is a behavior that is working by design. When the igDatePicker moves more than 2 pixels, the drop down will close. What is happening is that the extra row in the dropdown for the 6th week is causing the page to expand, which displays the vertical scrollbar. When the scrollbar is shown, the page resizes and since the grid and columns are percentage widths, the grid's width changes and the igDataPicker is shifted, which causes the drop down to close.
I would recommend using a pixel based width for either the grid or the columns to avoid this issue.
If you have any further questions or concerns with this, please let me know and I will be glad to help.
Hi Michael,We are facing the same issue in our project. How can we specify that the datepicker dropdown should always open with the maximum possible height (ie - for 6 rows/weeks).We have tried the "height" option (https://www.igniteui.com/help/api/2018.1/ui.igdatepicker#options:height) but it is setting the height to the textbox. Also tried with "datepickerOptions: {height: 260}" but didn't worked for me.Thank you