[Solved] Custom command in grid shows page number and pagesize?

[Big Daftie]

Hi there,

I'm sure this is a simple problem to solve, but it completely eludes me - I have an MVC grid bound to my model, and a custom command column to show a popup window with additional details about that row. However, on execution, the actual command instead shows the following:

<a class="k-button k-button-icontext k-grid-View Details" href="/Reporting/Stock?Stock-page=2&Stock-pageSize=10"><span></span>View Details</a>

Note the href - this is wrong, but I cannot for the life of me understand where it's appearing from!

My grid setup:

<% Html.Kendo().Grid(Model)
           .Name("Stock")
           .Columns(columns =>
               {
                   columns.Bound(o => o.SKU).Title("SKU");
                   columns.Template(o => Html.Truncate(o.Name, 60)).Title("Name");
                   columns.Template(o => Html.ActionLink(Html.Truncate(o.Region, 40), "Details", "Stock"));
                   columns.Bound(o => o.Type);
                   columns.Bound(o => o.Quantity);
                   columns.Command(command => command.Custom("View Details").Click("showDetails"));
               })
           .Pageable()
           .Groupable()
           .Sortable()
           .Render();
           %>

Anyone have insight into this, what am I missing?

[Dimiter Madjarov]

Hello,


This is the default behavior of the Grid, when defining a custom command in a server bounded Grid. Generally you could use the same approach from the Demo and call preventDefault() in the event handler.
E.g.

function showDetails(e) {
    e.preventDefault();
    //custom logic
}

 

Regards,
Dimiter Madjarov
Telerik

[Big Daftie]

Dimiter,

Thanks for replying - however my event handler already has preventdefault() within it - the .click() is not actually binding to the button from what I can tell. If I set up a simple alert() within the click handler, it never displays, but merely redirects back to the same page URL:

function showDetails(e) {
        e.preventDefault();
        alert("Hit the showDetails handler");
    }

I know it's something simple - but I cannot figure out what's going on for the life of me!

[Dimiter Madjarov]

Hi,


The reason for the issue is that the handler for the custom command is attached to it based on the custom class, generated by the command name. In the current case the command name has a space in it, which is breaking the generated markup. As a solution I would suggest you to define a command name without space, and use the Text() method to specify the text to be displayed with spaces.
E.g.

columns.Command(command => command.Custom("ViewDetails").Text("View Details").Click("showDetails"));

 

Regards,
Dimiter Madjarov
Telerik

[Big Daftie]

Hi Dimiter,

Just tried that, and it works perfectly now. Many thanks for your help with this, saved a lot of head scratching!

[Big Daftie]

Hi Dimiter,

Thanks for that code snippet - just tried it, and the event handler is firing now. Perfect, thank you!