Grid edit mode normal date with date picker

[Unknown]

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.34 (nuget package).

Could you please provide me with an example on how to use a date picker for editing a date (without time) column in grid (with Url adaptor) using inline editing mode?

I would also like to know how to format the date for this column in the exact format "dd.MM.yyyy" (for today that would be "20.04.2018"). I do not want to use any culture, the date just needs to be displayed that way.

Kind regards

Phil

[Isuriya Rajan]

Hi Phil, 

Thanks for contacting Syncfusion support, 

As per your requirement, we have created the sample with UrlAdaptor and format date column. In the below sample we have set the format for OrderDate column inside the load event. This event will trigger at the time of grid loading. In the event, we have set the format and type of this column. For enabling the datePicker edit we have a property called editType. For datepickeredit type, we need to set the editType property as a detapickeredit. 

Refer the below code example 

<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Update", "Cancel","Edit" })" actionComplete="actionComplete"  load="load" allowPaging="true"> 

        <e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update"></e-datamanager> 

        <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 

             <e-grid-column field="OrderDate" headerText="OrderDate" editType="datepickeredit" width="170"></e-grid-column> 

       </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function load(args) { 

        this.columns[3].format = { type: 'date', format: 'dd.MM.yyyy' }; 

    } 

 

</script> 

Refer the below sample and documenataion: 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/core_-crud-datepicker343526244.zip 

Documentation about editTyes: https://ej2.syncfusion.com/16.1.32/aspnet/documentation/grid/edit.html?syntax=tag#cell-edit-type-and-its-params 

Regards, 

Isuriya R 

[Unknown]

Thank you for your reply.

It worked, the date value can now be set with a date picker.

I wonder where it is documented that "Datepickeredit" has to be used? In the grid documentation (https://help.syncfusion.com/aspnet-core/grid/editing#toolbar-with-edit-option) the edit type is set to "Datepicker" but this does not work.

<e-column field="OrderDate" header-text="Order Date" edit-type="Datepicker"format="{0:MM/dd/yyyy}" ></e-column>

The date is formatted correctly when in display mode. When editing the date is displayed as "4/24/2018" instead of "24.04.2018", can this be changed for the edit mode as well?

On a side note, it might be useful to add the date edit with a date picker to the grid demo?

It seems like this feature might be used quite a lot.

Kind regards

Phil

[Isuriya Rajan]

Hi Phil, 

  

For this requirement we suggest you to set format via edit parameter. This will apply the format while editing the column. 

  

Refer the below code example: 

 

 

   <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Update", "Cancel","Edit" })"  actionComplete="actionComplete" actionBegin="begin"  load="load"  allowPaging="true"> 

        <e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update"></e-datamanager> 

        <e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})"  textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="OrderDate" headerText="OrderDate" editType="datepickeredit"  edit="@(new { @params = new { format = "dd.MM.yyyy" } })" width="170"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

 

<script> 

    function load(args) { 

        this.columns[3].format = { type: 'date', format: 'dd.MM.yyyy' }; 

    } 

</script> 

 

 

Refer the below screenshot for your reference: 

  

  

Your mentioned documentation (https://help.syncfusion.com/aspnet-core/grid/editing#toolbar-with-edit-option) was EJ1 component.  

  

For EJ2 component we suggest to refer this  documentation link: https://ej2.syncfusion.com/16.1.32/aspnet/documentation/grid/edit.html?syntax=tag#cell-edit-type-and-its-params 

  

  

Regards, 

Isuriya R 

 

[Unknown]

Now the date behaves as desired.

Thank you a lot for your help.

Kind regards

[Isuriya Rajan]

Hi Phil, 

 

Thanks for the update. We are happy to hear that your problem has been resolved. 

 

Regards, 

Isuriya 

[Costa]

Thanks. Very helpful.

[Mohammed Farook J]

Hi Phil,  

  

Thanks for the update. We are happy to hear that your problem has been resolved.  

Please get back to us for further assistance. 

 

Regards,  

J Mohammed Farook