So I currently have the following grid that is placing a link on the value of the first table cell... I would like the entire row to be clickable to that URL... how do I do that?
@(Html.Kendo().Grid<WorkList>()
.Name("AllLists")
.DataSource(ds => ds.Ajax()
.Read("AllListsData", "Workdriver")
.PageSize(100))
.Columns(c =>
{
c.Bound(w => w.ListName).Title("List").ClientTemplate("<a href='" + Url.Action("List") + "/#=ListId#'>#:data.ListName#</a>");
c.Bound(w => w.ListDescription).Title("DESCRIPTION");
c.Bound(w => w.CountOfAccounts).Title("NUMBER OF ACCOUNTS");
})
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Groupable(g =>
{
g.Messages(m =>
{
m.Empty("Drag Column Header Here to Group");
}
);
}
)
.Pageable(p => p.Input(true).Numeric(false))
.Filterable()
)
@(Html.Kendo().Grid<WorkList>()
.Name("AllLists")
.DataSource(ds => ds.Ajax()
.Read("AllListsData", "Workdriver")
.PageSize(100))
.Columns(c =>
{
c.Bound(w => w.ListName).Title("List").ClientTemplate("<a href='" + Url.Action("List") + "/#=ListId#'>#:data.ListName#</a>");
c.Bound(w => w.ListDescription).Title("DESCRIPTION");
c.Bound(w => w.CountOfAccounts).Title("NUMBER OF ACCOUNTS");
})
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Groupable(g =>
{
g.Messages(m =>
{
m.Empty("Drag Column Header Here to Group");
}
);
}
)
.Pageable(p => p.Input(true).Numeric(false))
.Filterable()
)
9 Answers, 1 is accepted
0

Jayesh Goyani
Top achievements
Rank 2
answered on 23 Sep 2013, 06:21 AM
Hello,
Please try with the below code snippet.
Thanks,
Jayesh Goyani
Please try with the below code snippet.
<
script
type
=
"text/javascript"
>
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var tr = $('#Grid').find('tr').eq(rowIdx);
window.location.href = $($(tr).find('td:first').find('a')).attr('href');
});
}
</
script
>
@(Html.Kendo().Grid<
MvcApplication1.Models.TestModels
>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(w => w.Name).Title("List").ClientTemplate("<
a
href
=
'http://www.google.com/#=ID#'
>#:Name#</
a
>");
columns.Bound(p => p.ID);
columns.Bound(p => p.Name);
})
.Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Grid_Read", "Home"))
)
.Events(e => e.DataBound("onDataBound"))
)
Thanks,
Jayesh Goyani
0
Hello Jason,
I tried the code snippet and it is working on my side. A bit shorter way to achieve it is the following.
E.g.
Please let me know if this was the information that you were looking for. I wish you a great day!
Dimiter Madjarov
Telerik
I tried the code snippet and it is working on my side. A bit shorter way to achieve it is the following.
E.g.
function
onDataBound(e) {
var
that =
this
;
$(that.tbody).on(
"click"
,
"tr"
,
function
(e) {
window.location.href = $(
this
).find(
'td:first a'
).attr(
'href'
);
});
}
Please let me know if this was the information that you were looking for. I wish you a great day!
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jason
Top achievements
Rank 1
answered on 24 Sep 2013, 03:14 PM
Thanks! This does work but it seems like kind of a dirty way to do it. Is there a way to wrap the entire row with the link without stuffing the link into a cell and then using javascript to pull it out and wrap the row? Meaning, is there a Kendo supported solution, or is the javascript way the best way to do it?
0
Hi Jason,
I was not aware, that you are searching for an alternative way to achieve this. I just pointed out what could be done to refactor the current approach.
An alternative solution would be to not use any link at all, bind to the click event of the row, retrieve the data for it and navigate the same way. Here is a sample solution.
E.g.
Regards,
Dimiter Madjarov
Telerik
I was not aware, that you are searching for an alternative way to achieve this. I just pointed out what could be done to refactor the current approach.
An alternative solution would be to not use any link at all, bind to the click event of the row, retrieve the data for it and navigate the same way. Here is a sample solution.
E.g.
function
onDataBound(e) {
var
that =
this
;
$(that.tbody).on(
"click"
,
"tr"
,
function
(e) {
var
rowData = that.dataItem(
this
);
var
url =
"http://www.google.com/"
+ rowData.ProductID;
window.location.href = url;
});
}
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jason
Top achievements
Rank 1
answered on 27 Sep 2013, 02:25 PM
Dimiter, Thanks so much for the solutions! I ended up using the second solution you provided but will probably be using the last solution on a couple future grids... FYI, the very first solution actually is grabbing the <a> from the previous line... The <tr> link then is actually linking to the link that should be on the row above.
Thanks again!
Thanks again!
0

Jason
Top achievements
Rank 1
answered on 01 Nov 2013, 02:11 PM
I think I may have found a bug in the way this js makes the row clickable. Our solution is using MVC 4, so the links we are generating are Controller/Action links. That being said it appears that this link is being called twice... When I set break points in the javascript that is called upon this link being clicked the breakpoint gets hit twice before moving on. If I remove this javascript that makes the row clickable then it only gets hit once.
Any ideas?
<script type="text/javascript">
function onDataBound(e) {
var that = this;
$(that.tbody).on("click", "tr", function (e) {
//window.location.href = $(this).find('td:first a').attr('href');
});
}
</script>
@(Html.Kendo().Grid<ReportListViewModel>()
.Name("ReportList")
.HtmlAttributes(new { @class = "cursorLink"})
.DataSource(ds => ds.Ajax()
.Read("ReportListData", "Reports", new { ProductName = ViewBag.SelectedProduct.ProductName })
.PageSize(500))
.Columns(c =>
{
c.Bound(f => f.ReportName).Title("Report Name").ClientTemplate("<a href='" + Url.Action("ReportView") + "/#=ReportId#'>#:data.ReportName#</a>");
c.Bound(f => f.ReportCategoryName).Title("Category");
c.Bound(f => f.User_CreatedBy).Title("Created By");
c.Bound(f => f.CreatedDate).Title("Date Created").Format("{0:d}");
c.Bound(f => f.ReportDescription).Title("Description");
})
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Groupable(g =>
{
g.Messages(m =>
{
m.Empty("Drag Column Header Here to Group");
}
);
}
)
.Pageable(p =>
{
p.Input(true).Numeric(false);
p.PageSizes(new int[] { 25, 50, 100, 200, 500 });
})
.Filterable()
.ColumnMenu()
.Events(e => e.DataBound("onDataBound"))
)
Any ideas?
<script type="text/javascript">
function onDataBound(e) {
var that = this;
$(that.tbody).on("click", "tr", function (e) {
//window.location.href = $(this).find('td:first a').attr('href');
});
}
</script>
@(Html.Kendo().Grid<ReportListViewModel>()
.Name("ReportList")
.HtmlAttributes(new { @class = "cursorLink"})
.DataSource(ds => ds.Ajax()
.Read("ReportListData", "Reports", new { ProductName = ViewBag.SelectedProduct.ProductName })
.PageSize(500))
.Columns(c =>
{
c.Bound(f => f.ReportName).Title("Report Name").ClientTemplate("<a href='" + Url.Action("ReportView") + "/#=ReportId#'>#:data.ReportName#</a>");
c.Bound(f => f.ReportCategoryName).Title("Category");
c.Bound(f => f.User_CreatedBy).Title("Created By");
c.Bound(f => f.CreatedDate).Title("Date Created").Format("{0:d}");
c.Bound(f => f.ReportDescription).Title("Description");
})
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Groupable(g =>
{
g.Messages(m =>
{
m.Empty("Drag Column Header Here to Group");
}
);
}
)
.Pageable(p =>
{
p.Input(true).Numeric(false);
p.PageSizes(new int[] { 25, 50, 100, 200, 500 });
})
.Filterable()
.ColumnMenu()
.Events(e => e.DataBound("onDataBound"))
)
0
Hi Jason,
In which browser are you experiencing this behavior? As you stated in your last post, the second approach without the link tag is cleaner, so I would recommend using it instead.
Dimiter Madjarov
Telerik
In which browser are you experiencing this behavior? As you stated in your last post, the second approach without the link tag is cleaner, so I would recommend using it instead.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Jason
Top achievements
Rank 1
answered on 04 Nov 2013, 04:55 PM
It is happening in all browsers. It seems that the controller/actions only get called twice when you click directly on the first cell that had the original link. It seems that the original link and the clickable row link are getting called. If you click on any cell but the original cell that has the template link on it, then everything only gets called once.
Is there a way remove the first link on databind?
OR, is there a way I can apply a template to an entire row (tr) in the grid?
Jason
Is there a way remove the first link on databind?
OR, is there a way I can apply a template to an entire row (tr) in the grid?
Jason
0
Hi Jason,
I am not sure why removing the link is necessary as we already discussed an approach which does not include it. You could build the action link in the click handler too.
E.g.
Regarding the last question, yes you could apply a template to the whole row as demonstrated in the following demo.
Dimiter Madjarov
Telerik
I am not sure why removing the link is necessary as we already discussed an approach which does not include it. You could build the action link in the click handler too.
E.g.
function
onDataBound(e) {
var
that =
this
;
$(that.tbody).on(
"click"
,
"tr"
,
function
(e) {
var
rowData = that.dataItem(
this
);
var
url =
"@Url.Action("
Index
", "
Home
")/"
+ rowData.OrderID;
window.location.href = url;
});
}
Regarding the last question, yes you could apply a template to the whole row as demonstrated in the following demo.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!