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.

[SOLVED] How i can add Localization in validationRules Tooltips

Thread ID:

Created:

Updated:

Platform:

Replies:

139185 May 14,2017 05:11 PM Aug 13,2018 02:53 AM JavaScript - EJ 2 7
loading
Tags: Grid
Xavier Reyes
Asked On May 14, 2017 05:11 PM

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 [Syncfusion]
Replied On May 15, 2017 09:05 AM

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:- 


Regards, 

Farveen sulthana T

Xavier Reyes
Replied On May 16, 2017 02:16 PM

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 [Syncfusion]
Replied On May 18, 2017 07:42 AM

Hi Xavier,  
 
We have already discussed about applying localization to the validation messages in the following kb.  
 
 
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
Replied On May 18, 2017 03:44 PM

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 [Syncfusion]
Replied On May 19, 2017 01:01 AM

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
Replied On August 9, 2018 08:59 AM

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 [Syncfusion]
Replied On August 13, 2018 02:53 AM

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>  
  


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

  

Regards,  
Hariharan 


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.

;