RadSocialShare in radlistview with JSON

3 posts, 1 answers
  1. Marco Antonio
    Marco Antonio avatar
    4 posts
    Member since:
    Jun 2013

    Posted 05 Oct 2013 Link to this post

    how to proceed with an element RadSocialShare radlistview fed on the client side with JSON?
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Oct 2013 Link to this post

    Hi Marco,

    You can use its Client-side API: http://www.telerik.com/help/aspnet-ajax/socialshare-client-side-api.html and the set_stringsToShare() method.
    You can get a reference to the control's object by looping through the items - access it by its class (RadSocialShare), for example, and use the control property of the DOM element to access the script contro's client-side object.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marco Antonio
    Marco Antonio avatar
    4 posts
    Member since:
    Jun 2013

    Posted 08 Oct 2013 Link to this post

    Thank you for your attention!

    My scenario is a list of news with infinite scroll JSON. Necessary that each has its own news RadSocialShare.
    On my list I have news event and the image of your RadSocialShare, however the TitleToShare and UrlToShare are equal for all news list.

    I'm using this:

    <%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="True" ValidateRequest="false" CodeFile="Noticias.aspx.cs" Inherits="PROJECTFATEC.Noticias" Culture="auto" UICulture="auto"%>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!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" lang="<%=PROJECTFATEC.Utility.CurrentSiteLanguage%>">
    <head id="Head1" runat="server">
     <title>Noticias Fatec</title>
     
     <style type="text/css">
     
     .noticiatitulo
    {
       font-size:x-large;
       width:100%;
       text-align:center;
    }
     
    .noticatexto
    {
       position:relative;
       width:100%;
    }
    </style>
     
         <!--faz referencia a api do ajax google -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
        var NoticiaInicialPg = 0; // seta a variael inical de pagina
        var SoUmaVez = true; //controla redundancia no evento scroll   
        //**********************************************************************************************
           function GetRegistros(){
                            document.getElementById("ImgRodape").src = "../../Images/AjaxLoaderH.gif";    
                            document.getElementById("ImgRodape").alt = "Carregando...";    
                            document.getElementById("DivLendo").style.display = "block"; //mostra gif rodapé
                            NoticiaInicialPg = NoticiaInicialPg + 5; //proximas 5 paginas
                            $.ajax({
                                type: "POST",
                                url: "Noticias.aspx/GetNoticias", //faz chamada de metodo no c#
                                data: '{NoticiaInicialPg: ' + NoticiaInicialPg + '}', //passa paramentro para o metodo
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    if (data.d != "") {
                                        OnSuccess(data);
                                        document.getElementById("DivLendo").style.display = "none"; //esconde gif rodapé Lendo
                                    }
                                    else
                                    {
                                        document.getElementById("ImgRodape").src = "../../Images/FimDoArquivo.png";
                                        document.getElementById("ImgRodape").alt = "Fim do Arquivo!";
                                        document.getElementById("DivLendo").style.display = "block"; //mostra gif rodapé
                                    }
     
                                    SoUmaVez = true;
                                }
     
                            })
                 };
     
              
            //****************************************************************************   
          
            function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var noticias = xml.find("Table");
            noticias.each(function () {
                  var noticia = $(this);
     
                 var table = $("#dvNoticias #NewTabela").eq(0).clone(true);
                $(".noticiaid", table).html(noticia.find("NOTICIA_ID").text());
                $(".noticiadata", table).html(noticia.find("NOTICIA_DATA").text());
                $(".redesocialtitulo", table).html(noticia.find("NOTICIA_TITULO").text());     
                $(".noticiatitulo", table).html(noticia.find("NOTICIA_TITULO").text());
                $(".noticatexto", table).html( noticia.find("NOTICIA_TEXTO").text());
                $("#dvNoticias").append(table).append("<br/>");
              });
            
         }
     
         //*******************************************************************************************************************
         $(window).scroll(function () {
             if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                 if (SoUmaVez == true) {
                     SoUmaVez = false
                     GetRegistros();
                 }
             }
             else {
                document.getElementById("DivLendo").style.display = "none"; //esconde gif rodapé Lendo
             }
         });
     
         </script>
    </head>
    <body style="background-color:White">
    <form id="FormNoticiasFatec" runat="server" width="100%">
     
          <!-- necessário para o funcionamento do evento on-clic dos botões da rede social criados de forma dinamica -->
           <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>
       
      <div id="dvNoticias" style="position:absolute;left:0px;top:0px;bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;right:0px;background-color:#FFFFFF;border-color:#DBD6D6;border-style:Solid;border-width:1px">
            <telerik:RadListView ID="rptNoticias" runat="server">
                <ItemTemplate>
                   <table  id="NewTabela" cellpadding="3" cellspacing="3" width="100%" style="border:1px solid #016282;">
                     <tr>
                         <td id="NewRow" style="border: 0px" >
                            
                         <asp:Label ID="LbNoticias" class="noticiatitulo"   Text='<%# Eval("NOTICIA_TITULO") %>' runat="server"></asp:Label>
                           
                          <telerik:RadSocialShare ID="radSocialMediaKeyTag"  runat="server" TitleToShare='<%# Eval("NOTICIA_TITULO") %>' UrlToShare='<%# Eval("NOTICIA_URL") %>'>
                           <MainButtons>
                               <telerik:RadSocialButton LabelText="Facebook" SocialNetType="ShareOnFacebook"/>
                               <telerik:RadSocialButton LabelText="Twitter" SocialNetType="ShareOnTwitter"/>
                               <telerik:RadSocialButton LabelText="Blogger" SocialNetType="Blogger"/>
                               <telerik:RadSocialButton LabelText="Mais" SocialNetType="CompactButton"/>
                            </MainButtons>
                          </telerik:RadSocialShare><br/><br/>
                             
                             <div class="textoNoticia">
                                 <asp:Literal ID="LiteralNoticias" runat="server" Text='<%# Eval("NOTICIA_TEXTO")%>'/>
                             </div>
     
                       </td>
                    </tr>
                </table>
                <br />
                </ItemTemplate>
     
           </telerik:RadListView>
                 
                <div id="DivLendo" style="-moz-box-shadow: 0px 13px 30px #888;-webkit-box-shadow: 0px 13px 30px #888;box-shadow:0px 13px 30px #888;position:fixed; display:none; bottom:10px; left:44%;">
                        <img id="ImgRodape" src="" alt=""/>
                </div> 
     
          </div>
      </form>
    </body>
    </html>
Back to Top