Grid column with datepicker

Hi support, i've in my grid a column containing the birthdate.

The  definition is the following:
        <e-column field="BirthDate" header-text="Data di Nascita" header-text-align="TextAlign.Center" text-align="Center" width="100" edit-type="Datepicker" format="{0:dd/MM/yyyy}"></e-column field>

i would like to disable the editing and allow only the selection with the datepicker.

How can i do that?

Thanks in advance
Stefano Capobianco

5 Replies

SE Sathyanarayanamoorthy Eswararao Syncfusion Team April 26, 2018 05:08 PM UTC

Hi Stefano, 

Thanks for contacting Syncfusion support. 

According to your query we suspect that you need to restrict the user from editing the date column directly and allow only selection of data from DatePicker control. To achieve this requirement we suggest you to set the allowEdit property of DatePicker control as false in the edit options of the columns. 

Please refer  the below code example. 

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true>  
                     …... 
 
   <e-columns> 
         
                    …... 
 
        <e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}" text-align=Right edit-type="Datepicker" date-edit-options='@new DatePickerProperties { AllowEdit = false }' width="80"></e-column> 
    </e-columns> 
</ej-grid> 

Please refer the below documentation for details of edit options of the columns. 


If you need any further assistance please get back to us. 

Regards,
Sathyanarayanamoorthy 



SC Stefano Capobianco April 26, 2018 07:03 PM UTC

Hi Sathyanarayanamoorthy, the compiler intellisense say me datePickerProperties could not be found ( are you missing.........?)

date-edit-options='@new DatePickerProperties { AllowEdit = false }'

Thanks
Stefano



SE Sathyanarayanamoorthy Eswararao Syncfusion Team April 27, 2018 12:30 PM UTC

Hi Stefano, 

We suspect that the issue occurs if the required namespace is not referred in the page. To access all the properties of the components the namespace Syncfusion.Javascript.Models must be referred in the page. 

Please refer the below code example. 

 
@using System.Data; 
@using System.Data.SqlClient; 
@using Syncfusion.JavaScript; 
@using Syncfusion.JavaScript.Models; 
 
<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true" > 
 
    <e-columns> 
         
                     ….. 
 
       <e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}" text-align=Right edit-type="Datepicker" date-edit-options='@new DatePickerProperties { AllowEdit = false }' width="80"> 
        </e-column> 
    </e-columns> 
</ej-grid> 

We have prepared a sample for your convenience which can be downloaded from the below location. 


If you need any further assistance please get back to us. 

Regards,
Sathyanarayanamoorthy 



SC Stefano Capobianco April 27, 2018 01:28 PM UTC

Thanks  Sathyanarayanamoorthy your solution works very well. Can i suggest to improve the online documentationabout this kind of problems (ex. add the using of JavaScript.Models )?

Stefano Capobianco


SE Sathyanarayanamoorthy Eswararao Syncfusion Team April 30, 2018 12:57 PM UTC

Hi Stefano, 

Sorry for the inconvenience caused. 

We suggest you to use the solution provided in the below code example instead of the solution provided in the previous update. For this solution the mentioned namespace need not be referred. Please refer the below code example. 

 
<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true"> 
     
    <e-columns> 
         
                 ….. 
 
       <e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}" text-align=Right edit-type="Datepicker" width="80"> 
        <ej-date-picker allow-edit="false"></ej-date-picker> 
        </e-column> 
    </e-columns> 
</ej-grid> 

We will modify the documentation in the below link as per the solution given in the above code example and refresh it online as soon as possible. 


Regards, 
Sathyanarayanamoorthy 


Loader.
Up arrow icon