1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Child grid with timepicker column

Child grid with timepicker column

Is there some example for timepicker editing child grid column?
I tried with something like this:

{

field: 'vrijemeod', headerText: 'Datum i vrijeme od', type: 'datetime', width: 150, format: 'HH:mm', edit: {

create: () => {

elem = document.createElement('input');

return elem;

},

read: () => {

return timePickerObj.value;

},

destroy: () => {

timePickerObj.destroy();

},

write: (args: { rowData: Object, column: Column }) => {

timePickerObj = new TimePicker({

value: new Date(args.rowData[args.column.field]),

interval: 15

});

timePickerObj.appendTo(elem);

}

}

},


but it's not working.
Thanks!

Bernard.


1 Reply
AG Ajith Govarthan Syncfusion Team December 30, 2021 01:44 AM UTC

Hi Bernard, 

Thanks for contacting Syncfusion support. 

Query: Is there some example for timepicker editing child grid column? 

Yes, you can to use Timepicker component as cellEditTemplate for child grids in your application. So, we have prepared sample in that we have rendered the Timepicker component as cellEditTemplate for date columns. For your convenience, we have attached the sample, please refer them for more information. 

Note: We found that you have used ASP.Net Core as your platform in your Grid application and we also found that your codes are related to TypeScript framework. So, we have prepared sample in both frameworks please refer the below sample. For your reference. 

Code Example: 
ASP-CORE 

@{ 
    var actionBeginChild = "actionBeginChild"; 
    var actionFailureChild = "actionFailureChild"; 

} 
@{ 
                var data = new Syncfusion.EJ2.DataManager() 
                { 
                    Url = "/Home/UrlDatasourceChild", 
                    InsertUrl = "/Home/InsertChild", 
                    UpdateUrl = "/Home/UpdateChild", 
                    RemoveUrl = "/Home/RemoveChild", 

                    Adaptor = "UrlAdaptor", 
                }; 

                var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 
                { 
                    DataSource = data, 
                    QueryString = "EmployeeID", 
                    ActionBegin = actionBeginChild, 
                    ActionFailure = actionFailureChild, 
                    EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowEditing = true, AllowDeleting = true }, 
                    Toolbar = new List<string>() { "Add", "Edit", "Delete", "Update", "Delete" }, 
                    Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
    new Syncfusion.EJ2.Grids.GridColumn(){ Field="UnitID", IsPrimaryKey=true, HeaderText="Unit ID", Width="150" }, 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName",  HeaderText="Ship Name", Width="150" }, 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate",  Format="HH:mm", Edit =(new {create = "create", read = "read", destroy = "destroy", write = "write"}), HeaderText="Order Date", Width="120" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="120" }, 
} 
    }; 
} 

<div class="control-section"> 
    <ejs-grid id="HierarchyPrint" childGrid="ChildGrid" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" 
              allowPdfExport="true" allowExcelExport="true"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-data-manager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="125"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" width="170"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 

<script> 
    var elem; 
    var dObj; 

    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 

    function write(args) { 
        dObj = new ej.calendars.TimePicker({ 
            value: new Date(args.rowData[args.column.field]), 
            placeholder: 'Select Time' 
        }); 
        dObj.appendTo(elem); 
    } 

    function destroy() { 
        dObj.destroy(); 
    } 

    function read(args) { 
        return dObj.value; 
    } 


TypeScript 
Index.ts 

columns: [ 
      { 
        field: 'OrderID', 
        headerText: 'Order ID', 
        textAlign: 'Right', 
        width: 120, 
      }, 
      { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
      { field: 'Freight', headerText: 'Freight', width: 120 }, 
      { field: 'ShipName', headerText: 'Ship Name', width: 150 }, 
      { 
        field: 'OrderDate', 
        format: 'HH:mm', 
        headerText: 'OrderDate', 
        width: 120, 
        edit: { 
          create: () => { 
            elem = document.createElement('input'); 

            return elem; 
          }, 

          read: () => { 
            return timePickerObj.value; 
          }, 

          destroy: () => { 
            timePickerObj.destroy(); 
          }, 

          write: (args) => { 
            timePickerObj = new TimePicker({ 
              value: new Date(args.rowData[args.column.field]), 
            }); 

            timePickerObj.appendTo(elem); 
          }, 
        }, 
      }, 
    ], 
  }, 


Sample-Links: 



Please get back to us if you need further assistance. 

Regards, 
Ajith G. 







Loader.
Up arrow icon