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!
19 Answers, 1 is accepted
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.
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!
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.
I'll report back later today when I've had time to test it.
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.
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)
}
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.
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?
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.
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?
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
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.
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>
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'
Is jQuery loaded in the page?
Kind regards,Atanas Korchev
the Telerik team
How?
Where?
I have added this:
Script.Require("jQuery");
<
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
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
I cant see the script loaded more than once?
and everything seems to be loaded in order?