Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
As a developer, I want to create a KendoUI enhanced news widget template to display the news items in a PanelBar mode.
A few months ago, we introduced Sitefinity Thunder. As part of the tool, developers and designers are presented with a really easy and familiar way to tweak the markup of the different Sitefinity widgets . Sitefinity Thunder is a Visual Studio plug-in that enables developers comfortable with the MS Visual Studio 2010 + to easily customize and configure Sitefinity via familiar programming instead of relying solely on hardcore skills.
One of the features that adds extra functionality for designers is the support for all the templates for any dynamic module built with the module builder. First you need to connect your Sitefinity Thunder to the Sitefinity project you want to modify. For all who are new to this tool, here is a short video that demonstrates the process of connecting to Sitefinity through Visual Studio.
The next step: in Sitefinity Explorer you should locate the widget template you want to modify. For the purpose of this demonstration, I will select the “Titles only” template for the News widget and duplicate it.
I will name the new template “PanelBarList” and open it. Below is the markup of the template:
<%@ Control Language="C#" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"> <LayoutTemplate> <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar> <ul class="sfnewsList sfnewsListTitlesOnly"> <asp:PlaceHolder ID="ItemsContainer" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li class="sfnewsListItem"> <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" ToolTipDataField="Description" runat="server" /> <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar> </li> </ItemTemplate></telerik:RadListView><sf:Pager id="pager" runat="server"></sf:Pager>
A quick look at the template and the sample available on the documentation page of the Kendo.UI.PanelBar, gives us the directions of the required HTML mark-up. In essence, we will only need a named <ul> element, with child <li> elements to hold the news items. The existing template already provides us with the needed structure, so we would just need to adapt it to our needs.
Our goal will be to have a structure similar to this one:
<ul id="panel"> <li>NewsItem1_Heading<div>NewsItem1_Content</div></li> <li>NewsItem2_Heading<div>NewsItem2_Content</div></li> ... ... ... <li>NewsItemN_Heading<div>NewsItemN_Content</div></li></ul>
To follow the structure of the Kendo PanelBar, we can actually insert all kind on content within the div container of the widget. Sitefinity Thunder is not just a passive connector to our Sitefinity project. The tool also targets developers productivity by adding utilities like IntelliSense support for content properties and CSS classes. Using the <%#Eval(“ statement, we receive instant access to all static and dynamic properties of the corresponding content type (in our case NewsItem)
Then we will just need to call the “kendoPanelBar” method on the <ul> element, so let’s do it.
Using standard html declarations, I can provide references to the resources I need. In my case I will reference CDN located resources, but you can reference local resources as well. Since I already have jquery n my parent template, I will omit this.
With all that being said, it is time to just save the ready template and upload it to the live website. The latter task will be automatically accomplished by Sitefinity Thunder, so for us is just a matter of applying the new template to any news widget and enjoy the results. Pretty cool, isn’t it?
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.