ASP.NET AJAX - Add 'asp:Repeater' in 'RadPanelItem'

6 posts, 0 answers
  1. ryan86pika
    ryan86pika avatar
    5 posts
    Member since:
    Jun 2013

    Posted 18 Jun 2013 Link to this post

    I would like to add a set of images in a folder inside the RadPanelItem. The idea consists to have a repeater that populates the RadPanelItem and after that drag & drop them to in the MainPane.

    How can I drag & drop that images to the MainPane? Have I use javascript or can I use telerik? How? 

    public class ImageName
        {
            private string filename;
     
            public string FileName {
                get { return filename; }
                set { filename = value; }
            }
     
        }
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
     
    namespace TestSVG
    {
        public partial class Main : System.Web.UI.Page
        {
     
            protected void Page_Load(object sender, EventArgs e)
            {
                string path = Server.MapPath("~/Images/QualityPic/");
     
                List<string> stringList = Directory.GetFiles(path, "*.jpg").Select(f => Path.GetFileNameWithoutExtension(f)).ToList();
                List<ImageName> iList = new List<ImageName>();
     
                ImageName i;
                foreach (string s in stringList)
                {
                    i = new ImageName();
                    i.FileName = s;
                    iList.Add(i);
                }
                imageRepeater.DataSource = iList;
                imageRepeater.DataBind();
            }
     
            protected void imageRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                //Event triggered when this item is selected
                if (((Repeater)sender).DataSource != null)
                {
                    ImageName singleImage = (ImageName)e.Item.DataItem;
     
                    Button smallImage = (Button)e.Item.FindControl("smallImage");
                    smallImage.ID = smallImage.ID + singleImage.FileName;
                    smallImage.Attributes.CssStyle.Add("background-image", "Images/QualityPic/" + singleImage.FileName + ".jpg");
                    smallImage.Attributes.Add("onclick", "return smallImageJS_Click(" + singleImage.FileName + ");");
                }
            }
     
        }
    }
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
        CodeBehind="Main.aspx.cs" Inherits="TestSVG.Main" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
     
            var height;
            var width;
     
            function determineWidthAndHeight() {
                if (typeof (window.innerWidth) == 'number') {
                    //Non-IE
                    width = window.innerWidth;
                    height = window.innerHeight;
                }
                else if (document.documentElement &&
                         (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                    //IE 6+ in 'standards compliant mode'
                    width = document.documentElement.clientWidth;
                    height = document.documentElement.clientHeight;
                }
                else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    //IE 4 compatible
                    width = document.body.clientWidth;
                    height = document.body.clientHeight;
                }
            }
     
            function MainPane_OnClientLoaded(splitter, arg) {
                var leftPane = splitter.getPaneById('<%= LeftPane.ClientID %>');
                var mainPane = splitter.getPaneById('<%= MainPane.ClientID %>');
                splitter.set_height((height - 40));
                leftPane.set_height((height - 30));
                mainPane.set_height((height - 30));
            }
     
            function setWidthAndHeightFields() {
     
                var leftWidth = $('#<%=LeftPane.ClientID %>').width();
     
                $('#<%=RadSplitter1.ClientID %>').css('height', (height - 40) + 'px');
     
                $('#<%=LeftPane.ClientID %>').css('height', (height - 30) + 'px');
     
                $('#<%=MainPane.ClientID %>').css('width', (width - leftWidth - 40) + 'px');
                $('#<%=MainPane.ClientID %>')[0].width = (width - leftWidth - 40) + 'px';
                $('#<%=MainPane.ClientID %>').css('height', (height - 30) + 'px');
                $('#<%=MainPane.ClientID %>')[0].height = (height - 30) + 'px';
     
                $('[id*="RadSplitter1"]').each(function () {
                    $(this)[0].style.height = (height - 30) + "px";
                    $(this)[0].height = (height - 30) + "px";
                });
     
                $('[id*="LeftPane"]').each(function () {
                    $(this)[0].style.height = (height - 30) + "px";
                    $(this)[0].height = (height - 30) + "px";
                });
     
                $('[id*="MainPane"]').each(function () {
                    $(this).width = (width - leftWidth - 40) + "px";
                    $(this)[0].style.width = (width - leftWidth - 40) + "px";
                    $(this)[0].width = (width - leftWidth - 40) + "px";
                    $(this).css('width', (width - leftWidth - 40) + 'px');
     
                    $(this).height = (height - 30) + "px";
                    $(this)[0].style.height = (height - 30) + "px";
                    $(this)[0].height = (height - 30) + "px";
                    $(this).css('height', (height - 30) + 'px');
                });
     
            }
     
            function smallImageJS_Click(filename) {
                alert(filename);
                return false;
            }
     
            window.onload = function () {
                determineWidthAndHeight();
                setWidthAndHeightFields();
            }
     
            window.onresize = function (event) {
                determineWidthAndHeight();
                setWidthAndHeightFields();
            }
     
        </script>
     
        <style>
            v\:*
            {
                behavior: url(#default#VML);
            }
            body
            {
                overflow: hidden;
            }
            .wrapper
            {
            }
            .wrapper ul.ULwrapper
            {
                list-style-type: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .wrapper li.LIwrapper
            {
                display: inline-block !important;
                float: left !important;
                text-align: left !important;
                margin: 10px;
                border: 1px solid #fff !important;
            }
             
            .wrapper .ULwrapper .LIwrapper .LIwrapperSImage
            {
                width: 130px;
                height: 130px;
                background-position: center;
                background-repeat: no-repeat;
            }
        </style>
        <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    </asp:Content>
    <asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" Skin="Office2010Blue" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All"
            EnableRoundedCorners="false" />
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"
            OnClientLoaded="MainPane_OnClientLoaded">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                <telerik:RadSlidingZone enableclientdebug="false" ID="SlidingZone1" runat="server"
                    Width="22">
                    <telerik:RadSlidingPane ID="Radslidingpane1" Title="Qualities" runat="server" Width="150"
                        IconUrl="Images/Sliding/Toolbox.gif" TabView="TextOnly" Scrolling="Y">
                        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="100%" Width="100%"
                            ExpandMode="FullExpandedItem">
                            <Items>
                                <telerik:RadPanelItem Text="Carry Overs">
                                    <ContentTemplate>
                                        <asp:Panel ID="wrapperDiV" runat="server" CssClass="wrapper">
                                            <ul class="ULwrapper">
                                                <asp:Repeater runat="server" ID="imageRepeater" OnItemDataBound="imageRepeater_ItemDataBound">
                                                    <ItemTemplate>
                                                        <li class="LIwrapper">
                                                            <asp:Button ID="smallImage" CssClass="LIwrapperSImage" runat="server" />
                                                            <div style="height: 70px; width: 130px;">
                                                                <hr style="width: 30px; margin-left: 10px; text-align: left;" />
                                                                <asp:Label ID="lblImageName" runat="server" Style="margin-left: 10px; display: block;
                                                                    font-size: 11pt;"> <%# DataBinder.Eval(Container.DataItem, "FileName").ToString()%> </asp:Label></div>
                                                        </li>
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </ul>
                                        </asp:Panel>
                                    </ContentTemplate>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem Text="Others">
                                    <Items>
                                        <telerik:RadPanelItem Text="Test1" />
                                        <telerik:RadPanelItem Text="Test2" />
                                        <telerik:RadPanelItem Text="Test3" />
                                    </Items>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelBar>
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pins" runat="server" Width="150"
                        IconUrl="Images/Sliding/Toolbox.gif" TabView="TextOnly" Scrolling="Y">
                        This pane has the default setting of <b>TabView</b> property.<br />
                        It displays both the icon and the title of the pane.
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar1" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="MainPane" runat="server" Scrolling="Both" Width="100%">
                <div id="squaredPaper" style="zoom: 100%" />
            </telerik:RadPane>
        </telerik:RadSplitter><br />
    </asp:Content>
    <%@ Master Language="C#" AutoEventWireup="false" CodeBehind="Site.master.cs" Inherits="TestSVG.Site" %>
     
    <%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
     
    <HTML XMLNS:V="urn:schemas-microsoft-com:vml">
    <HEAD runat="server">
     
        <TITLE>Vector Graphic</TITLE>
     
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
         
        <script type="text/javascript">
            function noBack() { window.history.forward(); }
            noBack();
            window.onload = noBack;
            window.onpageshow = function (evt) { if (evt.persisted) noBack(); }
            window.onunload = function () { void (0); }
        </script>
     
        <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
     
    </head>
    <body>
     
        <form runat="server">
            <div id="header">
             
            </div>
            <div id="main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <div id="footer">
             
            </div>
        </form>
     
    </body>
    </HTML>

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Jun 2013 Link to this post

    Hello Ryan,

    I have just answered the question that you posted in this forum post. Please take a look at it for further reference.

    Regards,
    Kate
    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. ryan86pika
    ryan86pika avatar
    5 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Hi Kate,

    In the previous post I was not so clear but in this.. everythink it works!!
    I need help just to implement the drag&drop between the repeater in the left panel and the main pane..

    Have I use javascript or can I use telerik? How?

    Thanks,
    Regards,

    Ryan
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Jun 2013 Link to this post

    Hello Ryan,

    Unfortunately the RadSplitter control does not currently support the Drag and Drop functionality that you are trying to accomplish. I can suggest however, that you try using the RadDock control and check if this is helpful.

    Regards,
    Kate
    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.
  6. ryan86pika
    ryan86pika avatar
    5 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Hi Kate,

    RadDock and RadSplitter doesn't have the same functionality.. right?
    So how can I use it? I have to put inside of the radpane?

    Thanks,
    Regards,

    Ryan
  7. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 27 Jun 2013 Link to this post

    Hello Ryan,

    As per you assumption the RadDock and RadSplitter do not have one and the same functionality and  dragging from a SlidingPane to another RadPane is not an out-of-the-box provided functionality.  Nevertheless, as my colleague Kate suggested in her previous reply, you can place a RadDockZone control inside a Sliding Pane in order to be able to drag the images (placed into dynamically created RadDocks) into another RadDockZone, placed inside your content RadPane.

    For convenience, I am attaching a very simplified project demonstrating the above described approach. Feel free to extend it in order to fit your scenario best.

    I hope you will find this solution helpful.

    Kind regards,
    Veselina Raykova
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017