<%@ Page Language="C#" EnableViewState="false" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>Cross domain client-side binding</title>
    <style type="text/css">
        html
        {
            overflow: auto;
        }
        
        html, body, form
        {
            margin: 0;
            height: 100%;
        }
        
        .img-position
        {
            vertical-align: middle;
            text-align: center;
        }
        .txt-search
        {
            width: 250px;
        }
        .search-container
        {
            padding: 5px 0 5px 15px;
        }
        .container
        {
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <telerik:RadScriptManager runat="server" ID="ScriptManager1" EnableCdn="true">
            <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" />
                <asp:ScriptReference Path="~/jquery.tmpl.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager runat="server" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Windows7" />
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Windows7" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" ControlsToSkip="Buttons"
            DecoratedControls="All" />
        <div class="container">
            <telerik:RadGrid runat="server" ID="RadGrid1" PageSize="1" Width="100%" Height="100%"
                Style="border: 0; outline: none">
                <MasterTableView CommandItemDisplay="Top">
                    <PagerStyle Mode="NextPrev" />
                    <CommandItemTemplate>
                        <div class="search-container">
                            <asp:TextBox runat="server" ID="searchText" Text="#telerik" CssClass="txt-search"
                                onchange="getData();" onkeydown="preventsubmit(event);" />
                            <input type="button" name="Search" value="Search" onclick="getData();" />
                        </div>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Author" UniqueName="AuthorName">
                            <ItemTemplate>
                            </ItemTemplate>
                            <HeaderStyle Width="120px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="AuthorImage">
                            <ItemTemplate>
                            </ItemTemplate>
                            <HeaderStyle Width="80px" />
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="Post" UniqueName="AuthorText">
                            <ItemTemplate>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <ClientEvents OnCommand="function(){}" OnRowDataBound="RadGrid1_RowDataBound" />
                </ClientSettings>
            </telerik:RadGrid>
        </div>
        <%--templates--%>
        <script id="nameTemplate" type="text/html">  
              <a href="http://www.twitter.com/{%= from_user %}" target="_blank">{%= from_user %}</a>
        </script>
        <script id="textTemplate" type="text/html">  
             <p>{%= text %}</p>
        </script>
        <script id="imageTemplate" type="text/html">  
                <img src="{%= profile_image_url %}" alt="{%= from_user %}" />  
        </script>
        <%--end templates--%>
        <script type="text/javascript">

            function pageLoad() {
                getData();
            }

            function RadGrid1_RowDataBound(sender, args) {
                var row = args.get_item();
                var dataItem = args.get_dataItem();
                //instantiate the appropriate template in the cells passing the dataItem
                applyTemplate(row.get_cell("AuthorName"), "#nameTemplate", dataItem);
                applyTemplate(row.get_cell("AuthorImage"), "#imageTemplate", dataItem);
                applyTemplate(row.get_cell("AuthorText"), "#textTemplate", dataItem);
            }

            function applyTemplate(cell, templateId, dataItem) {
                //clears cell content and renders template
                $(templateId).render(dataItem).appendTo($(cell).html(""));
            }

            function getData() {
                var grid = $find("<%=RadGrid1.ClientID %>");
                var searchValue = $telerik.findElement(grid.get_element(), "searchText").value;
                if (!searchValue || searchValue == "") {
                    alert("Please enter search text!");
                    return;
                }
                $.ajax({
                    url: 'http://search.twitter.com/search.json',
                    contentType: 'application/json; charset=utf-8',
                    type: 'GET',
                    dataType: 'jsonp',
                    error: function (xhr, status) {
                        toggleLoadingPanel(false);
                        alert(status);
                    },
                    data: {
                        q: searchValue,
                        rpp: 50 // items per page
                    },
                    success: function (result) {
                        populateGrid(result);
                    }
                });
                toggleLoadingPanel(true);
            }

            function populateGrid(data) {
                var tableView = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(data.results);
                tableView.dataBind();
                toggleLoadingPanel(false);
            }

            function toggleLoadingPanel(show) {
                var panel = $telerik.findAjaxLoadingPanel("<%= RadAjaxLoadingPanel1.ClientID %>");
                var gridElementId = "<%= RadGrid1.ClientID %>";
                if (show) {
                    panel.show(gridElementId);
                } else {
                    panel.hide(gridElementId);
                }
            }

            function preventsubmit(evt) {
                if (evt.keyCode == "13") {
                    evt.cancelBubble = true;
                    evt.returnValue = false;

                    if (evt.stopPropagation) {
                        evt.stopPropagation();
                        evt.preventDefault();
                    }
                    getData();
                }
                return false;
            }
        </script>
    </div>
    </form>
</body>
</html>
