$.telerik.formatString issue

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

4 Answers 98 Views

Grid

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

This question is locked. New answers and comments are not allowed.

Helene Lach asked on 03 Jun 2011, 04:58 PM

I am trying to format numeric columns in an ajax-bound grid using ClientTemplate and $.telerik.formatString following the instructions in this post. I do not receive an error - however the formatting does not work and always return the unformatted string. I debugged in firebug and it appears thwe issue comes from $.telerik.formatString() itself. It gets called properly, but returns an unformatted string. Stepping through the code (for instance with '{0:c}' and 1000 as parameters) I noticed the line this.formatters["number"] returns undefined. In fact the array has only one element - date - is this normal? Am I missing another script file which might have the missing formatters elements? Or are they not used, but then why isn't my data formatted properly?

Here is my code:

public static GridColumnSettings ApplyFormat(this GridColumnSettings column, string format)

{

format = format.Replace("#", "^");

column.ClientTemplate = "<#= formatter('" + format + "', " + column.Member + ") #>";

return column;

}

Javascript:

function formatter(format, value) {

format = format.replace(/\^/g, '#');

return $.telerik.formatString(format, value);

}

And the formatString() that is called from telerik.common.min.js:

formatString:function()

{

var w = arguments[0];

for(var e=0,t=arguments.length-1;e<t;e++)

{

var v = new RegExp("\\{" + e + "(:([^\\}]+))?\\}","gm");

var u = arguments[e + 1];

var x = this.formatters[this.getType(u)];

if(x)

{

var y = v.exec(w);

if(y)

{

u = x(u,y[2])

}

w = w.replace(v,function()

{

return u

})

}

return w

}

I tried with the following formats: "{0:n}" , "{0:c}", "{0:##,###}" to no avail. Any idea what I might be doing wrong? I am using MVC3 with Razor and the latest build of the Telerik extensions for MVC (2011.1.523).

Thanks in advance!

4 Answers, 1 is accepted

answered on 03 Jun 2011, 07:50 PM

Atanas,

Thank you for the very quick answer! I assume telerik.textbox.js is not registered by default because the grid is not editable?

I tried adding telerik.textbox.js to the script registrar this way:

<script src="@Url.Content("~/Scripts/Custom/Common.js")" type="text/javascript"></script>

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.textbox.js")))

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.js")"></script>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

It does register the file properly, but the formatting still doesn't work.

However if I duplicate the rendering this way:

@(Html.Telerik().ScriptRegistrar)

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.textbox.js")))

... it works! But of course I end up with a duplication of the all the include files (except for the textbox one) and the jQuery code.

It looks like a possible reason for this behavior might be due to the fact that the call to formatter() which itself calls $.telerik.formatString() is in the jQuery stuff AFTER the include files as shown below (in the jQuery('#SalesRuleGrid') line). I'm not sure why one would affect the other though.

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/Custom/Common.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.textbox.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.common.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.list.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.grid.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.grid.filtering.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.draganddrop.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.grid.resizing.min.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/2011.1.523/telerik.menu.min.js"></script>

<script type="text/javascript">

//<![CDATA[

jQuery(document).ready(function(){

jQuery('#WebStoreId').tDropDownList({onChange:webStoreChanged, data:[{"Text":"All Web Stores","Value":"0"}], encoded:false});jQuery('#SalesRuleDiscriminator').tDropDownList({onChange:salesRuleDiscriminatorChanged, data:[{"Text":"Fixed Order Discount","Value":"1"},{"Text":"Percentage Off Order Discount","Value":"2"},{"Text":"Fixed Targeted Item Discount","Value":"3"},{"Text":"Percentage Off Targeted Item Discount","Value":"4"},{"Text":"Shipping Discount","Value":"5"},{"Text":"Bogo Discount","Value":"6"}], index:1, encoded:false});

jQuery('#SalesRuleGrid').tGrid({columns:[{"title":"Name","member":"Name","type":"Object"},{"title":"Description","member":"Description","type":"Object"},{"title":"Percentage Off","template":"\u003c#= formatter(\u0027{0:p}\u0027, PercentageOff) #\u003e","member":"PercentageOff","type":"Object"},{"title":"","template":"\u003ca class=\u0027nbty-delete-button t-button t-button-icon\u0027 href=\u0027/DirectResponseAdmin/Marketing/SalesRule/Delete/\u003c#= RuleId #\u003e\u0027\u003e\u003cspan class=\u0027t-icon t-delete\u0027\u003e\u003c/span\u003e\u003c/a\u003e","member":null,"type":"Object"}], plugins:["filtering","resizing"], pageSize:20, total:0, currentPage:1, pageSizesInDropDown:["20","50","100"], sortMode:'single', selectable:true, ajax:{"selectUrl":"/DirectResponseAdmin/Marketing/SalesRule/AjaxIndex?salesRuleDiscriminator=PercentageOffOrderDiscount&SalesRuleGrid-size=20"}, onError:onError, onRowSelect:onRowSelected, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup"}, noRecordsTemplate:'No records to display.'});

jQuery('#topMenu').tMenu();});

//]]>

</script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/jquery.validate.js"></script>

<script type="text/javascript" src="/DirectResponseAdmin/Scripts/jquery.validate.unobtrusive.js"></script>

Any idea how I can register the telerik.textbox.js file so it is seen by the grid and avoid duplication?

Thanks!