How Date type column's date type object can have MM/dd/yyyy format?

[sharmin ritterson]

We are using knockoutbased grid where gridType is syncfusion. The data comes from backend as json. Out platform is ASP .NET MVC with Knockout, JQuery, Syncfusion. We want date type object to appear at syncfusion grid as MM/dd/yyyy

We have tried format '{0:MM/dd/yyyy}' on out date type column, but it does not work. We converted the string type date to be date type object for sorting purpose. We want MM/dd/yyyy but we get M/d/yyyy.

Our grid set up is at attached file.

The date appears with a format of m/d/yyyy. Please see following screen shot for reference.

We have converted the date string to be date type in loadViewModel mentod:

Then again at onSaveComplete method after a Save event:

How can we have the date type object to appear at grid as MM/dd/yyyy? Please let us know. Thank you.

[Santhosh Iruthayaraj]

Hi Sharmin,

Greetings from Syncfusion support.

Based on your query, the format string can be used for both date strings and date objects. In order to display the date in the format you requested (MM/dd/yyyy), you can directly use the date format string inside the format property, like this: format: “MM/dd/yyyy”.

We hope this solution resolves your concern. Please let us know if you have any further queries or concerns.

Regards,

Santhosh I

[sharmin ritterson]

We have tried the solution you have provided ( screenshot 1), but we still get date as m/d/yyyy ( screenshot 2). Please let us know what can we do to have our date object to display as MM/dd/yyyy.

 

[Santhosh Iruthayaraj]

Hi Sharmin,

Based on your request, to achieve the desired formatting, we suggest using the queryCellInfo event of the Grid. This event allows you to customize the cell value as per your requirements. We have prepared a code snippet below that demonstrates how to format a cell value using the queryCellInfo event:

 

<script>

  function queryCellInfo(args) {

    if (args.column.field === 'DateFieldName') {

      let date = new Date(args.data.DateFieldName).toLocaleDateString().split('/').map((d) => {

          if (d.length === 1) {

            return '0' + d;

          } else {

            return d;

          }

        });

      args.cell.innerText = date.join('/');

    }

  }

</script>

 

queryCellInfo API: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo

Regards,

Santhosh I

[sharmin ritterson]

Thank you for your answer. We tried queryCellInfo in our grid but cannot make it work. We were not able to locate an example of queryCellInfo in a grid that is like ours. Please see following screenshots to see the way our grid is set up. Please advise on how can we utilize queryCellInfo in our grid and can make it work.

We have also tried in following way, but it also does not work.

How can we make queryCellInfo work in our grid set up?

Information about our environment:

Our GUI is comprised of ASP .NET MVC, JavaScript, JQuery, Knockout, and SyncFusion for grids. We are using Knockout 3.4.0.

Our SyncFusion version is: 21.1.41.

[Santhosh Iruthayaraj]

Hi Sharmin,

We understand that you need assistance in utilizing the queryCellInfo event on Syncfusion Grid with Knockout.js. We have prepared a code snippet below that demonstrates the implementation of this event:

 

self.StatusHistoryGridConfiguration = ko.observables({

  tableId: "tblStatusHistorySearchResults",

  gridType: "Syncfusion",

  height: 150,

  width: 720,

  data: ko.observableArray(self.items()),

  queryCellInfo: self.gridQueryCellInfo

})

 

self.gridQueryCellInfo = function (args) {

  if (args.column.field === 'DateFieldName') {

    let date = new Date(args.data.DateFieldName).toLocaleDateString().split('/').map((d) => {

        if (d.length === 1) {

          return '0' + d;

        } else {

          return d;

        }

      });

    args.cell.innerText = date.join('/');

  }

};

 

Please try using this code snippet in your implementation. If you have any further questions or need additional assistance, feel free to ask.

Regards,

Santhosh I

[sharmin ritterson]

Hello,

thank you for your answer. I have tried your suggested code. However, I was not able to make it work. Following screen shot shows my updated code per your suggestion. I placed a debug line at selfQueryCellInfo, and I have verified that debugger never lands on self.gridQueryCellInfo.

I have attached a zip file that gives you some idea about our json data that comes from c# controller, the javascript where the viewmodels are, the knockout grid, and the cshtml. Please advise.

Information about our environment:

Our GUI is comprised of ASP .NET MVC, JavaScript, JQuery, Knockout, and SyncFusion for grids. We are using Knockout 3.4.0.

Our SyncFusion version is: 21.1.41.

[sharmin ritterson]

The zip file is attached.

Attachment: SyncfusionGridCode_e810e335.zip

[Santhosh Iruthayaraj]

Hi Sharmin,

We have reviewed the code samples you provided, but unfortunately, we were unable to locate the code for the Grid component from the samples you shared. In order to assist you better and provide an appropriate solution, could you please share the code file specifically related to the Grid component mentioned below?

[cshtmlCode]

 

<div class="dialog-grid-result-content divSpace" data-bind="visible: items().length > 0">

        <syncfusion-grid params="config:StatusHistoryGridConfiguration"></syncfusion-grid>

</div>

 

We appreciate your cooperation during this process.

Regards,

Santhosh I