Formatting Column using mask format from MaskedTextBox

[Matt]

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?

[Martin]

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

[Matt]

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.

[Matt]

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;'

[Martin]

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