set current date after open datepicker

[Erik D]

Hi there,

i have a grid with column of type date. when datepicker is open, i want datepicker to select current year if year value in the selected cell is less than some value.

code example is 

http://jsplayground.syncfusion.com/pbc1majd

My code:

columns: [

                    { field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}", 

                     width: 100,

                     editType:ej.Grid.EditingType.DatePicker,

                     

                     editParams: { //minDate: new Date(), 

                          beforeOpen:beforeOpenPopup,

    

                                 } 

                    },

              

            ],

            

            

              editSettings: {

                                    allowEditing: true,

                                    editMode: "batch",//"batch"//"normal"

                                    showConfirmDialog: false

                                },

<script>

      

      function beforeOpenPopup(args)

      {

        var y=args.model.value.getFullYear();

        if(y<=2000)

        {

           //console.log("set current date");

          

           //args.model.value = new Date();  

        }

      }

    </script>

Next question is. After the first click, datepicker shows up and then disappears and I have to click 2.nd time to open it.

Thanks.

[Vignesh Natarajan]

Hi Erik, 

 

Thanks for contacting Syncfusion support. We are happy to assist you. 

 

Query 1: i have a grid with column of type date. when datepicker is open, i want datepicker to select current year if year value in the selected cell is less than some value. 

 

From your query, we understand that you need to change the value to current year when it is below some certain date. We have achieved your requirement by setting the current year value to the cell by using setmodel in the open event of ejDatePicker based on some condition.  

 

Refer the below code example and sample link, 

 

   $("#Grid").ejGrid({ 

                  ………….. 

 

                columns: [ 

               ………….. 

                    { field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}", width: 100, editType: ej.Grid.EditingType.DatePicker, editParams: { open: open } }, 

                    …………. 

 

                ], 

………………… 

 

        }) 

    </script> 

    <script> 

 

 

 

        function open(args) { 

            if (args.model.value > new Date(8364186e5)) 

 

                this.option("value", new Date()); 

        } 

    </script>     

 

 

Sample Link: http://jsplayground.syncfusion.com/mup3awjr  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejdatepicker#events:open  

 

Query 2 : Next question is. After the first click, datepicker shows up and then disappears and I have to click 2.nd time to open it. 

 

We are unable to reproduce the reported issue at our end. Please refer the shared sample. After referring the sample still facing the issue please get back to us with the following details, 

 

1. Share the Issue replication procedure.
2. Share the video demo of the issue.
3. If possible, reproduce the issue in the provided sample and revert us back.

 

Regards, 

Vignesh Natarajan 

[Erik D]

Hi, thanks for help, the first issue seems to be solved.

In relation to the 2.nd issue, in your example, scroll down to the last row and click at "Order Date".

You will see the popup for datepicker shows up and subsequently disappears.

 

After second click the popup remains open.

Regards.

[Erik D]

Hi, thanks for help, the first issue seems to be solved.

In relation to the 2.nd issue, in your example, scroll down to the last row and click at "Order Date".

You will see the popup for datepicker shows up and subsequently disappears.

 

After second click the popup remains open.

Regards.

Hi there,

I think that issue is caused by scrolling.

if i comment out line

allowScrolling: true,

it works, i.e. the popup remains open when click at cell "Order Date".

But if i put it back, the popup disappears after first click at cell "Order Date".

It happens with most cells in the end of grid.

Due to the fact that my grid has so many columns so I need that option AllowScrolling in order to see all columns with reasonable width.

Regards.

[Vignesh Natarajan]

Hi Erik,  

Thanks for the update.  

We have analyzed the sample and we are able to reproduce the reported issue at our end. We have confirmed it a bug and logged a defect report “Datepicker is not opening properly for first time when scrolling is enabled”. The issue will be fixed and it will be included in our upcoming release 2018 Volume 4 Service pack 1 which is scheduled to be rolled out by the month end of December 2018.  

Till then we appreciate your patience.  

Regards,  

Vignesh Natarajan 

 

 

[Erik D]

Thanks for update.

I have another question.

How to show the dropdown for selecting page size to the top of grid?

When grid has 500 rows or more, it will be better if that dropdown is in the top of grid.

Thanks.

[Vignesh Natarajan]

Hi Erik, 

Thanks for the update. 

From your query, we understand that you need to render the pager at the top of Grid. We have already discussed this topic in our knowledge base document section. Kindly refer the below link for the knowledge base document. 

To render the pager at top of Grid 

KB: https://www.syncfusion.com/kb/8915/how-to-move-the-pager-on-top-of-the-grid-content  

To render the pager at top as well as bottom of Grid 

KB: https://www.syncfusion.com/kb/6302/how-to-display-pager-bar-in-both-top-and-bottom-of-the-grid  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan  

[Erik D]

Hi there,

I followed your example and managed to get pager showing up in the top of grid.

However, dropdown for selecting page size shows only 3 values in the top of the list.

My code is 

http://jsplayground.syncfusion.com/j3ighmpe 

If the pager is in the end as standard, dropdown shows all values as it should be.

Can you advice me what is wrong in my code.

Thanks

[Vignesh Natarajan]

Hi Erik, 

 

Thanks for the update. 

 

We can reproduce your reported problem at our end. To overcome this problem  we suggest  you to apply the CSS position absolute to the e-drpdwndiv class of pagerList, so that we can view the List. 

 

Please refer to the code example:- 

 

  <div id="container" style="width:100%;height:70%;"> 

         <div id="Grid"></div> 

      </div> 

       

    </div> 

    <script type="text/javascript"> 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: window.gridData, 

             enableRowHover: true, 

                        allowTextWrap: false, 

                        allowSorting: true,                     

                        allowPaging: true,               

                        pageSettings: { pageSize: 5, pageSizeList: [5,10,15,20,25,30,40,50,100,200,500] }, 

                        //filterSettings: { filterType: "excel" }, 

                columns: [ 

                         { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right }, 

} 

                ], 

          dataBound: "dataBound", 

 

        }); 

               

              

    }) 

    </script> 

    <script> 

       

       function dataBound(args) { 

           this.getHeaderContent().prepend(this.getPager()); // Before the grid header 

            //this.getContent().prepend(this.getPager()); // Before the grid content 

            this.getPager().css("border-top-width",0); 

            this.getPager().css("border-bottom-width",1);          

       } 

       

      function onComplete(args) { 

        processTopPager(this); // Perform clone pager functionalities   

      } 

   

    function processTopPager(gridObj) { 

        // Create a clone pager 

        }); 

    } 

       

    </script> 

    <style> 

          .e-pager div.e-drpdwndiv { 

              position: absolute; 

            

          } 

       </style> 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample Link:- http://www.syncfusion.com/downloads/support/forum/141075/ze/NEWFOL~2-1313335675.zip 

 

Please get back to us if you have any queries. 

 

Regards, 

Vignesh Natarajan