Create RadSocialShare control client-side

[BJ]

• ASP.NET version: 4.0.30319
• OS: Windows Server 2012 R2
• Browser: Google Chrome v66.0.3359.139 (Official Build) (64-bit)
• Exact Telerik Version: 2014.1.225.40 (2007-2014 Telerik AD)
• Preferred programming language: VB.NET

Hello, I'm currently implementing infinite scroll/load more functionality for news articles on our website. Do you have any documentation or advice on how we can initialize the RadSocialShare control client-side? I can load the initial batch of articles with their respective RadSocialShare controls, but because we're adding load more, we don't have the title and url to share until the user scrolls to the bottom of the page. Is there a way to find out which components we need in order to wire up RadSocialShare controls for the subsequent batches of articles?

Thanks!

[Charles]

I took this over after it sat for about a year with no solution as our implementation is very custom.

Maybe it was too obvious to warrant a reply for a standard implementation?

 

Create a stored procedure that returns a page of data. (typical)

 <WebMethod()>
 Public Shared Function GetNews(ByVal pageIndex As Integer) As String<br>
     Return GetNewsChunk(pageIndex).GetXml<br>
 End Function

 

Call the webmethod with javascript. (typical)

function GetArticles() {
pageIndex++;

if (pageIndex === 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "/News/Default.aspx/GetNews",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
console.log("failure " + response.d);
},
error: function (response) {
console.log("error " + response.d);
}
});
}
}

 

OnSuccess, Copy the first Repeater Item (including RadSocialShare control) and its modal pop up. 

function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var articles = xml.find("Articles");

articles.each(function () {
            var article = $(this);
            var articleId = article.find("id").text();
            var articleCopy = $("#articlesContainer .news-article").eq(0).clone(true);

            var linkListCopy = $("#linkList table tr").eq(0).clone(true,true);
/* !!!!edited for space!!!!
Modify all your content from your Repeater Control item
*/

 

Update all the id values from the copy of your Repeater Item

//add new article
  articleCopy.attr("id", articleId);
  $(".article-title", articleCopy).html(article.find("Title").text());
  $(".article-body-left", articleCopy).html(article.find("Body").text());
  $(".article-body-left", articleCopy).attr("id", "ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_pnlArticleBody");
  $(".custom-socialshare-link", articleCopy).html($newModalBtn);
  $("#articlesContainer").append(articleCopy);
  $('div.modal', articleCopy).replaceWith($newModal);

  $('.custom-socialshare-container div#ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ctl00_SocialShare_RadSocialShare1', articleCopy).attr("id", "ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1");
  $('.custom-socialshare-container input#ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ctl00_SocialShare_RadSocialShare1_ClientState', articleCopy).attr("name", "ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1_ClientState");
  $('.custom-socialshare-container input#ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ctl00_SocialShare_RadSocialShare1_ClientState', articleCopy).attr("id", "ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1_ClientState");

 

THE MOST IMPORTANT PART

Add a new script to init the RadSocialShare item in javascript and append it to the html

var newScript = document.createElement("script");
newScript.type = 'text/javascript';
newScript.text = "Sys.Application.add_init(function () { \n"
    + "$create(Telerik.Web.UI.RadSocialShare, {\"_addFbScript\": false, \"_addFbShare\": false, \"_addGoogleScript\": false, \"_addLinkedInScript\": false, \"_addPinterestScript\": false, \"_addTwitterScript\": false, \"_addYammerScript\": false, \"_locale\": \"en_US\",  \"_uniqueId\": \"ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1\", \"clientStateFieldID\": \"ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1_ClientState\", \"mainButtons\": \"[['ShareOnFacebook', '', '', '470', '470', '', ''], ['ShareOnTwitter', '', '', '470', '470', '', ''], ['LinkedIn', '', '', '470', '470', '', ''], ['Delicious', '', '', '470', '470', '', ''], ['Blogger', '', '', '470', '470', '', ''], ['Digg', '', '', '470', '470', '', ''], ['Reddit', '', '', '470', '470', '', ''], ['StumbleUpon', '', '', '470', '470', '', ''], ['MySpace', '', '', '470', '470', '', ''], ['Tumblr', '', '', '470', '470', '', ''], ['GoogleBookmarks', '', '', '470', '470', '', ''], ['MailTo', '', '', '470', '470', '', '']]\", \"titleToShare\": \"" + article.find("Title").text() + "\", \"urlToShare\": \"" + window.location.host + "/news/article.aspx?id=" + articleId + "\"}, null, null, $get(\"ctl00_ctl00_ContentPlaceHolderMain_ContentPlaceHolderMain_rptArticles_ct" + articleId + "_SocialShare_RadSocialShare1\")); \n }); \n";

articleCopy.append(newScript);