We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Globalize DateTime format Grid Field

Globalize DateTime format Grid Field

How to globalize the format LogDate field (it is a C# DateTime), so that I can add in the file ej.culture.pt-BR.min.js

@(Html.EJ().Grid<TravelAccountability.Web.ViewModels.AcceptedUseAndAccessTermsAuditViewModel>("gridLogsInTerm")
            .Datasource((IEnumerable<object>)Model.UseAndAccessTermsInCurrentTerm)
            .Mappers(map => map
                .ExportToExcelAction("AcceptedUseAndAccessTermsAudit_ExcelExport")
            )
            .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
            {
                items.AddTool(ToolBarItems.ExcelExport);
            }))
            .IsResponsive(true)
            .Locale(Culture)
            .AllowTextWrap()
            .AllowPaging().PageSettings(page => { page.PageSize(10); })
            .AllowFiltering()
            .AllowKeyboardNavigation(false)
            .AllowSelection(false)
            .IsResponsive(true)
            .FilterSettings(
                filter => { filter.FilterType(FilterType.Excel); }
            )
            .ClientSideEvents(evt => evt.ToolbarClick("Grid_OnToolbarClick"))
            .Columns(col =>
            {
                col.Field("EmployeeRE")
                .HeaderText(Resource.LogAcceptanceTermsUseAndAccessViewModel_EmployeeRE)
                .IsPrimaryKey(true)
                .Width(30)
                .IsPrimaryKey(true)
                .Add();

                col.Field("EmployeeName")
                .HeaderText(Resource.LogAcceptanceTermsUseAndAccessViewModel_EmployeeName)
                .Width(70)
                .Priority(1)
                .Add();

                col.Field("LogDate")
                .Format("{0:dd/MM/yyyy HH:mm:ss}")
                .HeaderText(Resource.LogAcceptanceTermsUseAndAccessViewModel_LogDateFormatedString)
                .TextAlign(TextAlign.Center)
                .Width(30)
                .Priority(2)
                .Add();

                col.Field("WasAcceptedString")
                .HeaderText(Resource.LogAcceptanceTermsUseAndAccessViewModel_WasAcceptedString)
                .Width(20)
                .Priority(3)
                .Add();
            })
        )



3 Replies
VA Venkatesh Ayothi Raman Syncfusion Team May 10, 2017 02:27 AM

Hi Guilherme, 

Thanks for contacting Syncfusion support. 

By default, the Grid contains Locale property. To enable localization, specify the culture name as follows. 
Code example: 
@layout.html page 
 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/Scripts/jquery-3.1.1.min.js") 
    @Scripts.Render("~/Scripts/jsrender.min.js")      
    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js") 
    <script src="~/Scripts/ej.culture.pt-BR.min.js"></script>  
          
</head> 
 
And mentioned the corresponding culture name in Locale property in Grid like as follows, 
@Grid 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
         .AllowPaging()    /*Paging Enabled*/ 
                            . . . 
              .Locale("pt-BR") 
 
        .Columns(col => 
        { 
            . . . 
 
            col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:dd/MM/yyyy HH:mm:ss}").Add(); 
           
        })) 
 
Output: 
 
 
Please refer to the following Knowledge base documentation for more information, 
 
Regards, 
Venkatesh Ayothiraman. 


GD Guilherme de Alvarenga May 10, 2017 08:52 AM

Hi,

But how to globalize the elements circleds in red?
And the tooltip: sex jan 26 2001 to sex 26 jan 2001 because it is strange to use this way in Brazil.

Please find attached.

Attachment: Print2_e7f67986.zip

VA Venkatesh Ayothi Raman Syncfusion Team May 12, 2017 05:12 AM

Hi Guilherme, 
Thanks for the update. 
We went through your screenshot that you have shared for us and please find the corresponding answers for your queries, 
Query #1:” how to globalize the elements circleds in red?” 
Please refer to the following online demo for changing the button text for corresponding locale.  
We have achieved your requirement using actionComplete event in Grid. Please refer to the following code example and Help documentation for changing the button text for your locale(pt-BR). 
Code example: 
@Grid 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .AllowScrolling() 
         .AllowPaging()    /*Paging Enabled*/ 
               . . . 
              .Locale("pt-BR") 
              .ClientSideEvents(e=>e.ActionComplete("actionComplete")) 
        .Columns(col => 
        { 
                   . . . 
           
        })) 
 
@action complete event 
function actionComplete(args) { 
        if (args.requestType == "beginedit") { 
            texts = { today: "hoje", timeNow: "Hora agora", done: "feito", timeTitle: "tempo" }; 
            placeholder = "Selecionar encontrotempo"; 
            dateTimeobject = $(".e-datetimepicker").data("ejDateTimePicker");; //create a datetime picker instance 
            dateTimeobject.setModel({ "locale": "pt-BR", buttonText: texts, watermarkText: placeholder }); //Now change the button text for corresponding  
             
        } 
    } 
 
 
Query #2:” the tooltip: sex jan 26 2001 to sex 26 jan 2001 because it is strange to use this way in Brazil.” 
Please refer to the Help documentation for changing the tooltip format. 
We have achieved your requirement using same actionComplete event in Grid. Please refer to the following code example, 
function actionComplete(args) { 
              . . . 
            //changing the tooltip format  
            $(".e-datepicker").eq(0).ejDatePicker({ tooltipFormat: "ddd dd MMM yyyy", locale: "pt-BR" }); 
        } 
    } 
 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon