[SOLVED] How i can add Localization in validationRules Tooltips

[Xavier Reyes]

The editing templates do not recognize the Localization.

CODE:

<div id='Grid'></div>

<script type="text/template" id="colTip">

 {{:value }}  

</script>

<script type="text/x-jsrender" id="ActivoColumnTemplate"> 

        <div style='padding-left:5px;'>{{if activo == 1}}Activo{{else}}Inactivo{{/if}}</div> 

</script> 

<script id="template" type="text/template">

<form id="EditForm">

   <table cellspacing="10" sty="border: 1px solid black">

<tr>

<td>ID</td>

<td>

<input id="id_usuario" name="id_usuario" disabled="disabled" value="{{:id_usuario}}" />

</td>

<td>Nombre</td>

<td colspan="3">

<input id="nombre" name="nombre" value="{{:nombre}}" class="e-field e-ejinputtext" style="width: 100%; height: 28px" />

</td>

</tr>

<tr>

<td>Telefono</td>

<td>

<input type="text" id="telefono" name="telefono" value="{{:telefono}}" class="e-field e-ejinputtext" />

</td>

<td>E-Mail</td>

<td>

<input type="text" id="email" name="email" value="{{:email}}" class="e-field e-ejinputtext" style="width: 250px; height: 28px" />

</td>

<td>Activo</td>

<td>

<input type="text" id="activo" name="activo" />

</td>

</tr>

<tr>

<td>Usuario</td>

<td>

<input id="usuario" name="usuario" value="{{:usuario}}" class="e-field e-ejinputtext" />

</td>

<td>Contraseña</td>

<td>

<input id="pass" value="{{:pass}}" class="e-field e-ejinputtext" />

</td>

<td>Repetir <br>Contraseña</td>

<td>

<input id="repass" value="{{:pass}}" class="e-field e-ejinputtext" />

</td>

</tr>

<tr>

<td colspan="6">&nbsp</td>

</tr>

   </table>

   <script>

   $(function () {

var items = [ { text: "Activo", value: "1" },

 { text: "Inactivo", value: "0" }];

$('#activo').ejDropDownList({

dataSource: items,

fields: { text: "text", value: "value" },

value: "{{:activo}}"

});

$("#pass").ejMaskEdit({

                name: "pass",

                inputMode: ej.InputMode.Password,

                textAlign: ej.TextAlign.Center});

$("#repass").ejMaskEdit({

                name: "repass",

                inputMode: ej.InputMode.Password,

                textAlign: ej.TextAlign.Center});

});

   </script>

   </form>

</script>

<script>

<?PHP require "assets/ej.localetexts.es-ES.js";?>

    $(function () {

var BudgetTypes = [ { value: 0, text: "Inactivo" }, { value: 1, text: "Activo" }, ];

        $('#Grid').ejGrid({

            dataSource: ej.DataManager({

url : "/navigation/db_usuario.php?action=getData",

updateUrl : "/navigation/db_usuario.php?action=updateData",

insertUrl : "/navigation/db_usuario.php?action=insertData",

removeUrl : "/navigation/db_usuario.php?action=delData",

adaptor : "UrlAdaptor"}),

locale: "es-ES",

            allowPaging: true,

enableRowHover : true,

allowSorting : true,

//allowTextWrap : true,

//textWrapSettings: {wrapMode: "both"},

toolbarSettings : { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel", "search"] },

editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog : true, editMode : "dialogtemplate", inlineFormTemplateID : "#template"},

columns : [

{ field : "id_usuario", headerText : "ID", headerTextAlign : "center", textAlign : "center", width : 80, allowEditing: false, isPrimaryKey:true, defaultValue: 0, isIdentity: true },

{ field : "nombre", headerText : "Nombre", headerTextAlign : "left",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip, validationRules: { required: true, minlength: 3 } },

{ field : "email", headerText : "E-Mail", headerTextAlign : "left",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip, validationRules: { required: true, minlength: 3, email: true } },

{ field : "usuario", headerText : "Usuario", validationRules: { required: true, minlength: 3 }, visible: false  },

{ field : "pass", headerText : "Contraseña", validationRules: { required: true, minlength: 3, equalTo: "#repass" }, visible: false  },

{ field : "telefono", headerText : "Telefono", headerTextAlign : "left",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip, validationRules: { required: true, minlength: 3 } },

{ field : "activo", headerText : "Activo", editType: "dropdownedit", headerTextAlign : "center", textAlign : "center", width: 150, dataSource:BudgetTypes, fields: { id: "value", text: "text"}, defaultValue: 1, isTemplateColumn: true, templateID: "#ActivoColumnTemplate"}

],

            pageSettings: { pageSize: 10 }

        });

    });

</script>

</div>

[Farveen Sulthana Thameeztheen Basha]

Hi Xavier, 

Thanks for contacting syncfusion products. 

We are unable to reproduce your reported problem “localization doesnot applied for Template”. According to your requirement ,we have applied localization for dialogTemplate editing.  

Please refer to the code example:- 

    ej.Grid.Locale["de-DE"] = { 

            EmptyRecord: "Keine Aufzeichnungen angezeigt", 

            GroupDropArea: "Ziehen Sie eine Spaltenüberschrift hier", 

            DeleteOperationAlert: "Keine Einträge für Löschvorgang ausgewählt", 

            EditOperationAlert: "Keine Einträge für Bearbeiten Betrieb ausgewählt", 

            SaveButton: "Speichern", 

            CancelButton: "stornieren", 

            EditFormTitle: "Korrektur von", 

            GroupCaptionFormat: "{{:headerText}}: {{:key}} - {{:count}} {{if count == 1}}Beiträge{{else}}Beiträges{{/if}}", 

            UnGroup: "Klicken Sie hier, um die Gruppierung aufheben" 

        }; 

 

$(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                locale: "de-DE", 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,editMode : "dialogtemplate",dialogEditorTemplateID : "#template" },                 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                columns: [ 

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 

 

                ] 

            }); 

       }); 

     

           <div id="template" style="display: none"> 

                <b>Order Details</b> 

                      <table cellspacing="10"> 

                          <tr> 

                              <td style="text-align: right;">Order ID 

                              </td> 

                              <td style="text-align: left"> 

                                  <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled"  class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" /> 

                              </td> 

                              <td style="text-align: right;">Customer ID 

                              </td> 

                              <td style="text-align: left"> 

                                  <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" /> 

                              </td> 

                          </tr> 

                          <tr> 

                              <td style="text-align: right;">Freight 

                              </td> 

                              <td style="text-align: left"> 

                                  <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 

                              </td> 

                           </tr> 

                  </table> 

 

If you want to apply localization for other controls such as ejNumericTextBox, ejDropDownList you can set the locale property to that particular columns while at template rendering in the “actionComplete” event. 

 

function actionCompletecomplete(args) { 

       if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 

                if (args.requestType == "beginedit") $("#OrderID").attr("disabled", "disabled"); 

                $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "34px", decimalPlaces: 2,locale: "de-DE" }); 

            } 

        } 

 

 

Please refer to the help document about localization:- 

https://help.syncfusion.com/js/grid/globalizationandlocalization 

Regards, 

Farveen sulthana T

[Xavier Reyes]

I do not explain myself correctly, what I need is to add location to the form validation tags.

thank you very much.

[Seeni Sakthi Kumar Seeni Raj]

Hi Xavier,  

 

We have already discussed about applying localization to the validation messages in the following kb.  

 

https://www.syncfusion.com/kb/7410/how-to-localize-the-validation-messages-in-grid 

 

Refer to the following code example 

 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

                locale: "de-DE", 

                columns: [ 

                        { field: "OrderID", isPrimaryKey: true, validationRules: { required: true, number: true } }, 

 

                ] 

            }); 

 

            $.extend($.validator.messages, { 

                required: "nödvändig",  

              . . .  

                      . . . 

            }); 

        }); 

 

    </script> 

 

Regards,  

Seeni Sakthi Kumar S. 

[Xavier Reyes]

Thank you very much, it's what I needed.

I also found this information for custom messajes:

<input id="numeric" type="text" /> 
 
<input id="currency" type="text" /> 
 
<input id="percentage" type="text" /> 
 
<script>
//To set validationMessage API value during initialization  
        $("#numeric").ejNumericTextbox({ validationRules:{required:true},validationMessage: { required: "Required Numeric value"} });   
        $("#currency").ejCurrencyTextbox({ validationRules:{required:true},validationMessage: { required: "Required Currency value"} });
        $("#percentage").ejPercentageTextbox({ validationRules:{required:true},validationMessage: { required: "Required Percentage value"} });                   
</script>

[Seeni Sakthi Kumar Seeni Raj]

Hi Xavier,  

 

Thanks for the update.  

 

We are happy to hear that your requirement has been achieved and you are good to go. Please get back to us, if you require further assistance on this.  

 

Regards,  

Seeni Sakthi Kumar S. 

[Paolo Olaya]

Hi I need the same with ej2 asp.net mvc, i can't find any documentation.... i need to put validation message in spanish

Thanks.

[Hariharan J V]

Hi Paolo, 

 

We have checked your query and You can achieve your requirement by using the following way. Please refer to the below code example, documentation link and sample link. In this sample we have provided the Localized error message in the column.validationRules itself.  

[index.cshtml]  

 

@Html.EJS().Grid("Grid").Created("Created").DataSource(dm => dm.Json(((IEnumerable<dynamic>)ViewBag.datasource).ToArray())).Columns(col =>  

{  

    col.Field("OrderID").HeaderText("OrderID").Width("30%").Add();  

    col.Field("EmployeeID").HeaderText("EmployeeId").Width("30%").Add();  

    .  .  .  

        }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(newList<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowPaging().PageSettings(page => page.PageSize(5)).Render()  

  

</div>  

  

<script>  

    function Created(e) {  

        this.getColumns()[1].validationRules = { required: [true,'Este campo es requerido']}  

    }  

    </script>  

  

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html#created   

                             https://ej2.syncfusion.com/documentation/grid/api-column.html?lang=typescript#validationrules    

                             https://ej2.syncfusion.com/documentation/form-validator/?lang=typescript#customizing-error-messages   

  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/validation-747051580   

Regards,  

Hariharan