How to show date time picker when edit the grid ?

[Saddam Hossain]

Hi, From last 2 days I am trying to solve this issue. I want to show time picker also when update the grid. I write this line of code

 col.Field("PunchIn").HeaderText("Punch In").Width("140").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

here only show the date picker but I also need to show the time picker also when update the grid. 

This is for normal textbox I show datetimepicker : 

   @Html.EJS().DateTimePicker("datetimepicker").RenderDayCell("disableDate").Format("yyyy-MM-dd HH:mm:ss").Placeholder("Choose a date").Render() <br />

But I need the datetimepicker when update the grid. I think, EditType("datepickeredit") here need to change something. But I don't know how to do this or what i need to put there. Please help me...

Thanks in advance.

[Venkatesh Ayothi Raman]

Hi Saddam, 

 

 

Thanks for using Syncfusion products. 

 

 

Currently, we don’t have support for DateTime picker edit in Grid and we have already considered this ‘Provide Datetimepicker edit support in Grid’ as the feature and this implementation will be available on Volume 3, 2018 release which is expected to be rolled out at mid of September 2018.  

 

 

Until we suggest you use Edit template feature for achieved your requirement. Please refer to the following code example and Help documentation, 

 

@Html.EJS().Grid("DefaultPaging").DataSource(dm => dm.Url("/Home/UrlDatasource") 

                                //.InsertUrl("/Report/UpdatePunchInfo") 

                                .UpdateUrl("/Home/Update") 

                                //.RemoveUrl("/Report/UpdatePunchInfo") 

                                .Adaptor("UrlAdaptor")).Columns(col => 

                                { 

. .   . 

                                     col.Field("OrderDate").HeaderText("Order Date").Width("130").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

                                    . .  .}).AllowPaging().EditSettings(edit=>edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true)).Toolbar( new string[] { "Add", "Edit","Delete","Update", "Cancel"}).PageSettings(page => page.PageCount(4)).Render() 

 

 

<script> 

 

    

    

    var elem; 

    var dtobj; 

    function create(args) { 

        // create target element 

        elem = document.createElement('input'); 

        return elem; 

    } 

    function write(args) { 

        dtobj = new ej.calendars.DateTimePicker({   

            placeholder: 'Select DateTime', 

            value:args.rowData.OrderDate 

             

        }); 

        dtobj.appendTo(elem); 

    } 

    function destroy() { 

        // destroy the component after save 

        dtobj.destroy(); 

    } 

    function read(args) { 

        // read the custom component(uploader) value 

        return dtobj.value; 

    } 

 

</script> 

 

 

Documentation : https://ej2.syncfusion.com/16.2.41/documentation/datetimepicker/getting-started.html?lang=es5#run-the-application  

 

 

We have also prepared a sample for your convenience which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/F139096_Datetime-1277816251 

 

 

In this sample, we have enabled the datetime picker edit option using edit template feature with UrlAdaptor data binding. 

 

 

Regards, 

Venkatesh Ayothiraman.