Bind value to Url.Action

[Francois]

Hello friends. My second day with Kendo UI for ASP.NET MVC (newbie questions):

tl;dr version:

This:

@Html.HiddenFor(model => model.ProjectID)

... lines ommitted for brievity

.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= ProjectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");

generates this:

<a href="/PurchaseInvoice/[object HTMLInputElement]">$191,449.65</a>

 which shows the amount as a link (great). But what I need to be generated is this:

<a href="/PurchaseInvoice/259">$191,449.65</a>

... where 259 is the ProjectID.

Note that ProjectID is part of the model, but not of the grid's data. That's likely my problem here.

What am I missing? Is there an easier way to do this?

Long version:

@(Html.Kendo().Grid<DataLibrary.ProjectCost>()
    .Name("CostGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Month)
            .Width(100)
            .Title("Mois")
            .Hidden();
        columns.Bound(c => c.SupplierName)
            .Width(300)
            .Title("<div style='text-align:left;'>Fournisseur </div>")
            .HtmlAttributes(new { @style = "text-align:left;" })
            .ClientFooterTemplate("<div style='text-align:right;'>TOTAL: </div>");
        columns.Bound(c => c.OrderAmount)
            .Format("{0:C}")
            .Width(100)
            .Title("Commandé")
            .HtmlAttributes(new { @style = "text-align:right;" })
            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")
            .ClientFooterTemplate("<div style='text-align:right;'>#= kendo.format('{0:C}',sum)#</div>");
        columns.Bound(c => c.InvoiceAmount)
            .Format("{0:C}")
            .Width(100)
            .Title("Facturé")
            .HtmlAttributes(new { @style = "text-align:right;" })
            .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#")
            .ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='" + Url.Action("Index", "PurchaseInvoice/#= projectID #")+"'>#= kendo.format('{0:C}',sum)#</a></div>");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Aggregates(aggregates =>
        {
            aggregates.Add(c => c.OrderAmount).Sum();
            aggregates.Add(c => c.InvoiceAmount).Sum();
        })
        .Group(groups =>
        {
            groups.AddDescending(c => c.Month);
        })
        .Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))
    )
    .Events(events => events.DataBound("collapseGroupRows"))
)

 

I've tried many variations:

.ClientFooterTemplate("<div style='text-align:right;color:blue;'>#= kendo.format('{0:C}',sum)#</div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#'>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate("<div style='text-align:right;color:blue;'><a href='/PurchaseInvoice?ProjectID=#=projectID#>#= kendo.format('{0:C}',sum)#</a></div>");
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#=projectID#" }, new { @style = "text-align:right;color:blue;" }).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());
.ClientFooterTemplate(@Html.ActionLink("#= kendo.format('{0:C}',sum)#","Index", "PurchaseInvoice", new { ProjectID = "#= projectID#" }, null ).ToHtmlString());

 

Perhaps one of these is a (almost) better implementation (none of these work as-is though).

Thanks

[Neli]

Hello Francois,

In the Grid API, you could find a list of the fields that could be used in the footerTemplate. As you will see the possibilities are the aggregates of the current column field or the available configured aggregates for the rest of the fields.

As far as I understand in your case, you keep the needed ProductID in a hidden input field on the same page. In such scenario, I would suggest you use a function in the ClientFooterTemplate.

.ClientFooterTemplate("#=myFunc()#");

In the function, you could retrieve the value of the hidden field and generate the needed string for the ClientFooterTemplate.

I have prepared the Dojo example linked here to demonstrate such an approach.

I hope you will find the provided information helpful. In case you have additional questions related to the issue, please let me know. 

Regards,
Neli
Progress Telerik

[Francois]

Hi Neli,

Thank you for your help. As you noted «[i] keep the needed ProductID in a hidden input field on the same page», yes but that is because I do not know of any other way to do this. Is there a better way? As I explained I tried many ways to refer directly to a property of the model (eg Model.ProjectID) without having the value on the page but could not find a way. Then best way I found was to insert the property as a hidden field on the page - but there must be an easier/simpler way (?); one that does not require the use of a function to get the value. As I said I am new to this UI library and I am learning. 

Thanks.

[Neli]

Hi Francois,

As the model data is not part of the default fields that could be accessed in the footerTemplate the approach with the hidden field is a good option. In case you prefer to use it directly in the Template, you could configure the ClientFooterTemplate as in the example below:

@Html.HiddenFor(model => model.ProjectID)

 .ClientFooterTemplate("#=document.getElementById('ProductID').value #");

I hope this helps.

Regards,
Neli
Progress Telerik

[Francois]

Thank you very much - this is much helpful.