Select Item anywhere

5 posts, 0 answers
  1. Mark
    Mark avatar
    16 posts
    Member since:
    Jul 2015

    Posted 09 Jan Link to this post

    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

     

  2. Mark
    Mark avatar
    16 posts
    Member since:
    Jul 2015

    Posted 10 Jan in reply to Mark Link to this post

    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

     

  3. Mark
    Mark avatar
    16 posts
    Member since:
    Jul 2015

    Posted 10 Jan in reply to Mark Link to this post

    A better picture.
  4. Mark
    Mark avatar
    16 posts
    Member since:
    Jul 2015

    Posted 10 Jan in reply to Mark Link to this post

    A better picture
  5. Mark
    Mark avatar
    16 posts
    Member since:
    Jul 2015

    Posted 1 day and 2 hours ago Link to this post

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

     

Back to Top