Command column with link instead of button

2 Answers 1286 Views
Grid
Lars
Top achievements
Rank 1
Lars asked on 26 Aug 2014, 02:59 AM
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

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2014, 12:35 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Lars
Top achievements
Rank 1
commented on 27 Aug 2014, 01:47 PM

Hi Dimo,

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

Lars
Venu
Top achievements
Rank 1
commented on 24 Nov 2016, 10:46 AM

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
Top achievements
Rank 1
commented on 24 Nov 2016, 11:06 AM

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
Telerik team
commented on 24 Nov 2016, 12:08 PM

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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Venu
Top achievements
Rank 1
commented on 25 Nov 2016, 10:44 AM

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
Top achievements
Rank 1
commented on 25 Nov 2016, 01:03 PM

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;
    }

 

0
Dimo
Telerik team
answered on 28 Nov 2016, 08:26 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Venu
Top achievements
Rank 1
commented on 29 Nov 2016, 07:26 AM

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
Top achievements
Rank 1
commented on 29 Nov 2016, 07:27 AM

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.

Tags
Grid
Asked by
Lars
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or