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.
Unfortunately, activation email could not send to your email. Please try again.

Globalize DateTime format Grid Field

Thread ID:

Created:

Updated:

Platform:

Replies:

130370 May 9,2017 09:30 AM May 12,2017 06:12 AM ASP.NET MVC 3
loading
Tags: Grid
Guilherme de Alvarenga
Asked On May 9, 2017 09:30 AM

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();
            })
        )



Venkatesh Ayothi Raman [Syncfusion]
Replied On May 10, 2017 03: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. 


Guilherme de Alvarenga
Replied On May 10, 2017 09: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

Venkatesh Ayothi Raman [Syncfusion]
Replied On May 12, 2017 06: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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;