Questions on UI for ASP.NET AJAX Forum

4 answers

246 views

Styling TabStrip

Hello Telerik Team,

I would be grateful if someone can provide with a working CSS and images for the attached requirement.
I have tried a lot using Stylebuilder but unable to Customize the Outlook.
I have tried the below css, taking this as a reference.
One more issue is apart from my Custom.css, I see that RadTabStrip (as located in WebResource.axd) conflicts with the one I built.(As Observed by hitting F12 - developer tools in IE)

.RadTabStrip_Curve

{

padding-bottom:0px;

padding-left:0px;

padding-right:0px;

background-color:LightBlue;

}

.RadTabStrip_Curve .rtsLI,

.RadTabStrip_Curve .rtsLink

{

color: #000;

font: 12px/26px sans-serif;

padding:0px 0px 0px 0px;

margin-right:1px;

}

/*div.RadTabStrip_Curve .rtsLI

{

margin-right: 0px;

}*/

.RadTabStrip_Curve .rtsLink:hover

{

color: #4477dd;

}

.RadTabStrip_Curve .rtsSelected:hover

{

color: #000;

}

.RadTabStripLeft_RadTabStrip_Outlook .rtsSeparator,

.RadTabStripRight_RadTabStrip_Outlook .rtsSeparator

{

background: lightblue;

}

/* <disabled tabs> */

.RadTabStrip_Curve .rtsLevel .rtsDisabled,

.RadTabStrip_Curve .rtsLevel .rtsDisabled:hover

{

color: #aaa;

}

.RadTabStrip_Curve .rtsDisabled,

.RadTabStripLeft_Curve .rtsDisabled,

.RadTabStripRight_Curve .rtsDisabled,

.RadTabStripBottom_Curve .rtsDisabled,

.RadTabStrip_Curve_disabled .rtsDisabled

{

color: #bcb;

cursor: default;

}

/* </disabled tabs> */

/* <scrolling arrows> */

.RadTabStrip_Curve .rtsNextArrow,

.RadTabStrip_Curve .rtsPrevArrow,

.RadTabStrip_Curve .rtsPrevArrowDisabled,

.RadTabStrip_Curve .rtsNextArrowDisabled

{

background-image: url('Images/TabStripHStates.png');

}

/*.RadTabStrip_Curve .rtsIn

{

font: 12px/20px arial,sans-serif;

padding: 0 5px 5px;

}*/

/* </scrolling arrows> */

/* <tab backgrounds> */

.RadTabStripTop_RadTabStrip_Outlook .rtsLevel { background-color: transparent; }

/*.RadTabStripTop_RadTabStrip_Outlook .rtsLevel .rtsLink,

.RadTabStripTop_RadTabStrip_Outlook .rtsLevel .rtsOut,

.RadTabStripBottom_RadTabStrip_Outlook .rtsLevel .rtsLink,

.RadTabStripBottom_RadTabStrip_Outlook .rtsLevel .rtsOut,

.RadTabStripTop_RadTabStrip_Outlook_Baseline .rtsLevel,

.RadTabStripBottom_RadTabStrip_Outlook_Baseline .rtsLevel { background-image:url('TabStrip/tab_Inner_Unselected.png'); }*/

.RadTabStripLeft_RadTabStrip_Outlook .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLink {/* background-image: url('Images/tab_Inner_Unselected.png');*/ }

.RadTabStripLeft_RadTabStrip_Outlook .rtsLast .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLast .rtsLink

{

border-bottom: 1px solid;

}

.RadTabStripRight_RadTabStrip_Outlook .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLI .rtsDisabled:hover { background-position: 100% 0; }

.RadTabStripRight_RadTabStrip_Outlook .rtsLink:hover { background-position: 100% -200px; }

.RadTabStripRight_RadTabStrip_Outlook .rtsSelected,

.RadTabStripRight_RadTabStrip_Outlook .rtsSelected:hover {background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -400px;}

/* </tab backgrounds> */

/* <background positioning: tabs with hovers> */

/* <orientation: top> */

.RadTabStripTop_RadTabStrip_Outlook .rtsLink { background-position: 0 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsOut { background-position: 100% 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsLink:hover { background-position: 0 -52px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsLink:hover .rtsOut { background-position: 100% -52px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected,

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected:hover { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -26px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected .rtsOut,

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected:hover .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -26px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsDisabled:hover { background-position: 0 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsDisabled:hover .rtsOut { background-position: 100% 0; }

.RadTabStripTop_RadTabStrip_Outlook_Baseline .rtsLevel { background-position: 0 100%; background-repeat: repeat-x; }

/* </orientation: top> */

/* <orientation: bottom> */

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink { background-position: 0 -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsOut { background-position: 100% -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink:hover { background-position: 0 -130px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink:hover .rtsOut { background-position: 100% -130px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected,

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected:hover { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -156px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected .rtsOut,

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected:hover .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -156px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsDisabled:hover { background-position: 0 -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsDisabled:hover .rtsOut { background-position: 100% -182px; }

.RadTabStripBottom_RadTabStrip_Outlook_Baseline .rtsLevel { background-position: 0 -599px; background-repeat: repeat-x; }

/* </orientation: bottom> */

/* <orientation: right> */

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left; }

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLink:hover { background-position: 100% -200px; }

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsSelected,

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsSelected:hover { background: url('TabStrip/TabStripHStates.gif') no-repeat 0 -400px; }

/* </orientation: right> */

/* </background positioning: tabs with hovers> */

/* <simplistic sub-item styles> */

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 { background: #fff; }

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsSelected,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsSelected,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsSelected

{

text-decoration: underline;

}

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsIn,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsIn,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsIn

{

background: none;

}

/* </simplistic sub-item styles> */

.RadTabStrip_Curve .rtsLink {

padding-left:0px;

}

.RadTabStrip_Curve .rtsLink .rtsOut {

BACKGROUND-IMAGE: url('TabStrip/tab_Inner_Unselected.png')

}

.RadTabStrip_Curve .rtsLink .rtsIn {

background-image: url('TabStrip/tab_Inner_Unselected.png');

}

DIV.RadTabStrip_Curve .rtsLink:hover .rtsOut {

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

DIV.RadTabStrip_Curve .rtsLink:hover .rtsIn {

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

/*.RadTabStrip_Curve .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; }

.RadTabStrip_Curve .rtsSelected .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 100% -72px; }

.RadTabStrip_Curve .rtsFirst .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -180px; }

.RadTabStrip_Curve .rtsLast .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 100% -180px; }

.RadTabStrip_Curve .rtsLast .rtsSelected .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; }*/

DIV.RadTabStrip_Curve .rtsSelected .rtsIn {

/*BACKGROUND-COLOR: #BBBBBB;*/

background: url('TabStrip/TabStripHStates.gif') repeat 0 -72px;

}

DIV.RadTabStrip_Curve .rtsSelected .rtsOut

{

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

Any help in providing the working css n images to this attached file would be greatly appreciated.

Thanks,

TabStrip

answered on 08 Jun 2011

2 answers

175 views

error rendering image in tabstrip

http://stylebuilder.telerik.com/Advanced.aspx?suite=aspnet-ajax&control=TabStrip&skin=V2RadTabTest#

using StyleBuilder i had created TabStrip Css, i didnt modified any styles in CSS, just changed the image name.
Created skin and downloaded as it is. After downloading the skin i just copied the .png image and modified with desided colors.

i had attached both images [download default image + modified image + error image with both tab combination]
I am rendering the tabs dynamically on dropdownlist change event

when i click on create tab, 1st tab creates properly
when i create 2nd tab its adding wrong image to 1st image left side,
when i select a tab image created at last has showing wrong image.

check the error_tabstripimage.png
and let me know the issue.

TabStrip

answered on 08 Jun 2011

0 answers

89 views

Add Mode Problem For RadListBox

Hello every one ,

When i click the add new button radlist box come empty ,
But here come with last record of radgrid
In Modify i assign the value for RadGrid1_ItemCreated,
That's assign in add mode also

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditFormItem && e.Item.IsInEditMode)

{

GridEditFormItem item = (GridEditFormItem)e.Item;

RadListBox listbox = (RadListBox)item.FindControl("RadListBoxDestinationGroup");

RadListBox listbox1 = (RadListBox)item.FindControl("RadListBoxSourceGroup");

RadComboBox sortcolumn = (RadComboBox)item.FindControl("ComboBox_SortColumn");

RadComboBox groupcolumn = (RadComboBox)item.FindControl("ComboBox_GroupByColumn");

listbox.DataSource = DbClient.GetList<ListField>("LayoutId =" + LayoutId);

listbox.DataValueField = "FieldName";

listbox.DataTextField = "FieldName";

sortcolumn.DataSource = DbClient.GetList<ListField>("LayoutId =" + LayoutId);

sortcolumn.DataValueField = "FieldName";

sortcolumn.DataTextField = "FieldName";

groupcolumn.DataSource = DbClient.GetList<ListField>("LayoutId =" + LayoutId);

groupcolumn.DataValueField = "FieldName";

groupcolumn.DataTextField = "FieldName";

}

Thanks,
Mohamed.

ListBox

asked on 08 Jun 2011

4 answers

86 views

Highlight destination row on Drag/Drop

Is there a way to highlight the destination row on the drag/drop (mouseover)?

Right now it's a dotted line and the users feel that that's not enough of a visual cue.

Thanks

Grid

answered on 08 Jun 2011

1 answer

114 views

RadScheduler AutoPostBack not supported

when I do my schedulername.AutoPostBack it seems AutoPostBack is not supported.
How do we do AutoPostBack with the RadScheduler. I do not see such a property.

Thank you.

Scheduler

answered on 07 Jun 2011

8 answers

185 views

OnPopupClosing does not fire when clicked outside popup

When i use the OnPopupClosing event handler it fires only when some date is selected in the popup, but not when popup is closed due to the clicking outside it. How can i process the popup closing if no date was selected in it?

Calendar

answered on 07 Jun 2011

1 answer

108 views

FileExplorer CreateNewDirectory problem

Hi all.

I am having some issues with CreateNewDirectory. I wanted to create a Web Gallery using FileExplorer based on your demo. Because of using possible big files (4,5 MB and maybe more) I created a thumb directory and when uploading images I resize as well and them upload (resized and original) into 2 different directories (Images and ImagesThumb). In FileExplorer I show only the thumb directory. The DeletePath is defined to both Images and ImagesThumb directory. The images load OK and the memory usage is good. Deleting 2 directories at once or 2 files at once works great. But i have difficulties to create 2 directories.

The ASPX:

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Width="1000px" Height="690px"

Skin="Black" EnableOpenFile="True" OnClientFolderChange="OnClientFolderChange"

OnClientCreateNewFolder="onCreateNewDir" OnClientLoad="OnFileExplorerLoad">

</telerik:RadFileExplorer>

CS:

string[] paths = new string[] { "~/ImagesThumb/", "~/Images/" };

RadFileExplorer1.Configuration.ViewPaths = new string[] { "~/ImagesThumb/" };

RadFileExplorer1.Configuration.UploadPaths = paths;

RadFileExplorer1.Configuration.DeletePaths = paths;

I have created the OnClientCreateNewFolder:

function onCreateNewDir(sender, eventArgs) {

var oExplorer = getRadFileExplorer1();

var dirPath = oExplorer.get_currentDirectory().replace('ImagesThumb', 'Images');

oExplorer.remove_createNewFolder(onCreateNewDir);

oExplorer.createNewDirectory(dirPath,eventAgs.get_newPath());

oExplorer.add_createNewFolder(onCreateNewDir);

With no luck at all, in ImagesThumb it creates desired folder but in Images not. Then I tried create a second
FileExplorer to handle the Image folder for me like this:

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer2"Skin="Black" style="display:none">

<Configutation DeletePaths="~/Images" UploadPaths="~/Images" />

</telerik:RadFileExplorer>

OnCreate event:

function onCreateNewDir(sender, eventArgs) {

var oExplorer = getRadFileExplorer1();

var dirPath = oExplorer.get_currentDirectory().replace('ImagesThumb', 'Images');

getRadFileExplorer2().createNewDirectory(dirPath,eventAgs.get_newPath());

}

Doesnt work either until the createNewDirectory has only 1 parameter and propmts a popup window to provide a name
but that is not desired. I dont want to use ActiveX object to create a directory.

Am I doing something wrong?? Is there a better way to achieve what I need???

Thx

FileExplorer

answered on 07 Jun 2011

5 answers

111 views

accessing radgrid from webpart

I'm trying to access data from a radgrid from a sharepoint webpart on the same page as the radgrid. When I execute the GridDataItem Item line, it throws a null reference exception and says "Object is not set to instance of an object". Why isn't it finding the control?

using (SPSite external = new SPSite(SPContext.Current.Web.Url))

{

using(SPWeb web = external.OpenWeb())

{

RadGrid ProjectGrid = (RadGrid)FindControl("rgViewPDS");

GridDataItem item = ProjectGrid.Items[0];

this.PP = item["PP"].Text;

this.PED = item["PED"].Text;

}

});

Sharepoint Integration

answered on 07 Jun 2011

1 answer

104 views

Adding context menu to a dynamically created Rad FileExplorer

Hi All,

I have created a file explorer dynamically and I am trying to customise the default context menu provided in it.
I would like to hide the default menu options and add my own set of context menu items to it and add functionality on click on each item.

Could any one please tell me how to achieve this dynamically.

Many thanks in advance.

Regards
Rajeev

FileExplorer

answered on 07 Jun 2011

1 answer

107 views

how to set the height of the upload container while clicking on Upload button

Hi

How to decrese the height of the uploadcontainer if i click on upload button in RAD File explorer.

My scenario is if i click on upload button i am hiding the some block in upload container window. i.e

-------------------------------------------------------------------------------------------------------------------

Max file size allowed:

25.00 MB

File extensions allowed:

*.au, *.css, *.doc, *.docm, *.docx, *.dotm, *.dotx, *.flv, *.gif, *.htm, *.html, *.jar, *.jpe, *.jpeg, *.jpg, *.js, *.mov, *.mp2, *.mp3, *.mpa, *.mpv2, *.pdf, *.png, *.potm, *.potx, *.ppam, *.ppsm, *.ppsx, *.ppt, *.pptx, *.pptm, *.pptx, *.swf, *.txt, *.vsd, *.vss, *.xhtml, *.xlam, *.xls, *.xlsx, *.xlsb, *.xlsm, *.xlsx, *.xltm, *.xltx, *.xsd, *.zip

-------------------------------------------------------------------------------------------------------------------
But after hiding of this blcok desgin prob is coming.there is big space between upload button and upload window.

Thats the reason i want to descrese height of that upload container.Please find the attached image for prob.
I have done like this.but its nt effecting.

var objUploadWidnow = "RadWindowWrapper_"+ objUploadContainer +"_windowManagerfileExplorerUpload";

var stylePanel = $telerik.$(".RadWindow RadWindow_Default rwNormalWindow rwTransparentWindow", objUploadWidnow);

alert(stylePanel);

stylePanel.css(

"height", "200px");

please correct me where i have done wrng.Please reply me as soon as posible.

Thanks
Sandhya

FileExplorer