Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Telerik controls in Orchard CMS

• Philip Senechal Master

  Posted on Jul 22, 2011 (permalink)

  I've been trying to get the Telerik MVC controls to work inside Orchard CMS and I'm just about there.
  I have the intellisense working, so it would appear the .dll is registered and running fine. The controls actually render in my view as well.
  What I can't seem to get working are the client side events such as the calendar appearing when clicking on the icon for a date picker. My assumption is that this has to do with the javascript files.
  I cannot us the ScriptRegister function because it causes the site to use JQuery 1.5 instead of 1.6 which Orchard CMS uses by default. So I'm therefore registering the javascript files manually on the page. The files are registered AFTER the controls at the bottom of the page and when viewing the source, I can click on the links to the javascript files and they open up...so the files should be linked properly.
  I don't, however, have any functionality on the controls...I've tried several of them, making sure that I include the proper javascript files as listed here: http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-required-javascript-files.html
  
  Any ideas on what I could be missing or how I can troubleshoot this further? I tried using Firebug to capture any client javascript errors that might be generated, but there are none.
  
  Thanks!

  Reply

• Philip Senechal Master

  Posted on Jul 22, 2011 (permalink)

  I think I figured out what the problem is...the jQuery(document).ready(function(){} isn't being generated.
  
  Is it the Telerik().ScriptRegistrar() that creates the document.ready functions? Is there a way to use ScriptRegistrar() with a different version of JQuery or can I exclude it since Orchard is already including it?
  
  UPDATE
  -------------
  I created a blank Telerik MVC project and copied over all of the settings from the web.config into my Orchard web.config and used the ScriptRegistrar function. I'm still not seeing the document.ready functions being created. Are all of the entries in the web.config necessary, or simply the namespace? I'd rather not clutter up the Orchard web.config if I don't need to.

  Reply

• Alex Gyoshev Alex Gyoshev

  Posted on Jul 25, 2011 (permalink)

  Hello Philip,
  
  Is it the Telerik().ScriptRegistrar() that creates the document.ready functions?
  > Yes, it does render the initialization code of all components, after rendering the required scripts.
  
  Is there a way to use ScriptRegistrar() with a different version of JQuery or can I exclude it since Orchard is already including it?
  > You can exclude the jQuery using the ScriptRegistrar's jQuery(false) method; please note that the jQuery has some compatibility problems between versions, so it's recommended to use the same version as the shipped one. That said, most scenarios work.
  
  Are all of the entries in the web.config necessary, or simply the namespace?
  > If you are using compression or combining, you'll need to register the asset HTTP handler, too.
  
  Greetings,
  Alex Gyoshev
  the Telerik team

  Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  Reply

• Ioan Crisan

  Posted on Jul 27, 2011 (permalink)

  Hi Philipp,
  do the hints from Alex help you? We value the Telerik controls and it would be perfect to have Orchard CMS and Telerik extensions for MVC work together.

  Reply

• Philip Senechal Master

  Posted on Jul 27, 2011 (permalink)

  I'm setting up the environment today to try to test this. I believe the problem was that I was attempting to use combination and compression which requires the asset handler, and even though I added that to the web.config, I just don't think that portion played nicely with Orchard. I'm going to set it up without that option and turn off the JQuery and see what happens.
  I'll report back later today when I've had time to test it.

  Reply

• Philip Senechal Master

  Posted on Jul 27, 2011 (permalink)

  I got everything setup by doing the following:
  
  1. Added reference to Telerik.Web.Mvc in both the Orchard.Web project and my module project
  2. Added the namespace entry to the web.config of both the Orchard.Web project and my module project
  3. Added the Scripts folder from the Telerik MVC install folder to the Orchard.Web project (I'm not worrying about Styles at this point)
  4. Added a @using Telerik.Web.Mvc.UI; at the top of my View
  
  At this point, the intellisense works and I'm able to add Telerik controls to my View
  5. Added the following code to the top of the view
  

  @using (Script.Foot())

  {

      @Html.Telerik().ScriptRegistrar().jQuery(false)

  }

  
  This should render the script tags and the initialization at the bottom of my page
  
  5. Added a simple DatePicker control to the view using the following code
  

  @(Html.Telerik().DatePicker()

      .Name("DatePicker")

      .HtmlAttributes(new { id = "DatePicker_wrapper" })

      .Min(DateTime.Now)

      .ShowButton(true)

      .Value(DateTime.Now)

      )

  
  
  Building everything and viewing the page, I am not seeing any scripts being registered or any objects initialized, however the code for the control itself is being generated...
  

  <div class="t-widget t-datepicker" id="DatePicker_wrapper">

      <div class="t-picker-wrap">

          <input class="t-input" id="DatePicker" name="DatePicker" type="text" value="7/27/2011" />

          <span class="t-select">

              <span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span>

          </span>

      </div>

  </div>

  
  
  If I remove the .jQuery(false) from the ScriptRegistrar() command, it will add the jQuery script to the bottom of the page, but still nothing for the DatePicker control or any initialization.
  
  So it would appear that the issue is with the ScriptRegistrar() command within Orchard.
  
  If I change the ScriptRegistrar() to:
  

  @Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Add("telerik.common.min.js").Add("telerik.calendar.min.js").Add("telerik.datepicker.min.js"))

  
  then the script tags are added, but the control is still not initialized with a $(document).ready(function (){})
  
  So...that is where I stand right now. I could try to hand-code the $(document).ready(function () {}) section, but we're talking about a lot of work creating these controls in a separate project, rendering, viewing the source, and then copying the code over to the Orchard project. I have a thread going on the Orchard forums as well. I'll post over there to see if they have any ideas.

  Reply

• Philip Senechal Master

  Posted on Jul 27, 2011 (permalink)

  Alright...I got it working.
  
  You cannot add the @Html.Telerik().ScriptRegistrar().jQuery(false) tag to your View. It has to be added to the layout.cshtml page in your theme. I'm not sure why adding it a level higher works, but Bertrand over at Orchard mentioned something about two script managers on the same page causing a problem which is what prompted me to try it in my theme instead. So in the layout.cshtml file of your theme, add the following to the very top
  
  

  @using (Script.Foot())

  {

      @Html.Telerik().ScriptRegistrar().jQuery(false)

  }

  The Visual Studio designer will complain about there not being a definition for Telerik..just ignore it.
  
  Now...if you want to get the themes for your controls working in Orchard, you have to do thinks a bit differently...
  
  1. Copy the telerik.common.min.css and the .css for the theme(s) you want to the Styles folder in your Orchard module
  2. If you haven't already created a ResourceManifest.cs class file in your module, do so now...should look like this
  

  using Orchard.UI.Resources;

   

  namespace InfoSource

  {

      public class ResourceManifest : IResourceManifestProvider

      {

          public void BuildManifests(ResourceManifestBuilder builder)

          {

              builder.Add().DefineStyle("telerikcommon").SetUrl("telerik.common.min.css");

              builder.Add().DefineStyle("telerikdefault").SetUrl("telerik.default.min.css");

          }

      }

  }

  
  3. Create a Content folder in module and under that, create a Images folder.
  4. Copy the Web.config file from your Scripts folder to Content (this allows it to read the files)
  5. Copy the theme folder from the Telerik installation under Content/2011.2.712/themename to your /Content/Images folder...so it should look like this in your module Content/Images/Default/images.png
  6. Modify the .css files for the themes that you copied over in step 1. You need to change the image path. Just do a replace all and replace 'Default/ with '../Content/Images/Default/  (if you're using the Default theme obviously)
  
  Build everything and it should work. Let me know if you have any questions and I'll try to answer them.

  Reply

• Ioan Crisan

  Posted on Jul 29, 2011 (permalink)

  Thank you Philip, I'll give it a try.

  Reply

• yang

  Posted on Nov 4, 2011 (permalink)

  can you be more specific on how you get datetime picker working?
  
  I had   @ using (Script.Foot())
      {
          Html.Telerik().ScriptRegistrar().jQuery(false);
      }
  
  in my layout view.
  
  then  add this in my view which use the datetime picker.
  
  Script.Include("~/Themes/themeName/Scripts/2011.2.712/telerik.common.min.js").AtFoot();
  Script.Include("~/Themes/themeName/Scripts/2011.2.712/telerik.datetimepicker.min.js").AtFoot();
  
  everything works fine except for the datepicker drop down doesn't show up. 
  could you give me some tips.??  how is the source look like when you get all javascripts working for the view?

  Reply

• Philip Senechal Master

  Posted on Nov 4, 2011 (permalink)

  I think the Script.Include and the location may be your issue.
  
  I added the Script folder directly under the Orchard.Web project and then let ScriptRegistrar find them and add them dynamically, so I didn't need to use the Script.Include commands. By doing this, when you compile the project, the Scripts folder is located at the root of the web application.
  
  Also, make sure to include the stylesheets somewhere and change the image links in the stylesheets to point to where you have the images. For my use, I have the Scripts folder under Orchard.Web, but I added the Stylesheets to my custom module in a folder named Styles. The images are in a folder named Content/Images/Default and Content/Images/Vista (the theme I'm using). After adding those images, I had to modify the stylesheets in Styles to point to these directories (i.e. ../Content/Images/Default)
  
  While this works, the only bad thing about the solution is not being able to contain everything in my module and having to add files to the Orchard source as well as modifying the web.config in Orchard.Web.
  
  Let me know if you have any more questions. It was a pain getting it setup the first time, but it works great once it's going.

  Reply

• yang

  Posted on Nov 6, 2011 (permalink)

  hi Philip Senechal,
  
  As you said, I copy the telerik script folder into Orchard.Web project under \Scripts\2011.2.712\
  I also took out the Scripts.Include in my view.
  no luck with displaying my datepicker drop-downs.   
  
  I am pretty sure my styles are setup correctly cos the icons are displaying beside my datepicker.
  I dont' find any scripts code create for my page if I click View source.  
  What is your page source look like for having the datepicker?    Is this Jquery version issue? 
  
  
  

  Reply

• Alex Gyoshev Alex Gyoshev

  Posted on Nov 8, 2011 (permalink)

  Hi Yang,
  
  You can refer to the following StackOverflow answer -- the minimum required code is as follows:
  
  

  @(Html.Telerik().DatePicker().Name("DatePicker"))
  
  @(Html.Telerik().ScriptRegistrar())

  
  Regards,
  Alex Gyoshev
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

• Philip Senechal Master

  Posted on Nov 8, 2011 (permalink)

  Hi Yang...I'll go through the files I modified and what the code looks like.
  
  1. In /Orchard.Web/Web.config - add <add namespace="Telerik.Web.Mvc.UI"/> to the <namespaces> section
  
  2. Copy the TelerikMVC Scripts/2011.2.914 folder to /Orchard.Web
  
  3. Add a reference to Telerik.Web.Mvc to the Orchard.Web project AND your module if you're going to use TelerikMVC controls in your module
  
  4. In your theme's Layout.cshtml file add the following to the top of the file
  

  @using (Script.Foot())

  {

      @Html.Telerik().ScriptRegistrar().jQuery(false)

  }

  
  5. In your module's Styles folder, add the telerik.common.min.css file and the css file for whatever theme you want to use
  
  6. In your module's Content/Images folder, add the image folder for the theme you're using (i.e. Content/Images/Vista/images.png
  
  7. Modify the css files you added in step 5 so that the image path points to the folder(s) you added in step 6
  
  That should do it for the setup. In order to use the controls, here is an example from a View in my module:
  

  @{ Style.Require("telerikcommon"); }

  @{ Style.Require("telerikvista"); }

  @Html.AntiForgeryTokenOrchard()

  <div style="display: inline;">

      @(Html.Telerik().ComboBox()

          .Name("clientList")

          .AutoFill(true)

          .DataBinding(binding => binding.Ajax().Select("_clientLookup", "Reporting"))

          .Filterable(filtering =>

          {

              filtering.FilterMode(AutoCompleteFilterMode.Contains);

          })

          .HighlightFirstMatch(true)

          .HtmlAttributes(new { style = "width: 250px" })

          .ClientEvents(events =>

          {

              events.OnDataBinding("bindToken");

          })

      )

  </div>

  
  This creates a load on demand combo-box using Ajax. When I view the source for this page, I see the following in the HEAD section of my page
  

  <head>

       <meta charset="utf-8" />

       <title>InfoSource</title>
<link href="/Modules/InfoSource/Styles/telerik.common.min.css" rel="stylesheet" type="text/css" />

  <link href="/Modules/InfoSource/Styles/telerik.vista.min.css" rel="stylesheet" type="text/css" />

  <link href="/Themes/InfoSourceTheme/Styles/Site.css" rel="stylesheet" type="text/css" />

   <link href="/Modules/Szmyd.Orchard.Modules.Menu/Styles/superfish.css" rel="stylesheet" type="text/css" />

   <meta content="Orchard" name="generator" />

   <meta content="IE=edge,chrome=1" name="X-UA-Compatible" />

   <link href="/Media/Default/favicon/favicon.png" rel="shortcut icon" type="image/x-icon" />

   <link href="http://fonts.googleapis.com/css?family=Lobster&;subset=latin" rel="stylesheet" type="text/css" />

   <script src="/Modules/Orchard.jQuery/scripts/jquery-1.6.4.js" type="text/javascript"></script>

   <script src="/Modules/Szmyd.Orchard.Modules.Menu/scripts/hoverIntent.js" type="text/javascript"></script>

   <script src="/Modules/Szmyd.Orchard.Modules.Menu/scripts/jquery.bgiframe.min.js" type="text/javascript"></script>

   <script src="/Modules/Szmyd.Orchard.Modules.Menu/scripts/superfish.js" type="text/javascript"></script>

   <script src="/Modules/Szmyd.Orchard.Modules.Menu/scripts/supersubs.js" type="text/javascript"></script>

   <script src="/Core/Shapes/scripts/html5.js" type="text/javascript"></script>

    

  <style type="text/css">

          #menu-15.sf-menu li {
  

              background:     transparent;
  

          }
  

  </style>
  

   
  

      <script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script>

   

  </head>

  
  Note the stylesheets being added as well as Jquery (Orchard takes care of JQuery)
  
  In the BODY of my page, the source for the control looks like this
  

  <script type="text/javascript" src="/Scripts/2011.2.914/telerik.common.min.js"></script>

  <script type="text/javascript" src="/Scripts/2011.2.914/telerik.list.min.js"></script>

  <script type="text/javascript" src="/Scripts/2011.2.914/telerik.combobox.min.js"></script>

  <script type="text/javascript">

  //<![CDATA[

  jQuery(document).ready(function(){

  jQuery('#clientList').tComboBox({onDataBinding:bindToken, ajax:{"selectUrl":"/InfoSource/Reporting/_clientLookup"}, filter:2});});

  //]]>

  </script>

  
  You can see that the scripts are being dynamically added by the Telerik ScriptRegistrar and the corresponding JQuery call to initiate the control is also added.
  
  The only way I could get the ScriptRegistrar to work and add the scripts as well as the JQuery initializer was to do step #4 above. Without adding this line to my theme's layout.cshtml, nothing would work.
  
  Hope this helps.

  Reply

• yang

  Posted on Nov 8, 2011 (permalink)

  I work it out. thank heaps.
  

  Reply

• yang

  Posted on Nov 29, 2011 (permalink)

  hI, I m using a mvc combo box in a customised web form of the Orchard solution.
  
  everything is fine except when I submit the form with validation error, the selectlist become empty.
  
  what's the solution for that?  do you have any ideas? how to let the selectlist filled with data when validation is failed??
  
  here is my form
  
  

  @

  using (Html.BeginForm("Upload", "client", Model))

   {

       <fieldset style="overflow:visible">

       <legend> data Upload</legend>

      <div>@Html.ValidationSummary()</div>

       @{

   

   

          var items = new SelectList( new List<string>{null, "Buy", "Sell"});

           var accounts = new SelectList(new List<String> { null, "KI-ACH", "KI-ARB", "KI-DIS", "KI-        EVT", "KI-EVTIS", "KI-IPO", "KI-TRE" });

   }

   <div class="display-label">Side:</div>

   <div class="display-field">@Html.DropDownListFor(model => model.Side, @items)</div>

   <div class="display-label">dropdownlist:</div>

   <div class="display-field">

   @Html.Telerik().ComboBoxFor(model=>model.Instrument).Name(

   

   

  "MyComboBox").AutoFill(true).SelectedIndex(0).BindTo(new SelectList(ViewData["data"] as IEnumerable<string>)).Filterable(filtering =>{ filtering.FilterMode(AutoCompleteFilterMode.StartsWith); }).HighlightFirstMatch(true).OpenOnFocus(true)

  </div>

    <p><input type="submit" value="Submit" /></p>

  @(Html.Telerik().ScriptRegistrar().jQuery( false).DefaultGroup(group => group.Add("telerik.common.min.js").Add("telerik.calendar.min.js").Add("telerik.datepicker.min.js")))

   @Html.AntiForgeryTokenOrchard()

   

   </fieldset>

   

  Reply

• Michael Intermediate

  Posted on Mar 14, 2012 (permalink)

  Im getting an error trying to use datepicker:
  
  from the view
  

  <script type="text/javascript" src="/OrchardLocal/Scripts/2012.1.214/telerik.common.min.js"></script>

  <script type="text/javascript" src="/OrchardLocal/Scripts/2012.1.214/telerik.calendar.min.js"></script>

  <script type="text/javascript" src="/OrchardLocal/Scripts/2012.1.214/telerik.datepicker.min.js"></script>

  <script type="text/javascript">

  //<![CDATA[

  jQuery(document).ready(function(){

  jQuery('#DatePicker').tDatePicker({format:'d/MM/yyyy', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)});});

  //]]>

  
  The error is:
  Microsoft JScript runtime error:Object doesnt support property or method 'tDatePicker'

  Reply

• Atanas Korchev Atanas Korchev

  Posted on Mar 14, 2012 (permalink)

  Hello,

   Is jQuery loaded in the page?

  Kind regards,
  Atanas Korchev
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

  Reply

• Michael Intermediate

  Posted on Mar 14, 2012 (permalink)

  I cant see it anywhere?
  
  How?
  Where?
  
  I have added this:
  

  Script.Require("jQuery");

  In the page, which produces this:
  

  <script class="shape-tracing-wrapper" shape-id="26" shape-type="Resource" shape-hint=""></script><script src="/OrchardLocal/Modules/Orchard.jQuery/scripts/jquery-1.7.1.js" type="text/javascript"></script>

  <script class="shape-tracing-wrapper" end-of="26"></script>

  
  but teh same error

  Reply

• Atanas Korchev Atanas Korchev

  Posted on Mar 14, 2012 (permalink)

  Hi,

   The jQuery JavaScript file should be included before the Telerik JavaScript files. The list of required JavaScript files can be seen here.

   Also make sure that the jQuery JavaScript file is included only once. This is very important.
  
  Regards,
  Atanas Korchev
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.

  Reply

• Michael Intermediate

  Posted on Mar 14, 2012 (permalink)

  Here's the dynami page:
  
  I cant see the script loaded more than once?
  
  and everything seems to be loaded in order?

  Attached files

  • AddMember.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > General Discussions > Telerik controls in Orchard CMS