telerikasp.net-ajaxclient-side-dataradlistview

Client Side binding Telerik RadListView not working, what is missing?

I can seem to get client-side binding to work (after 2 days) using Telerik controls. AM I not providing the right kind of fake value/pair data? Not finding the control ID properly?

What needs to be done to properly bind data to Telerik RadListView from the client side?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Admin.WebForm1" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
    <title></title>
    <script type="text/javascript">
        //
    </script>
    <script src="scripts/jquery-2.1.1.min.js"></script> </head> <body>
    <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="rsm1" runat="server"></telerik:RadScriptManager>
            <telerik:RadListView
                ItemPlaceholderID="itemPlaceHolder"
                ID="listviewHere" runat="server" ClientIDMode="Static">
                <ClientSettings>
                    <DataBinding>
                        <LayoutTemplate>
                            <ul id="itemPlaceHolder">
                            </ul>
                        </LayoutTemplate>

                        <AlternatingItemTemplate>

                        </AlternatingItemTemplate>

                        <EmptyDataTemplate>
                            nothing
                        </EmptyDataTemplate>
                        <ItemTemplate>
                            <li>#= id # ----sdfdsfsdsdf</li>
                        </ItemTemplate>
                    </DataBinding>
                </ClientSettings>
            </telerik:RadListView>
        </div>
    </form>
    <script type="text/javascript">

        //$("#grid1").hide();
        //$("#listviewHere").show();

        $(document).ready(function () {
            var data = [{ id: 1, name: "name1", value: 12.4 }, { id: 2, name: "name2", value: 12.4 }];

            var listView = $find("#listviewHere");
            //var listView = listviewHere().get_masterTableView();
            //listView.get_masterTableView();
            listView.set_dataSource(data);
            listView.dataBind();

        });
    </script>

</body> </html>
Solution

  • You are not finding the listview client object properly - you should use:

    var listView = $find('<%= listviewHere.ClientID %>');

    Check the Client-side Databinding demos on their site:

    http://demos.telerik.com/aspnet-ajax/listview/examples/client/appendingdata/defaultcs.aspx