Grid Column Template links on redner all links not bound in column.

[Charlie]

Here is my mvc view: 

@(Html.Kendo().Grid(Model) _

            .Name("MaintenanceTickets") _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.CreateDate).Format("{0:d}").Title("Created")) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Originator).Width(100)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.CustomerName).Title("Customer").Width(100)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.OntimeAssignedTo).Title("Assigned").Width(100)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Priority.Name).Title("Priority").Width(75)) _

            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Status.Name).Title("Status").Width(75)) _

            .Columns(Function(modelitem) modelitem.Bound("Id").Title("Actions").Template(Sub(item)@<text>

                            <a href="@url.Action("Details", "Ticket")/@item.Id">Details</a> <a href="/Ticket/Edit/@item.Id">Edit</a>

                            </text>                                                                                         

                                                                                         End Sub)) _

            .Pageable(Function(page) page.PageSizes(5)) _

            .Sortable() _

            .Filterable() _

            .Resizable(Function(resize) resize.Columns(True)) _

            .ColumnMenu()

        )

What is odd is that when it renders, I see the column, but it moves all the links out of the bound column and renders them across the top of the grid. Attached screenshot.

[Petur Subev]

Hi Charlie,

I suspect the problem is the Razor operator you  are using. Could you change the code like so and see if it helps?

@{Html.Kendo().Grid(Model) _
            .Name("MaintenanceTickets") _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.CreateDate).Format("{0:d}").Title("Created")) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Originator).Width(100)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.CustomerName).Title("Customer").Width(100)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.OntimeAssignedTo).Title("Assigned").Width(100)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Priority.Name).Title("Priority").Width(75)) _
            .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Status.Name).Title("Status").Width(75)) _
            .Columns(Function(modelitem) modelitem.Bound("Id").Title("Actions").Template(Sub(item)@<text>
                            <a href="@url.Action("Details", "Ticket")/@item.Id">Details</a> <a href="/Ticket/Edit/@item.Id">Edit</a>
                            </text>
                                                                                         End Sub)) _
            .Pageable(Function(page) page.PageSizes(5)) _
            .Sortable() _
            .Filterable() _
            .Resizable(Function(resize) resize.Columns(True)) _
            .ColumnMenu().Render();
        }

Kind Regards,
Petur Subev
the Telerik team

[Hassan]

Hi,

I am after this very same thing, I just need a column that contains Details and Edit links that go to Details and Edit actions in C# Razor please.

Thank you
Hassan

[Charlie]

Here is the example I used for a Server bound Grid.

@(Html.Kendo().Grid(Model) _

            .Name("TestGrid") _

                .Columns(Function(modelItem) modelItem.Bound(Function(p) p.ID).Hidden) _

                .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Text)) _

                .Columns(Function(modelitem) modelitem.Command(Sub(p)

                                                                       p.Custom("Details").Action("Detail", "Home").DataRouteValues(Function(item) item.Add(Function(model) model.ID)).HtmlAttributes(New With {.class = "k-grid-btn"})

                                                                       p.Custom("Edit").Click("showEdit").HtmlAttributes(New With {.class = "k-grid-btn"})

                                                                       p.Custom("Delete").Click("showDelete").HtmlAttributes(New With {.class = "k-grid-btn"})

                                                               End Sub)) _

            .Pageable() _

            .Sortable() _

            .Filterable() _

            .Resizable(Function(resize) resize.Columns(True))

        )

[Hassan]

Thanks Charlie.

I am using C# and Ajax.  I can translate the VB but not sure how to do the changes required by AJAX

Hassan

[Charlie]

Actually there is a C# Razor syntax example right on the demos page for use with Ajax.

http://demos.kendoui.com/web/grid/custom-command.html

I used this example and it worked perfect for me, I just needed a server bound solution.

[Hassan]

Thanks Charlie.

I saw that samople ages ago but it is in javascript.  I am using ASP.NET MVC with Razor.  This is my grid.

    @(Html.Kendo().Grid(Model)   
        .Name("products")
        .Columns(columns => {
            columns.Bound(p => p.Id).Visible(false);
            columns.Bound(p => p.Title).Width(280);
            columns.Bound(p => p.Brand).Width(70);           
            columns.Bound(p => p.SellPrice).Width(40);
            columns.Bound(p => p.PacketWeight).Width(60);
            columns.Bound(p => p.Enabled).Width(30);
        })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
        .Read(read => read.Action("GetProducts", "Product").Data("additionalData"))
        )
        .Pageable()
        .Sortable()
        .Navigatable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    )

[Charlie]

On that page there is an option for JS, ASPX, and Razor syntax. You need to select "custom-command.cshtml" from SELECT FROM SOURCE dropdown just above the source code box to the right.

[Hassan]

Man, that is what I was looking for.  Thank you so much.  That sample displays code in a pop up windows.  If you know how I can, from the javascript function, go to another view passing the id of the selected row I'd be done.  If you don't know, you still saved me lots of time and I should be able to dig a round a bit for a solution

Thanks again mate

[Charlie]

Your welcome. Try this JS for redirection to a different view

What you need to do:

function showEdit(e) {

    e.preventDefault();

    var currentDataItem =     $("#REPLACE_WITH_GRIDNAME").data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));

    window.location = "REPLACE WITH CONTROLLER/VIEW PATH" + currentDataItem.Id;

}

Working Example:

function showEdit(e) {

    e.preventDefault();

    var currentDataItem = $("#MyGrid").data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));

    window.location = "/MyController/Edit/" + currentDataItem.Id;

}

Hope this helps. :-)