We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

set current date after open datepicker

Thread ID:

Created:

Updated:

Platform:

Replies:

141075 Nov 21,2018 01:33 PM UTC Nov 28,2018 11:36 AM UTC jQuery 8
loading
Tags: ejmGrid
Erik D
Asked On November 21, 2018 01:33 PM UTC

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 [Syncfusion]
Replied On November 22, 2018 10:25 AM UTC

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>     
 
 
 
Refer our API documentation for your reference 
 
 
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
Replied On November 23, 2018 06:46 AM UTC

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
Replied On November 23, 2018 10:01 AM UTC

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 [Syncfusion]
Replied On November 26, 2018 12:28 PM UTC

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
Replied On November 27, 2018 07:10 AM UTC

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 [Syncfusion]
Replied On November 27, 2018 08:34 AM UTC

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 


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


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan  




Erik D
Replied On November 27, 2018 01:26 PM UTC

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 [Syncfusion]
Replied On November 28, 2018 11:36 AM UTC

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 
 
 
Please get back to us if you have any queries. 
 
Regards, 
Vignesh Natarajan 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon