CODEWITHSUNDEEP
asp.net-mvckendo-ui
Jammer
Jammer

Reputation: 10208

Kendo UI Conditional Button in ClientTemplate

I'm trying to get a conditional client template to work in a Kendo Grid that will call into my controller with a simple userName string as a parameter but I cannot figure out the syntax to get this working correctly.

My template is in my view like this:

        columns.Bound(user => user.IsLockedOut).ClientTemplate(
                "# if (IsLockedOut == true) { #" +

                    "<input type='button' value='Unlock Acc' onclick='location.href=" + @Url.Action("UnlockAccount", "Administration", new { userName = "#= UserName #" + }) + "/>" +

                "# } else { #" +
                    "Unlocked" +
                "# } #"
            );

And the action method of the controller looks like:

    public void UnlockAccount(string userName)
    {
    }

At the moment the error generated is:

CS1525: Invalid expression term '}'

I've been looking at this for a couple of hours now and I cannot see the wood for the trees now.

Upvotes: 1

Views: 6275

Answers (3)

Roland Schaer
Roland Schaer

Reputation: 1668

This method worked for me.

const string ShowUpdateButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-edit'></span>Update</a>#}#";
const string ShowReverseButton = "#if (IsNetReversal == false) {#<a class='k-button k-button-icontext k-grid-reverse' href='/JournalDetail/Reverse/#: ID #'  ><span class='k-icon k-reverse'></span>Reverse</a>#}#";
const string ShowDeleteButton = "#if (IsAdjustment == true) {#<a class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-delete'></span>Delete</a>#}#";

You can do the template inline but I find it easier (particularly for multiple buttons) if you declare constants and then use string.format to concatenate them.

col.Template(o => o).ClientTemplate(string.Format("{0}{1}{2}", ShowUpdateButton, ShowDeleteButton, ShowReverseButton));

The upside is it will work with popup editor whereas jquery hacks will ignore the conditional status when a user cancels out of edit. A cancel from the popup editor will restore the grid row from the viewmodel or wherever Kendo stores it which results in button states from before any jquery/javascript hack. The method above will also auto-wire the standard commands since I copied their HTML output for the client template.

The downside is that if Kendo changes their pattern for command buttons the client template may fail. I tired several other methods besides this one and the downside to this method seems better than the other methods.

Note on Kendo Forums: As of the date of this post, they do not appear to allow people who do not pay for support to post to the forums so I would suggest posting questions here instead. They monitor Stack Overflow and in my experience they seem to answer questions more quickly here.

Upvotes: 1

Jammer
Jammer

Reputation: 10208

I've gotta a bit further but only by manually writing the URL like this:

"<input type='button' value='Unlock Acc' onclick='location.href=/Administration/TryUnlockAccount?userName=#= UserName #'/>"

Still doesn't call my controller method though but it does have the right parameter value ...

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20203

You have some '+' plus symbol that you do not actually need. Also you do not need the 'at' sign @ in front of the helper.

 new { userName = "#= UserName #" + }) //<- that last plus

Upvotes: 1

Related Questions