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

[Solved] How do i call seperate stylesheets to style the telerik tabstrip and the telerik Panel Bar on same page?

0 Answers 19 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Darryl
Top achievements
Rank 1
Darryl asked on 21 Oct 2011, 04:58 PM
I have implemented the Telerik TabStrip and have chosen the "black" style.   Inside the contents of one of the tabs i have embedded the Telerik Panel Bar Template.  It just picks up the style used in the TabStrip which is black.  How can i style the PanelBar? Can i call in a seperate stylsheet to use for it? Any help would be great.

Here's the code....
Thanks

@model Nop.Web.Models.Catalog.ProductModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Framework.UI;
@using Nop.Web.Models.Catalog;
@using Telerik.Web.Mvc.UI;
@using Telerik.Web.Mvc;
@{
    Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
 
    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);
     
    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }
}
 
@{
    //errors
    var errors = new List<string>();
    foreach (var modelState in ViewData.ModelState.Values)
    {
        foreach (var error in modelState.Errors)
        {
            errors.Add(error.ErrorMessage);
        }
    }
}
@if (errors.Count > 0)
{
    var addToCartWarningsSb = new System.Text.StringBuilder();
    for (int i = 0; i < errors.Count; i++)
    {
        addToCartWarningsSb.Append(errors[i]);
        if (i != errors.Count - 1)
        {
            addToCartWarningsSb.Append("\\n");
        }
    }
 
    //display errors  
    <script type="text/javascript">
        $(document).ready(function () {
            alert('@addToCartWarningsSb.ToString()');
        });
    </script>
}
<!--product breadcrumb-->
@Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })
<div class="clear">
</div>
<div class="product-details-page">
    @using (Html.BeginRouteForm("Product", new { productId = Model.Id, SeName = Model.SeName }, FormMethod.Post))
    {
        <div class="product-essential">
            <div class="product-details-info">
                <!--product pictures-->
                @Html.Partial("_ProductDetailsPictures", Model)
                <div class="overview">
                    <h1 class="productname">
                        @Model.Name
                    </h1>
                    <br />
                    <div class="shortdescription">
                        @Html.Raw(Model.ShortDescription)
                    </div>
                    <div class="clear">
                    </div>
                    <!--product manufactures-->
                    @Html.Action("ProductManufacturers", "Catalog", new { productId = Model.Id })
                    <div class="clear">
                    </div>
                    <!--product reviews-->
                    @Html.Action("ProductReviewOverview", "Catalog", new { productId = Model.Id })
                    <div class="clear">
                    </div>
                    @if (errors.Count > 0)
                    {
                        //display errors  
                        <span class="error">
                            @for (int i = 0; i < errors.Count; i++)
                            {
                                @errors[i]
                                if (i != errors.Count - 1)
                                {
                                <text><br /></text>
                                }
                            }
                        </span>
                        <div class="clear">
                        </div>
                    }
                    <br />
                    @Html.Action("ProductEmailAFriendButton", "Catalog", new { productId = Model.Id })
                    <text> </text>
                    @Html.Action("CompareProductsButton", "Catalog", new { productId = Model.Id })
                    <div class="clear">
                    </div>
                    @Html.Action("ShareButton", "Catalog")
                </div>
                <div class="fulldescription">
                    @Html.Raw(Model.FullDescription)
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <div class="product-collateral">
            <!--product variants-->
            <div class="product-variant-list">
                @foreach (var variant in Model.ProductVariantModels)
                {
                    var dataDictVariant = new ViewDataDictionary();
                    dataDictVariant.TemplateInfo.HtmlFieldPrefix = string.Format("variant_{0}", variant.Id);
                    @Html.Partial("_ProductVariantLine", variant, dataDictVariant)
                }
            </div>
            <div class="clear">
            </div>
            <div>
                @Html.Action("ProductSpecifications", "Catalog", new { productId = Model.Id })
            </div>
            <div class="clear">
            </div>
            <div>
                @Html.Action("ProductTags", "Catalog", new { productId = Model.Id })
            </div>
            <div class="clear">
            </div>
            <div>
                @Html.Action("ProductsAlsoPurchased", "Catalog", new { productId = Model.Id })
            </div>
            <div class="clear">
            </div>
            <div>
                @Html.Action("RelatedProducts", "Catalog", new { productId = Model.Id })
            </div>
            <!-- Start -->
            @{ Html.Telerik().TabStrip()
                    .Name("TabStrip")
                    .Items(tabstrip =>
                    {
                        tabstrip.Add()
                            .Text("ASP.NET MVC")                           
                            .Content(@<text>
                                <ul>
                                    <li>Pure ASP.NET MVC components</li>
                                    <li>Completely Open Source</li>
                                    <li>Exceptional Performance</li>
                                    <li>Based on jQuery</li>
                                    <li>Search Engine Optimized</li>
                                    <li>Cross-browser support</li>
                                </ul>
                            </text>);
                        tabstrip.Add()
                            .Text("Technology Terms")                           
                            .Content(() =>
                                {                               
                                    Html.Telerik().PanelBar()
                                        .Name("PanelBar")
                                        .Items(parent => {
                                            parent.Add()
                                                .Text("M2 Max Flow and Max Flex Technology")
                                                .Content(@<text>
                                                    <div class="tech-box clearfix">
                                                        <img src="/Themes/DarkOrange/Content/images/m2_wire.jpg" width="288" height="288" class="tech-img" />
                                                        <p class="tech-title">M2 Max Flow and Max Flex Technology</p>
                                                        <p class="tech-subtitle">Function:</p>
                                                        <p>Max Flow power and speaker wires are designed to deliver the maximum current flow to get the most power and efficiency possible from your amplifier. Max Flex power and speaker wire features a high flexibility translucent PVC jacket that is rated to resist oil and gas as well as exposure to temperatures up to 105ºC.</p>                                                       
                                                        <p class="tech-subtitle">Benefit:</p>
                                                        <p>You get the best possible performance and protection for your system.</p>
                                                    </div>
                                                    </text>)
                                                .Expanded(true);
                                            parent.Add()
                                                .Text("Grip Tip")
                                                .Content(@<text>
                                                    <div class="tech-box clearfix">
                                                        <img src="/Themes/DarkOrange/Content/images/grip_Tip.jpg" width="288" height="288" class="tech-img" />
                                                        <p class="tech-title">Grip Tip</p>
                                                        <p class="tech-subtitle">Function:</p>
                                                        <p>Grip Tip set screws ensure a secure, reliable connection that will not loosen over time</p>                                                       
                                                        <p class="tech-subtitle">Benefit:</p>
                                                        <p>This maximizes system performance and longevity.</p>
                                                    </div>
                                                </text>);                      
                                        })
                                        .Render();
                                });
                        tabstrip.Add()
                            .Text("ASP.NET AJAX")                           
                            .Content(@<text>
                                <ul>
                                    <li>Built on top of Microsoft ASP.NET AJAX framework</li>
                                    <li>Rich client-side capabilities; nearly identical client-side and server-side APIs</li>
                                    <li>.NET 3.5 built-in support for LINQ, EntityDataSource, ADO.NET DataServices, WCF, etc</li>
                                    <li>Performance optimization helper controls and HTTP compression</li>
                                    <li>SharePoint and DotNetNuke Integration; ASP.NET MVC-ready</li>
                                    <li>Wide cross-browser compatible and XHTML compliant</li>
                                </ul>
                            </text>);
                        tabstrip.Add()
                            .Text("OpenAccess ORM")                           
                            .Content(@<text>
                                <ul>
                                    <li>Model First and Schema First approaches</li>
                                    <li>Stored Procedures for Multiple Databases</li>
                                    <li>Views for Multiple Databases</li>
                                    <li>Generic Metadata Access and artificial fields API in the runtime</li>
                                    <li>Support for Ado.Net Data Services and WCF</li>
                                    <li>Support for LINQ, OQL, and SQL Languages</li>
                                </ul>
                            </text>);
                        tabstrip.Add()
                            .Text("Reporting")                           
                            .Content(@<text>
                                <ul>
                                    <li>Excellent data presentation and analysis: Crosstabs, Charts, Tables, Lists</li>
                                    <li>SubReports, Barcodes, Images, Shapes, and more</li>
                                    <li>Revolutionary WYSIWYG design surface in Visual Studio</li>
                                    <li>Easy conditional formatting, sorting, filtering, grouping</li>
                                    <li>Powerful styling, data binging and data processing models</li>
                                    <li>Significantly reduced development time through wizards and builders</li>
                                </ul>
                            </text>);
                        tabstrip.Add()
                            .Text("Sitefinity ASP.NET CMS")                           
                            .Content(@<text>
                                <ul>
                                    <li>Multi-lingual Content Integration</li>
                                    <li>Workflow Engine</li>
                                    <li>Document versioning</li>
                                    <li>Permissions</li>
                                    <li>Interface Localization</li>
                                    <li>Wide cross-browser compatible and XHTML compliant</li>
                                </ul>
                            </text>);
                    })
                    .SelectedIndex(0)
                    .Render();
            }           
            <!--End-->           
            @MvcHtmlString.Create(HttpUtility.HtmlDecode(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("2011.2.712/telerik.common.css").Add("../Themes/DarkOrange/Content/telerik.black.min.css").Add("../Themes/DarkOrange/Content/tech-panels.css")).ToHtmlString()))
            @MvcHtmlString.Create(HttpUtility.HtmlDecode(Html.Telerik().ScriptRegistrar().jQuery(false).ToHtmlString()))
        </div>
    }
</div>
Tags
General Discussions
Asked by
Darryl
Top achievements
Rank 1
Share this question
or