This is a migrated thread and some comments may be shown as answers.

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

5 Answers 207 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

ryan86pika asked on 18 Jun 2013, 07:48 AM

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>

5 Answers, 1 is accepted

answered on 27 Jun 2013, 01:32 PM

DragAndDrop.zip

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.