Command column with link instead of button

[Lars]

Hello,

I need a column with a link that works just like a command button.  For example, an ItemNo column, where the item # is a link which can be clicked to bring up a kendo-window that displays details for that item.  

The item-lookup grid I am working on is encapsulated in a custom AngularJs directive.  

Here is one thing I tried in the column definition: 

field: "ItemNo", title: "Item #", width: 120,
template: "<a href='\\#' class='link' onclick='displayItemDetails(\"#=ItemNo#\")'>#=ItemNo#</a>",

But it cannot find the "displayItemDetails" method (I have tried defining the method both on the directive's $scope and and as a "stand-alone" function, but no luck.  It works fine with a regular command column (except for the fact that it renders a button, and I need a link).  

Also, if at all possible, I would rather not use jQuery to hook up a click handler, since that violates AngularJS best practices.

If someone could provide a working example of how to do this, I would much appreciate it!

Thanks,
Lars

[Dimo]

Hi Lars,

When using the code, which you have shown, the displayItemDetails function must be defined in the global Javascript scope. Is this the case?

On the other hand, if you prefer using a handler defined in the AngularJS $scope, then use the AngularJS way to attach the click handler.

template: "<a href='\\#' class='link' ng-click='displayItemDetails(\"#=EmployeeID#\")'>#=EmployeeID#</a>"

Regards,
Dimo
Telerik

 

 

[Lars]

Hi Dimo,

Using ng-click in the column template definition works great - thanks!

Lars

[Venu]

Hello Dimo,

jsfiddle - for command link in grid cell  : I followed this jsfiddle link but I tried in Razor syntax and unable to get the js function register the event to the anchor link.  

tabstrip.Add().Text("Completed Items")
              .Content(@<text>
                @(Html.Kendo().Grid<TestWeb.Models.RequestLog>()
                        .Name("ActiveGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(e => e.RequestID).Width(110);
                            columns.Bound(e => e.Client);
                columns.Bound(e => e.Action).ClientTemplate("<a href='\\#'  class='k-link link'>#=Action#</a>");
                        })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                          .Read(read => read.Action("GetCompletedRequestData", "Tab"))
                                 )
                )
            </text>);
<script>
$('#ActiveGrid').table.on('click', '.link', function (e) { ///throws error property 'on' is undefined
        var grid = $("#ActiveGrid").data("kendoGrid");
        showDetails.call(grid, e);
    });

function showDetails(e) {
        e.preventDefault();
        var grid = $("#ActiveGrid").data("kendoGrid");
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if (dataItem != null && dataItem.Action.trim() == "View detail") {
            var wnd = $("#DetailsWin").data("kendoWindow");
            wnd.refresh({
                url: "/Tab/ShowPartialView"
                , data: { requestID: dataItem.RequestID }
            });
            wnd.open();
        }
        else {
            alert("Processing your request");
        }
    }
</script>

 

On the link click I am opening a window to load partial view. I need the Razor version of that jsfiddle link. Please help with this

 

[Venu]

Hello Dimo,

jsfiddle - for command link in grid cell  : I followed this jsfiddle link but I tried in Razor syntax and unable to get the js function register the event to the anchor link.  

tabstrip.Add().Text("Completed Items")
              .Content(@<text>
                @(Html.Kendo().Grid<TestWeb.Models.RequestLog>()
                        .Name("ActiveGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(e => e.RequestID).Width(110);
                            columns.Bound(e => e.Client);
                columns.Bound(e => e.Action).ClientTemplate("<a href='\\#'  class='k-link link'>#=Action#</a>");
                        })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                          .Read(read => read.Action("GetCompletedRequestData", "Tab"))
                                 )
                )
            </text>);
 ///throws error property 'on' is undefined

 

On the link click I am opening a window to load partial view. I need the Razor version of that jsfiddle link. Please help with this

 

[Dimo]

Hi Venu,

The click handler should be attached by JavaScript code, which is wrapped in document.ready and placed below the Grid declaration.

http://docs.telerik.com/aspnet-mvc/getting-started/fundamentals#client-side-objects

This will ensure that the Grid widget object exists and its table field in not undefined.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-table

Regards,
Dimo
Telerik by Progress

[Venu]

Hello Dimo,

I think you have overlooked the jsfiddle link shared. Here please take look this example matches with my scenario. This works exactly the way I need. Only difference is mygrid is inside TabStrip and datasource is DBTable.

I have bind the click event inside databound function because of clienttemplate has the anchor tag. and for some reason the click event is firing twice. Also the showDetails(e) is not working as it works for a button. The 'e' and 'dataItem' are showing as null. Attached the view.cshtml for reference.

Is it possible at all.?  or I was thinking of implementing with Command Button and apply CSS to make Button look like Link. If you can share css if available that really helps.

 

 

[Venu]

I took the alternative approach. Below is the code for reference

columns.Command(command => command.Custom("custom").Click("showDetails")).Width(110).Title("Action").HtmlAttributes(new { @class = "linkButton" });

//CSS

.linkButton a {
        background: none !important;
        border: none;
        padding: 0 !important;
        font-family: arial,sans-serif; /*input has OS specific font-family*/
        color: #069;
        text-decoration: underline;
        cursor: pointer;
    }
    .linkButton a:hover {
        background: none !important;
        border: none;
        padding: 0 !important;
        font-family: arial,sans-serif; /*input has OS specific font-family*/
        color: #069;
        text-decoration: underline;
        cursor: pointer;
    }

 

[Dimo]

Hi Venu,

The final approach is valid and I am glad that you have managed to achieve the desired result. I assume the previous one did not work as expected due to issues with the algorithm and duplicate handler attaching. To be more specific, I would not advise using a dataBound handler for one Grid to attach custom handlers related to two Grids.

Regards,
Dimo
Telerik by Progress

[Venu]

Yes Dimo,

I agree with you here it seems be not a good idea in my case, since I have two grids.

Thanks for sharing your inputs on the issue.

[Venu]

Yes Dimo, I agree with you here It seems to be not a good idea in my case, since I have two grids

Thanks for sharing your input on the issue.