currently i am working in asp mvc5 project on kendo-ui grid...

I want to know if there is possibility of making action link or url.action in grid where grid button lies....

<script>
    $(document).ready(function () {
        var projectdata = "http://localhost:xxxx",
        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            toolbar: ["create"],
            scrollable: false,
            sortable: true,
            groupable: true,
            columns: [
                { field: "Name", title: "Task Name", width: "170px" },
                { field: "Status", title: "Status", width: "110px" },
                { field: "IsActive", title: "Active", width: "50px" },
                { mand: ["edit", "delete", "Setting", "Task"], title: "&nbsp;", width: "150px" }
            ],
            editable: "popup"
        });
    });
</script>

I have to change "Setting" in Command field and put action link or url.action there.

currently i am working in asp mvc5 project on kendo-ui grid...

I want to know if there is possibility of making action link or url.action in grid where grid button lies....

<script>
    $(document).ready(function () {
        var projectdata = "http://localhost:xxxx",
        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            toolbar: ["create"],
            scrollable: false,
            sortable: true,
            groupable: true,
            columns: [
                { field: "Name", title: "Task Name", width: "170px" },
                { field: "Status", title: "Status", width: "110px" },
                { field: "IsActive", title: "Active", width: "50px" },
                { mand: ["edit", "delete", "Setting", "Task"], title: "&nbsp;", width: "150px" }
            ],
            editable: "popup"
        });
    });
</script>

I have to change "Setting" in Command field and put action link or url.action there.

• javascript
• jquery
• asp-mvc-4
• kendo-ui
• kendo-asp-mvc

Share Improve this question Follow edited Sep 15, 2015 at 14:31 Matt Millican 4,05444 gold badges4242 silver badges5555 bronze badges asked Jun 5, 2015 at 12:30 S.ZirkS.Zirk 13911 gold badge22 silver badges99 bronze badges 1

• can i do this like @Html.ActionLink("Setting", "Home", "ProjectContr", new { orderId = id },null) – S.Zirk Commented Jun 5, 2015 at 12:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

if you are using asp mvc why not use the razor code?

heres a example, hope it helps

                @(Html.Kendo().Grid<YourObject>()
                            .Name("grid")
                            .TableHtmlAttributes(new { style = "min-height: 331px;" })                                             
                            .ToolBar(t => t.Create())
                            .Columns(columns =>
                            {
                                columns.Template(@<text></text>).ClientTemplate("<div style=\"text-align:center\">" +
                                                                                "<a href=\"" +  Url.Action("Test", new { id = "#=Id#"}) + "\"><i style=\"padding-right: 8px;\" title=\"Setting\" class=\"fa fa-pencil fa-lg\"></i></a>" +

                                                                                "</div>").Width(60).Title("");
                                columns.Bound(c=>c.Id).Hidden(true);
                                columns.Bound(c=>c.Name);
                                columns.Bound(c => c.Status);
                                columns.Bound(c => c.IsActive).ClientTemplate("<div style=\"text-align:center\">" +
                                                                               "# if(Active) {#" +
                                                                               "yes" +
                                                                               "#} else {#" +
                                                                               "no" +
                                                                               "#}#" +
                                                                               "</div>").Width(15);                                    

                            })                                
                            .Sortable()
                            .Filterable()
                            .Pageable()
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Model(model => model.Id(m => m.Id))
                                .Read(read => read.Action("Read", "YourObject"))
                             )
                            ).Filterable()
                        )

Create a custom mand template:

    <script id="mand-template" type="text/x-kendo-template">
            <a class="k-button k-grid-even" href=" @Html.ActionLink("Setting", "Home", "ProjectContr", new { orderId = id },null)">Even</a>
    </script>

and add it as part of your columns

columns: [
    { field: "Name", title: "Task Name", width: "170px" },
    { field: "Status", title: "Status", width: "110px" },
    { field: "IsActive", title: "Active", width: "50px" },
    { mand: ["edit", "delete", "Setting", "Task"], title: " ", width: "150px" },
    { template: kendo.template($("#mand-template").html())}]

Know that this will work only if the code is part of the cshtml file as the like needs to be parsed. The link will fail if its separated to a js file.