Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to Format a telerik:GridBoundColumn date field that is using a client-side bind?

I have a Telerik RadGrid control that I am binding on the client side, I see 20+ results so it is working. My date date however is coming in like this: 2015-01-30T00:00:00 and I need to format it actually on 2 lines like this: 1/30/2015<br />12:00:00 AM

The DataFormatString however is not applying any changes to the Date columns however and they look like this:

<telerik:GridBoundColumn DataField="StartDate" UniqueName="StartDate" HeaderText="Start" SortExpression="StartDate"
    DataFormatString="{0:MM/dd/yyyy hh:mm}" HtmlEncode="false"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StopDate" UniqueName="StopDate" HeaderText="Stop" SortExpression="StopDate"
    DataFormatString="{0:MM/dd/yyyy hh:mm}" HtmlEncode="false"></telerik:GridBoundColumn>

What would it take to accomplish this using the RadGrid control?

If it cannot be done using the RadGrid control it may be possible to parse the JavaScript data before binding to the RadGrid control? gridView.set_dataSource(results[0]);

like image 562
JoJo Avatar asked Aug 25 '15 18:08

JoJo


2 Answers

On your RadGrid add:

<ClientSettings> <ClientEvents OnRowDataBound="RadGrid1_RowDataBound" /> </ClientSettings>

Then add a javascript handler for it:

function RadGrid1_RowDataBound(sender, args) {
  var dateValue = new Date(args.get_dataItem()["StartDate"]);
  args.get_item().get_cell("StartDate").innerHTML = dateValue.getHours() + ":" + dateValue.getMinutes();
}

You'll need to modify the above to get just the date format you want, at the moment it will do hh:mm

Hope this helps!

like image 85
Chris Surfleet Avatar answered Sep 29 '22 23:09

Chris Surfleet


maybe use javascript to help

   function displayTime {
    var startDate = new Date();
    var month = getMonth() + 1;
    var day = getDate();
    var year = .getFullYear();
    var hours = getHours();
    if (hours<10) {
hours = "0"+hours}
    var minutes = getMinutes();
if (minutes<10) {
minutes = "0"+minutes}
    var seconds = getSeconds();
if (seconds<10) {
seconds = "0"+seconds}
    var milo = getMilliseconds();

return month + // you get the idea
        }

you can add zero for milo seconds and moth if you need it like i did with hours minutes ect and you can plus everything together

like image 33
Aaron Rabinowitz Avatar answered Sep 30 '22 01:09

Aaron Rabinowitz