how to add unbound field and calculate number of days between 2 dates

Question

Hello,Is there a way in Blazor grid where I can insert an unbound field for holding the calculated value between 2 dates?If the answer above is Yes, could I hide the calculated field during adding new record?My code is: Custom no record message RegardsAttachment: Calculte_2_dates_b358f891.rar

Renjith Singh Rajendran · Answer

Hi Sao,Greetings from Syncfusion support.Query 1 : where I can insert an unbound field for holding the calculated value between 2 dates?You can use the Template Column feature of grid to achieve this requirement. You can fetch the corresponding row data values using context inside Template column. Please refer the codes below, Query 2 : could I hide the calculated field during adding new record?Based on this scenario to customize the grid add form dialog, we suggest you to use the Dialog Template feature of grid. With this feature you can customize the contents you need to display in the add/edit dialog of grid. Please refer the below references for more details.https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-templatePlease get back to us if you need further assistance.Regards,Renjith R

oddssatisfy · Answer

@Sao Hello,I want to calculate the number of days between two date fields. but this give me the less number of days between the two dates.For example, the dates are 17-05-2021 to 18-05-2021, I am using the script below, the script is returning the value of '1', whereas it should be '2'. How can I get the correct value?function setNumberOfDays() {var start = current.u_start_date;var end = current.u_end_date;var d = gs.dateDiff(date1, date2, true);current.u_total_number_of_days = d;}Thanks in advance.

Sarveswaran Palani · Answer

Hi Sao & team,

Greetings from Syncfusion support.

From your query, we suspect that you’re facing issue in calculating the number
of days using the JavaScript. We prepared code sample based on your
requirement. Kindly refer the below code sample.

const date1 = new Date('2022-05-17');
  const date2 = new Date('2022-05-18');
   
  const timeDiff = date2.getTime() - date1.getTime();
   
  const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
   
  console.log(diffDays); // Output: 1

In the above code sample, getTime() method is used to calculate the time
difference between the two dates in milliseconds, which is then divided by the
number of milliseconds in a day (i.e., 1000 * 3600 * 24) to get the number of
days between the two dates. The Math.ceil() function is used to round up the
result to the nearest integer.

If you’re still facing an issue, kindly share the runnable sample to us. It’ll
be useful for us to further evaluate your query.

Regards,
Sarvesh

Sao · Answer

Hi, Sarvesh,I am not using JavaScript, I used C# and Razor.Thank you for the post.Sao

Sarveswaran Palani · Answer

Hi Sao,

Sorry for the inconvenience caused.

Based on your requirement, we prepared sample to calculate number of days
between two date fields and it work’s properly at our end. Kindly refer the
attached sample for your reference.

If you have any further queries, please don’t hesitate to get back to us.

Regards,
SarveshAttachment: SfGridColumn_99fb694d.zip

koilte hight · Answer

Hi.Please Help.I need to save result of count between 2 Date in DataBase when Add New Record on Holyday Table.so I tried that but I could not, How I can bind result days to Field=@nameof(HolidayDto.HolidayDays).--------------------------------------------------------------------------------------------------------MY CODE:@page "/emps/holiday/{Id:int}"@inject IEmpRepository _empRepository@inject IHolidayRepository _holidayRepository@using Syncfusion.Blazor.Data;@using Syncfusion.Blazor.Cards;@using Syncfusion.Blazor.DropDowns;

Add Holiday

@if (IsLoading){

}else{

@Emp.FileNumber

@Emp.FullName

}@code { [Parameter] public int Id { get; set; } private EmpDto Emp { get; set; } = new(); private IEnumerable Holidays { get; set; } = new List(); public bool IsLoading { get; set; } public SfGrid holidayGrid; IEnumerable HolidayType = new List() { "Medical", "Academic", "Tourism", "Athlete", "Other" }; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { IsLoading = true; StateHasChanged(); Emp = await _empRepository.Get(Id); Holidays = await _holidayRepository.GetAll(Id); IsLoading = false; StateHasChanged(); } } public async void ActionHandler(ActionEventArgs args) { if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) { args.Data.EmpId = Id; if (args.Action == "Add") { await _holidayRepository.Create(args.Data); Holidays = await _holidayRepository.GetAll(Id); ejazaGrid.Refresh(); } if (args.Action == "Edit") { await _holidayRepository.Update(args.Data); holidayGrid.Refresh(); } } if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Delete)) { await _holidayRepository.Delete(args.Data.Id); holidayGrid.Refresh(); } }}

Sarveswaran Palani · Answer

Hi Koilte,

Sorry for the inconvenience caused.

From your query, we suspect that you’re facing issue calculating days between
two days, when adding the new data to the Grid table by programmatic methods. We
prepared a sample based on your requirement. Kindly refer the attached sample for your
reference. And also, please refer the below methods to perform CRUD
operations programmatically in a Grid.

AddRecordAsync
     - Adds a new record to the Grid.
 StartEditAsync
     - Starts edit the selected row.
 EndEditAsync
     - If Grid is in editable state, you can save a record by invoking endEdit.
 CloseEditAsync
     - Cancels edited state.
 DeleteRecordAsync
     - Delete a selected record. 
Regards,
SarveshAttachment: SfGridColumnModified_9742e381.zip

koilte hight · Answer

Thank U.but it did not worked with me.i think there are some error on my way to do that.So. I have another question.

Please Help Me. How can use

DateRangePicker in Grid. Save data in database. with Add and Edit Mode. Thank you very much.

Prathap Senthil · Answer

Thanks for the Update.Query:” How can use DateRangePicker in Grid” We are glad to inform you that we have created a sample using the DateRangePicker in conjunction with the Grid for adding and editing operations using EditTemplatefeature. We have attached the code snippet and sample for your reference. @{ } @code { private SfGrid Grid; public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public List Orders { get; set; } public async Task OnActionBegin(ActionEventArgs args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save) // Triggers before save operation start for Add and Edit. { //Here you can customize your requirements. args.Data.OrderDate = StartDate; } } public void ValueChangeHandler(RangePickerEventArgs args) { StartDate = args.StartDate; EndDate = args.EndDate; } } Reference: https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing https://blazor.syncfusion.com/documentation/daterangepicker/data-binding#two-way-data-binding Query:” i think there are some errors on my way to do that” Before proceeding the reported issue, we kindly request that you provide a simple reproducible sample, or if possible, try modifying the previous attached sample to see if the issue can be reproduced there. We appreciate your cooperation and hope to resolve this issue for you as soon as possible.Attachment: DataGridWithDataRangePicker_8aaa6858.zip

koilte hight · Answer

Thank you.With all my respect and appreciation.

Suganya Gopinath · Answer

Koilte, We hope the provided solution helped to solve the issue. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.