More in this section

Forums / Developing with Sitefinity / Adding Library Videos Support for Generic Content Control?

Adding Library Videos Support for Generic Content Control?

7 posts, 0 answered
  1. Scott Harrington
    Scott Harrington avatar
    28 posts
    Registered:
    21 Sep 2009
    15 Oct 2009
    Link to this post
    Hello,

    I was wondering if there is a way to expand the functionality of the Generic Content Control to allow the selection of videos from our Video Library.  This would be a HUGE advantage for development shops that rely on our Libraries almost exclusively.  Thanks for your help!


  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    01 Jun 2017
    16 Oct 2009
    Link to this post
    Hello Scott Harrington,

    You can create a simple DialogSelector that will point to the video libraries in you project.

    Here is an example:
    1. Add in ~\Sitefinity\UserControls\Dialogs\ new page called VideoSelectorDialog.aspx - this page will act as dialog inside the RadEditor.
    2. In that page add RadGrid and bind it to the Video Libraries like this:

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="VideoSelectorDialog.aspx.cs" Inherits="Sitefinity_UserControls_Dialogs_VideoSelectorDialog" %>
     
    <!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>
         
    </head>
    <body>
        <form id="form1" runat="server">
         
        <asp:ScriptManager runat="server"></asp:ScriptManager>   
        <div>
        <telerik:RadGrid ID="grid" runat="server" Skin="Black" >                  
            <MasterTableView>
                <Columns>
                    <telerik:GridClientSelectColumn
                            ButtonType ="PushButton"
                            Text="Select"   
                            CommandName="Select"                       
                    />                               
                    <telerik:GridBoundColumn
                                DataField="Name"
                                DataType="System.String"
                                HeaderText="Name"                                                       
                                UniqueName="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn
                                DataField="Id"
                                DataType="System.Guid"
                                HeaderText="Id"                           
                                UniqueName="Id">
                    </telerik:GridBoundColumn>              
                    <telerik:GridBoundColumn
                                DataField="Url"
                                DataType="System.String"
                                HeaderText="Url"                           
                                UniqueName="Url">
                    </telerik:GridBoundColumn>
                </Columns>               
            </MasterTableView>       
        </telerik:RadGrid>
        <input type="button" onclick="GetSelected()" value="Select" />
        <input type="hidden" value="" id="txtInput" />
        </div>
         
        </form>
        <script type="text/javascript">
            function GetSelected() {               
                    var grid = $find("<%=grid.ClientID %>");               
                    var masterTable = grid.get_masterTableView();
                    var selectedRows = masterTable.get_selectedItems();
                    for (var i = 0; i < selectedRows.length; i++) {
                        var row = selectedRows[i];
                        var cell = masterTable.getCellByColumnUniqueName(row, "Name");
                        var cellUrl = masterTable.getCellByColumnUniqueName(row, "Url");
                        var cellId = masterTable.getCellByColumnUniqueName(row, "Id");
                        var getTxtInput = document.getElementById("txtInput");
                        getTxtInput.value = cell.innerHTML + ',' + cellUrl.innerHTML+','+cellId.innerHTML;
                        returnArg();          
                    }
                }
     
                function GetRadWindow() {
                    var oWindow = null;
                    if (window.radWindow)
                        oWindow = window.radWindow;
                    else if (window.frameElement.radWindow)
                        oWindow = window.frameElement.radWindow;
                    return oWindow;
                }
     
                function pageLoad() {
                    txtInput = document.getElementById('txtInput');
                    var currentWindow = GetRadWindow();
                    txtInput.value = currentWindow.argument;
                }
     
                function returnArg() {
                    var oWnd = GetRadWindow();
                    oWnd.close(txtInput.value);
                }
        </script>
        </body>
    </html>

    Code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using Telerik.Libraries;
    using Telerik.Cms.Engine;
    using Telerik.Cms.Web;
     
    public partial class Sitefinity_UserControls_Dialogs_VideoSelectorDialog : CmsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!Page.IsPostBack)
            {
                this.BindGrid();
            }
        }
     
        private void BindGrid()
        {
            this.grid.ClientSettings.Selecting.AllowRowSelect = true;
            this.grid.AutoGenerateColumns = false;
             
            var manager = new LibraryManager();
            var libraries = manager.GetAllLibraries();
             
            var bindList = new List<BindHelper>();
             
            foreach(ILibrary library in libraries)
            {           
                if(library.TypeName.ToLower() == "video")
                    foreach (IContent item in library.GetItems())
                    {                  
                        bindList.Add(new BindHelper(item.GetMetaData("Name").ToString(), library.Name, item.ID, this.ResolveUrl(item.                UrlWithExtension)));
                    }
            }
            grid.DataSource = bindList;
        }
    }
     
    public class BindHelper
    {
        public string Name {get;private set;}
        public string Library {get;private set;}
        public Guid Id {get;private set;}
        public string Url { get; private set; }
         
        public BindHelper(string itemName, string libraryName, Guid id, string url)
        {
            this.Name = itemName;
            this.Library = libraryName;
            this.Id = id;
            this.Url = url;
        }
    }

    3. Add one additional tool in the ~\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml like this:
    <tool name="VideoManager" text="Insert an Video Link"/>

    4. Open ~\Sitefinity\Admin\ControlTemplates\Generic_Content\GenericContentDesigner.ascx
    Add the following JavaScript code:

    Telerik.Web.UI.Editor.CommandList["VideoManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
     
        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                args.parentNode.replaceChild(editorArgs, args);
            else {
                var split = args.split(",");
                var link = '<a href="' + split[1] + '" sref="[Libraries]' + split[2] + '">' + split[0] + '</a>';
                editorArgs.pasteHtml(link);       
            }
        }
        var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/VideoSelectorDialog.aspx") %>';
        editor.showExternalDialog(
       path,
       editorArgs,
       750,
       515,
       myCallbackFunction,
       null,
       'VideoLibraryDialog',
       true,
       Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
       false,
       true)
    };

    Now each time you click on the new tool and select video file a link to this file will be inserted.

    Hope this helps.

    Best wishes,
    Nikolai
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Pierre
    Pierre avatar
    433 posts
    Registered:
    16 Feb 2006
    16 Oct 2009
    Link to this post
    Hi Nikolai,

    Very Nice, Could extend this solution for manage snippets in one custom library?. I lovely paste my snippets stored in one custom library as plain text in the RadEditor.

    Regards


  4. Scott Harrington
    Scott Harrington avatar
    28 posts
    Registered:
    21 Sep 2009
    16 Oct 2009
    Link to this post
    Thanks for the reply.  I've got everything added with the exception of your last step, to open '~\Sitefinity\Admin\ControlTemplates\Generic_Content\GenericContentDesigner.ascx' I am unable to find the control indicated.  I only see 'ContentVersionView.aspx' under that folder?  Any suggestion?  Do I need to create this .ascx?  Thanks again for your help!
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    16 Oct 2009
    Link to this post
    Hi Scott Harrington,

    Please take a look at the following article that describes from where and how you can obtain the templates - How to map a view to an external template, in Sitefinity 3.6 or later?

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Scott Harrington
    Scott Harrington avatar
    28 posts
    Registered:
    21 Sep 2009
    16 Oct 2009
    Link to this post
    I performed all the actions described above, and I do see a new icon on the Generic Content Control.  However, when I click on the new icon, I get the following popup message: 'The command VideoManager is not implemented yet.'  Any ideas?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    18 Oct 2009
    Link to this post
    Hello Scott Harrington,

    The error could be caused if you have not registered the VideoManager in RadEditor's ToolsFile. Let us know if this is the case for you. If not we will attach the files we use and which work at our end.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
7 posts, 0 answered