Formatting Column using mask format from MaskedTextBox

5 posts, 0 answers
  1. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 07 Apr 2017 Link to this post

    We allow our users to define masked fields that then appear in a kendo grid.  I've seen the example (http://www.telerik.com/forums/masked-column-in-a-grid) that recommends using a JavaScript function to format the value, but how would that work with unknown mask formats?

    Furthermore, I'm not interested in allowing users to edit the value, just to display the value such that if the unformatted string value is 123456789 and the mask is ###-##-####, it would appear in the grid as "123-45-6789".  How can this be accomplished on the fly?

  2. Martin
    Admin
    Martin avatar
    833 posts

    Posted 11 Apr 2017 Link to this post

    Hello Matt,

    Since you do not need to edit the value, you can use the masked texbox functionality without adding it to the page. This example demonstrates one possible approach.

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 11 Apr 2017 Link to this post

    Thanks, Martin...that's very similar to what I did (found here -- http://dojo.telerik.com/Imewi), but is even better in that I don't have to worry about adding a control to the markup just for the masking.

  4. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 12 Apr 2017 in reply to Martin Link to this post

    Upon further implementation, it appears there's a limitation to the template format.  Should it be possible to pass the mask as a string as part of the template or can it ONLY be defined as part of the dataset?

     If I add the format as part of the data set, it works:

    { field: "SSN", hidden:false, template:"#= formatValue(SSN, Mask) #" },

     

    But if I add it as a string, it won't work:

    { field: "SSN", hidden:false, template:"#= formatValue(SSN, '###-##-####') #" },

     

    (The above can be found here:  http://dojo.telerik.com/IToMUc.  Comment out either line to see it work -- line 26 -- or not work -- line 27.)

    In the declaration above, the mask is applied properly using the using the first line (where Mask is pulled from the dataset), but not from the second (where it's a hard-coded string): 

    function formatValue(dataValue, maskFormat){
      $('#maskedTextbox').kendoMaskedTextBox({ mask: maskFormat, value: dataValue});
      var maskedTextBox = $("#maskedTextbox").data("kendoMaskedTextBox");
      var returnValue = maskedTextBox.value();
      return returnValue;
    }

     

    I receive the following error in kendo.web.min.js (line 9, column 7388) when I attempt to apply the mask via code using a string value (we don't currently have access to the mask via the dataset).  If I remove the mask logic, everything shows fine (although it's unformatted).

     

    0x800a139e - JavaScript runtime error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td  role='gridcell'><input type="checkbox" class="chkbx" /></td><td  role='gridcell'><a class="k-button k-button-icontext k-grid-"  href="\#"><span class=" glyphicon glyphicon-cog"></span> </a></td><td  role='gridcell'>#:''#</td><td  role='gridcell'><a href='javascript:void(0)' onclick="showProgressIndicator(); epGrid.actions.openDetails('http://localhost/Client/ObjectDetails/ViewObject?objectId=#=OBJ_ID#&itemId=#if(typeof ItemIduniqueString == "undefined" || ItemIduniqueString == null) {#-1#}else{##=ItemIduniqueString##}#'); return false;" title='Open object #=OBJ_ID#'>#=OBJ_ID#</a></td><td  role='gridcell'>#= applyMaskToValue(OBJ_INTLPHONENUMBER_3876, '+## ## #### ####'); #</td><td  role='gridcell'>#= applyMaskToValue(OBJ_SSN_3877, "###-##-####"); #</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td  role=\'gridcell\'><input type="checkbox" class="chkbx" /></td><td  role=\'gridcell\'><a class="k-button k-button-icontext k-grid-"  href="#"><span class=" glyphicon glyphicon-cog"></span> </a></td><td  role=\'gridcell\'>'+$kendoHtmlEncode('')+'</td><td  role=\'gridcell\'><a href=\'javascript:void(0)\' onclick="showProgressIndicator(); epGrid.actions.openDetails(\'http://localhost/Client/ObjectDetails/ViewObject?objectId='+(OBJ_ID)+'&itemId=';if(typeof ItemIduniqueString == "undefined" || ItemIduniqueString == null) {;$kendoOutput+='-1';}else{;$kendoOutput+=''+(ItemIduniqueString)+'';};$kendoOutput+='\'); return false;" title=\'Open object '+(OBJ_ID)+'\'>'+(OBJ_ID)+'</a></td><td  role=\'gridcell\'>'+( applyMaskToValue(OBJ_INTLPHONENUMBER_3876, '+)+''; ;$kendoOutput+=''; ;$kendoOutput+='';;$kendoOutput+=''; ;$kendoOutput+='';;$kendoOutput+='';'); ;$kendoOutput+='</td><td  role=\'gridcell\'>'+( applyMaskToValue(OBJ_SSN_3877, ")+'';;$kendoOutput+='-';;$kendoOutput+='-';;$kendoOutput+='';;$kendoOutput+='"); ';</td></tr>;$kendoOutput+=;}return $kendoOutput;'
  5. Martin
    Admin
    Martin avatar
    833 posts

    Posted 13 Apr 2017 Link to this post

    Hello Matt,

    The Javascript error is expected when using a hash character (#) inside a template data expression because Kendo templates by design use hash syntax to define data areas in the template. To fix this, you will have to escape all hash characters that are inside the data area of your template:

    { field: "SSN", hidden:false, template:"#= formatValue(SSN, '\\#\\#\\#-\\#\\#-\\#\\#\\#\\#') #" }

    Here is the fixed version:

    Regards,
    Martin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top