This is a migrated thread and some comments may be shown as answers.

Formatting Column using mask format from MaskedTextBox

4 Answers 838 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 07 Apr 2017, 07:27 PM

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?

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 11 Apr 2017, 02:19 PM
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.
0
Matt
Top achievements
Rank 1
answered on 11 Apr 2017, 02:26 PM

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.

0
Matt
Top achievements
Rank 1
answered on 12 Apr 2017, 07:22 PM

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;'
0
Martin
Telerik team
answered on 13 Apr 2017, 07:14 AM
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.
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Martin
Telerik team
Matt
Top achievements
Rank 1
Share this question
or