Sitefinity MVC and Kendo UI - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Sitefinity MVC and Kendo UI

  • Sitefinity MVC and Kendo UI
  • Hi Everyone.
    New release of sitefinity supports MVC. It's amazing!
    How I can include kendo ui to View? As I know sitefinity contains buildin version of kendo and I think I should use this version for prevent conflicts.
  • Sadly they did not add it to the JavaScriptLibrary enum (finger pointing at Georgi) :p  Which is wierd because jQueryFancyBox is a first-class citizen there, but not Kendo?

    If you use JustDecompile they at least now removed the VERSION # on the embedded one (v2012.1.519)
    Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.all.min.js

    You should be able to use the resourcelinks control to add that in safely

    So the child of resourcelinks would be something like
    <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.all.min.js" Static="true" />

  • It's works for Web Forms, but doesn't works for MVC.
  • I have not full solution. Maybe somebody can help me.
    I just crete controller and register this controller as widget. 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Reflection;
    using System.Web;
    using System.Web.Mvc;
    using Telerik.Sitefinity.Mvc;
     
    namespace SitefinityWebApp.Mvc.Controllers
        [ControllerToolboxItem(Name = "Helper", Title = "Helper", SectionName = "MVC")]
        public class HelperController : Controller
        
            public FileStreamResult ContentFile(string id)
            
                var assembly = Assembly.GetAssembly(typeof(Telerik.Sitefinity.Resources.Reference));
                string resourceName = assembly.GetManifestResourceNames().ToList().FirstOrDefault(f => f.EndsWith(id));
                var resourceStream = assembly.GetManifestResourceStream(resourceName);
                var mimeType = GetMIMEType(id);
                return new FileStreamResult(resourceStream, mimeType);
            
     
            private string GetMIMEType(string fileId)
            
                if (fileId.EndsWith(".js"))
                
                    return "text/javascript";
                
                else if (fileId.EndsWith(".css"))
                
                    return "text/stylesheet";
                
                else if (fileId.EndsWith(".jpg"))
                
                    return "image/jpeg";
                
                return "text";
            
        

    Then I created new page with name "Helper".
    Now I can call method from controller: http://localhost:60876/Helper/ContentFile?id=Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.all.min.js

    This method returns kendo script but with some web form code. Is it possible to remove this code?
  • Now I'm using WCF service for loading Kendo.

    using System.Linq;
    using System.Reflection;
    using System.ServiceModel.Activation;
    using System.ServiceModel.Web;
     
    namespace SitefinityWebApp.Sitefinity.Services.paySMARD
        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
        public class HelperService : IHelperService
        
            public System.IO.Stream ContentFile(string id)
            
                var assembly = Assembly.GetAssembly(typeof(Telerik.Sitefinity.Resources.Reference));
                string resourceName = assembly.GetManifestResourceNames().ToList().FirstOrDefault(f => f.EndsWith(id));
                var resourceStream = assembly.GetManifestResourceStream(resourceName);
                var mimeType = GetMIMEType(id);
                WebOperationContext.Current.OutgoingResponse.ContentType = mimeType;
                return resourceStream;
            
     
            private string GetMIMEType(string fileId)
            
                if (fileId.EndsWith(".js"))
                
                    return "text/javascript";
                
                else if (fileId.EndsWith(".css"))
                
                    return "text/stylesheet";
                
                else if (fileId.EndsWith(".jpg"))
                
                    return "image/jpeg";
                
                return "text";
            
        

    And on page:
    <script type="text/javascript" src="Sitefinity/Services/Content/Helper.svc/ContentFile/kendo.all.min.js"></script>
    

  • Sitefinity contains Kendo UI Complete v2012.1.519.
    Where I can find styles for this version?
    I can download from site only v2012.2.710
  • Hello Andrey,

    Thank you for getting back to us.

    As you properly pointed out. for Sitefinity 5.1 we are using an internal build of Kendo UI Complete - v2012.1.519, which is a little lower than the official Q2 release for kendo UI, but we needed this custom build to accommodate our requirements for extended reports in the Email Campaigns module - a widely requested feature which we addressed in 5.1.
    Regarding style sheets, we are using the Q1 official - Kendo UI Complete v2012.1.514 CSS in the product core, you can use the same version, there should be no problems. Actually you can load it from the Telerik.Sitefinity.Resources.dll as well, it's located in the Scripts->Kendo->styles folder structure.

    Please do not hesitate to let us know if there's anything else we can help you with.

    Kind regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Is there a better way to do this in v7+? Adding scripts and styles to MVC widgets still doesn't seem possible through the API and was hoping for an MVC Helper to do this. Below works for Web Form controls but needed an MVC equivalent:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks ID="resourceLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.web.min.js" Static="true" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="True" />
        <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_default_min.css" Static="True" />
    </sf:ResourceLinks>

  • I found a way around this by assuming the page was a Web Form then added the scripts and stylesheets from there. I created this as an MVC helper and can now do this from any view:

    @using SitefinityWebApp.Mvc.Helpers
     
    @
        Html.AddScriptReference(Telerik.Sitefinity.Modules.Pages.ScriptRef.JQuery);
        Html.AddScriptReference(Telerik.Sitefinity.Modules.Pages.ScriptRef.KendoWeb);
        Html.AddCssResource("Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css");
        Html.AddCssResource("Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_default_min.css");
     Essentially, here is what the helper looks like:

    public static void AddScriptReference(this HtmlHelper html, ScriptRef reference)
        var page = HttpContext.Current.Handler as Page;
        if (page != null)
        
            PageManager.ConfigureScriptManager(page, reference);
        

    I posted more information on the implementation and hope it helps: http://goo.gl/sM3ZE4


  • Hi Basem,

    Thank you for sharing your findings with the community.

    You can also take a look at the following article for more details on this subject.

    Regards,
    Sabrie Nedzhip
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items