MVC Grid with Ajax loses column formats

[Bob]

I have a working MVC application that reads XML data and creates a Grid. The grid has some columns that are formatted for currency. If I add Ajax to the grid, the currency formatting disappears! Shown below is my aspx page where the grid is defined:

Html.Telerik().Grid(Model)

    .Name(

"grid1")

 

    .DataBinding(d => d.Ajax().Select(

"ajax_sw_candidates", "Candidate"))

 

    .Columns(c =>

    {

        c.Bound(o => o.name);

        c.Bound(o => o.office);

        c.Bound(o => o.party);

        c.Bound(o => o.raised).HtmlAttributes(

new { @style = "text-align:right" }).Format("{0:C}");

 

        c.Bound(o => o.spent).HtmlAttributes(

new { @style = "text-align:right" }).Format("{0:C}");

 

        c.Bound(o => o.ind_supporting).HtmlAttributes(

new { @style = "text-align:right" }).Format("{0:C}");

 

        c.Bound(o => o.ind_opposing).HtmlAttributes(

new { @style = "text-align:right" }).Format("{0:C}");

 

    })

    .PrefixUrlParameters(

false)

 

    .Pageable(p => p.PageSize(15)

        .Style(

GridPagerStyles.NextPreviousAndNumeric)

 

        .Position(

GridPagerPosition.Bottom))

 

    .Sortable()

    .Filterable()

    .Groupable()

    .Render();

The CandidateController:

 

 

public ActionResult sw_candidates()

 

{

 

    // read XML file to get data

 

    doc =

XDocument.Load(@"C:\Workspace\Visual Studio 2008\Solutions\MvcQuerySystem\MvcQuerySystem\Content\xml\statewide2008.xml");

 

 

    var q = from c in doc.Descendants("candidate")

 

 

    select new can_sw_model

 

 

 

    {

 

        name = (

string)c.Attribute("name"),

 

        office = (

string)c.Parent.Attribute("name"),

 

        party = (

string)c.Attribute("party"),

 

        raised =

decimal.Parse(((string)c.Attribute("raised")).Replace("$", "").Replace(",", "")),

 

        spent =

decimal.Parse(((string)c.Attribute("spent")).Replace("$", "").Replace(",", "")),

 

        ind_supporting =

decimal.Parse(((string)c.Attribute("iefor")).Replace("$", "").Replace(",", "")),

 

        ind_opposing =

decimal.Parse(((string)c.Attribute("ieagainst")).Replace("$", "").Replace(",", "")),

 

    };

 

    return View(q);

 

}

[

GridAction]

 

 

public ActionResult ajax_sw_candidates()

 

{

 

    // read XML file to get data

 

    doc =

XDocument.Load(@"C:\Workspace\Visual Studio 2008\Solutions\MvcQuerySystem\MvcQuerySystem\Content\xml\statewide2008.xml");

 

 

    var q = from c in doc.Descendants("candidate")

 

 

    select new can_sw_model

 

 

 

    {

 

        name = (

string)c.Attribute("name"),

 

        office = (

string)c.Parent.Attribute("name"),

 

        party = (

string)c.Attribute("party"),

 

        raised =

decimal.Parse(((string)c.Attribute("raised")).Replace("$", "").Replace(",", "")),

 

        spent =

decimal.Parse(((string)c.Attribute("spent")).Replace("$", "").Replace(",", "")),

 

        ind_supporting =

decimal.Parse(((string)c.Attribute("iefor")).Replace("$", "").Replace(",", "")),

 

        ind_opposing =

decimal.Parse(((string)c.Attribute("ieagainst")).Replace("$", "").Replace(",", "")),

 

    };

 

    return View(new GridModel

 

 

 

    {

 

        Data = q,

    });

}

 

Without the DataBinding statement to use Ajax, the code works perfectly. When I add the DataBinding statement, after the first rendering, the currency fields lose their formatting. Any ideas (or solutions) would be highly appreciated.

[Atanas Korchev]

Hi Bob,

Indeed number formatting is not supported in ajax binding mode currently and is outlined in our documentation.

As a workaround I can suggest you use a ViewModel object exposing the formatted number as string.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bob]

Thanks for responding, Atanas. I figured out last night that the number formatting is in server-side logic, and that Ajax couldn't apply it. The problem I then have is that I want the numeric columns to sort numerically instead of alphabetically. I am going to look into client-side templates to see if they will solve my problem.

[Steven Doran]

Hello, I am having this same problem. And client-side templates aren't working. Any updates on this issue?

Thank you!

[Bob]

Hi Atanas,

I noticed that numeric formatting is now available in Ajax binding mode! Thanks! It works great!

Of course, no good deed goes unpunished... I have been using RSS feeds to enable users to notice when their favorite pages have changed. In Ajax binding mode, the group-by, filter-by, etc options are not available in the URL, so I don't have them to use to create my URLs for the RSS feed. Is there an easy way to get this information so that I can put it into RSS feeds while using Ajax binding mode?

My site is http://www.pdc.wa.gov. It is currently working without Ajax binding, and works well. By the way, thanks again for creating such marvelous controls for MVC. They are simply wonderful!

If you can give me any ideas to help me create RSS feeds using Ajax binding mode that are the complete equivalent of those I am able to create using server binding, please advise!

Thanks,

Bob

[Atanas Korchev]

Hello Bob,

You can use the following fields to get the internally maintained settings of the grid:

• currentPage
• orderBy
• filterBy
• groupBy

Those are all fields of the grid client object.

Regards,
Atanas Korchev
the Telerik team

[Bob]

Hi Atanas,

In my view, I have written:

function

 

 

rssclick() {

 

window.location.replace(

 

'<%= ResolveUrl("~/Candidate/rss") %>' + "?year=" + $('#YearList').val() + "&tab=legislative" +

 

 

 

"&page=" + $("#grid1").currentPage);

 

}

and I have assigned rssclick as the onclick eventhandler for the rss feed button (actually it is an image), but I get the parameter as "undefined" in the controller. Could you give me an example of how to get the value of currentPage, orderBy, groupBy, and/or filterBy in such a way that I can pass them to the rss feed?

Thanks,
Bob

[Bob]

Hi Atanas,

I have figured out the answer to my question!

I now write:

function rssclick() {
    var grid = $("#grid1").data("tGrid");
    window.location.replace('<%= ResolveUrl("~/Candidate/rss") %>' + "?year=" + $('#YearList').val() + "&tab=legislative" +
        "&page=" + grid.currentPage + "&orderBy=" + grid.orderBy + "&groupBy=" + grid.groupBy + "&filterBy=" + grid.filterBy);
}

This works and gets me the information I need to do a proper RSS feed.

Thanks!