$.telerik.formatString issue

[Helene Lach]

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!

[Atanas Korchev]

Hello Helene Lach,

 You need to include telerik.textbox.js to get number formatting. The grid normally includes it if it contains a numeric column.

Greetings,
Atanas Korchev
the Telerik team

[Helene Lach]

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!

[Atanas Korchev]

Hi Helene Lach,

 I am afraid this is not a known problem. Number formatting should work out of the box. What is the .NET type of the column which you are trying to format? Could you send us a sample project?

Regrads,
Atanas Korchev
the Telerik team

[Helene Lach]

The column is of decimal type.

I finally made ithe workaround work.

It turns out the problem came from the fact that the scripts that are manually added to the registrar get included first. However, textbox.js has dependencies on common.js. So in the end the followinf worked:

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

Thank you very much for your help.