Hi,
In the demo https://demos.telerik.com/aspnet-ajax/listview/examples/client/webservicedatabinding/defaultcs.aspx
It is possible to select an item without having a CommandName="Select" and the item can be click anywhere, and it selects.
In the code I am playing with, I have the data bound via code, but cannot get the item to select without a button.
You do not have a button within your demo, so how do you get it to work?
Many Thanks
Mark
4 Answers, 1 is accepted
Update:
From what I can tell the selection is done via a script
$("#listView").on("click", ".item", function (e) {
listview.toggleSelection($(this).index());
});
as per the webservicedatabinding example
But I get an error with this line. See the image I have attached.
Many Thanks
Mark
For anyone else who can't make this work, below is what worked for me.
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TelerikWebApp1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
/>
<
link
href
=
"StyleSheet1.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
telerik:RadCodeBlock
runat
=
"server"
ID
=
"RadCodeBlock1"
>
<
script
type
=
"text/javascript"
>
var listView;
function pageLoad() {
listView = $find('<%= RadListView1.ClientID %>');
}
</
script
>
</
telerik:RadCodeBlock
>
<
script
type
=
"text/javascript"
>
//Put your JavaScript code here.
</
script
>
<
script
src
=
"JavaScript.js"
language
=
"javascript"
type
=
"text/javascript"
></
script
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
div
>
<
telerik:RadListView
ID
=
"RadListView1"
runat
=
"server"
ItemPlaceholderID
=
"DemoData"
DataKeyNames
=
"id"
>
<
LayoutTemplate
>
<
div
id
=
"listView"
>
<
div
id
=
"items"
>
<
asp:PlaceHolder
ID
=
"DemoData"
runat
=
"server"
></
asp:PlaceHolder
>
</
div
>
</
div
>
</
LayoutTemplate
>
<
ItemTemplate
>
<
div
class
=
"item"
>
<
span
class
=
"name"
><%#Eval("Name")%></
span
>
</
div
>
</
ItemTemplate
>
</
telerik:RadListView
>
</
div
>
</
form
>
</
body
>
</
html
>
Code behind
Imports Telerik.Web.UI
Partial Class _Default
Inherits System.Web.UI.Page
Private Sub RadListView1_NeedDataSource(sender As Object, e As RadListViewNeedDataSourceEventArgs) Handles RadListView1.NeedDataSource
Dim dt As New DataTable
dt.Columns.Add("id")
dt.Columns.Add("Name")
Dim dr As DataRow = dt.NewRow
dr("id") = 0
dr("Name") = "Mark"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("id") = 1
dr("Name") = "John"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("id") = 2
dr("Name") = "Sarah"
dt.Rows.Add(dr)
RadListView1.DataSource = dt
End Sub
Private Sub RadListView1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles RadListView1.SelectedIndexChanged
Dim RadListViewRecipe As RadListView = CType(sender, RadListView)
Dim intSelectedValue As Integer = RadListViewRecipe.SelectedValue
Response.Redirect("after.aspx")
End Sub
End Class
JavaScript.js
(function ($) {
$(function () {
$("#listView").on("click", ".item", function (e) {
listView.toggleSelection($(this).index());
});
});
})($telerik.$);
CSS
.imagelink {
background: url('../IMG/Tick.png');
background-repeat: no-repeat;
padding-left: 25px;
background-position: left;
}
.demo-container {
width: 850px;
}
#navigation {
padding-left: 10px;
padding-right: 56px;
}
#listView {
width: 780px;
height: 270px;
margin: 10px 0 0 10px;
position: relative;
}
.sortAsc, .sortDesc,
.pagePrev, .pageNext {
/*width: 30px;
height: 30px;*/
/*background: transparent url('images/actionButtonsSprite.png');*/
/*background-repeat: no-repeat;*/
}
/*.pagePrev, .pageNext {
position: absolute;
top: 132px;
}*/
.pagePrev {
left: -60px;
background-position: 1px -99px;
}
.pagePrev:hover {
background-position: -30px -99px;
}
.pageNext {
right: 60px;
/*background-position: 1px -147px;*/
}
.pageNext:hover {
background-position: -30px -147px;
}
.sortPanel {
display: inline-block;
vertical-align: middle;
margin-bottom: -3px;
}
.sortDescription {
margin-top: 3px;
margin-right: 10px;
vertical-align: bottom;
}
.sortAsc, .sortDesc {
display: inline-block;
margin-left: 3px;
}
.sortAsc {
background-position: 1px 1px;
}
.sortAsc:hover {
background-position: -30px 1px;
}
.sortDesc {
background-position: 1px -47px;
}
.sortDesc:hover {
background-position: -30px -47px;
}
.column {
display: inline-block;
vertical-align: bottom;
margin-right: 10px;
}
.item {
float: left;
background-color: #333333;
color: #767676;
cursor: pointer;
font-size: 12px;
height: 76px;
padding-top: 10px;
width: 240px;
margin: 5px;
border-radius: 5px;
background: #fefefe;
background: linear-gradient(to bottom, #fefefe 0%,#fafafa 20%,#ececeb 64%,#e5e4e4 100%);
box-shadow: 1px 1px 3px #767676;
position: relative;
}
.item:hover,
.item.selected {
color: white;
background-color: #9EC101;
background: #d5d5d5;
background: linear-gradient(to bottom, #d5d5d5 0%,#c6c6c6 28%,#a2a2a2 76%,#959595 100%); /* W3C */
}
.item img,
.item .photo {
width: 57px;
height: 70px;
float: left;
margin: -3px 10px 0 7px;
background-color: #111111;
}
.item .name,
.item .company {
display: block;
margin-bottom: 4px;
line-height: 14px;
}
.item .company {
line-height: 12px;
text-transform: uppercase;
}
.item .title {
position: absolute;
right: 10px;
bottom: 5px;
font-size: 12px;
}
.details {
width: 100%;
}
.details th, .details td {
padding: 0px 3px;
}
.details th {
text-align: right;
width: 55px;
vertical-align: top;
}
.details .addr {
width: 162px;
overflow: hidden;
white-space: nowrap;
}
.empty {
padding: 10px;
text-align: center;
color: White;
background-color: #333333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #212121;
-webkit-box-shadow: 1px 1px 3px #212121;
box-shadow: 1px 1px 3px #212121;
}
/*
The following selectors are used to style the description box only and are irrelevant to the example layout
*/
#defaults {
table-layout: fixed;
border-collapse: collapse;
width: 800px;
}
#defaults th, #defaults td {
border: 1px solid gray;
padding: 2px 10px;
text-align: left;
}
.demo-container {
max-width: 850px;
}