+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Sitefinity MVC and Kendo UI

Sitefinity MVC and Kendo UI

10 posts, 0 answered
  1. Andrey
    Andrey avatar
    10 posts
    Registered:
    18 Jul 2012
    18 Jul 2012
    Link to this post
    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.
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 Jul 2012
    Link to this post
    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" />

  3. Andrey
    Andrey avatar
    10 posts
    Registered:
    18 Jul 2012
    18 Jul 2012
    Link to this post
    It's works for Web Forms, but doesn't works for MVC.
  4. Andrey
    Andrey avatar
    10 posts
    Registered:
    18 Jul 2012
    18 Jul 2012
    Link to this post
    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?
  5. Andrey
    Andrey avatar
    10 posts
    Registered:
    18 Jul 2012
    19 Jul 2012
    Link to this post
    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>
    

  6. Andrey
    Andrey avatar
    10 posts
    Registered:
    18 Jul 2012
    19 Jul 2012
    Link to this post
    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
  7. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    23 Jul 2012
    Link to this post
    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
  8. Basem
    Basem avatar
    131 posts
    Registered:
    22 Dec 2010
    14 Apr 2014
    Link to this post

    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>

  9. Basem
    Basem avatar
    131 posts
    Registered:
    22 Dec 2010
    16 Apr 2014 in reply to Basem
    Link to this post

    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


  10. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    30 Sep 2016
    17 Apr 2014
    Link to this post
    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
     
10 posts, 0 answered