Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Select Item anywhere

4 Answers 143 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 09 Jan 2018, 09:58 AM

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

Sort by
0
Mark
Top achievements
Rank 1
answered on 10 Jan 2018, 08:39 AM
untitled.png

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

 

0
Mark
Top achievements
Rank 1
answered on 10 Jan 2018, 08:41 AM
A better picture.
0
Mark
Top achievements
Rank 1
answered on 10 Jan 2018, 08:41 AM
untitled2.png
A better picture
0
Mark
Top achievements
Rank 1
answered on 23 Jan 2018, 09:54 AM

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

 

Tags
ListView
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Share this question
or