Grid column with datepicker

[Stefano Capobianco]

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

[Sathyanarayanamoorthy Eswararao]

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. 

https://help.syncfusion.com/aspnet-core/grid/editing#cell-edit-type-and-its-edit-options 

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

Regards,
Sathyanarayanamoorthy 

[Stefano Capobianco]

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

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

Thanks

Stefano

[Sathyanarayanamoorthy Eswararao]

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. 

Sample: https://www.syncfusion.com/downloads/support/forum/137229/ze/DatePicker-282699226.zip 

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

Regards,
Sathyanarayanamoorthy 

[Stefano Capobianco]

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

[Sathyanarayanamoorthy Eswararao]

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. 

https://help.syncfusion.com/aspnet-core/grid/editing#cell-edit-type-and-its-edit-options  

Regards, 

Sathyanarayanamoorthy