Telerik Controls

Topics: Customizing Orchard, Troubleshooting, Writing modules
Nov 3, 2011 at 5:30 AM

Is there anyone use Telerik controls in Orchard solutions?

all the controls working pretty well on normal MVC3 applcations. but not in Orchard. 

I just wonder if someone can give me some hints.

Nov 16, 2011 at 12:12 AM

From Telerik Forum

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>

 

Mar 2, 2012 at 8:49 PM

I'm trying to use Telerik control in the editor for a part. Step #4, adding the ScriptRegistrar() call to the Theme's layout.cshtml won't work because themes aren't active in the Dashboard. Any way to get it to work? And why does it have to be called from Layout.cshtml? Why not from a child view? 

Because of this issue I can get the markup to render in my editor form, but the javascript includes and document.ready calls generated by ScriptRegistrar() aren't being output. 

Mar 7, 2012 at 3:59 AM

I am using the Telerik grid, editor and menu MVC extensions very successfully. I'm not creating parts, I'm creating a module with lots of functionality in an area, but I use the Telerik MVC extensions without putting anything in Layout.cshtml. I just put the ScriptRegistrar and StyleSheetRegistrar calls right into my views (or partial views).

My StyleSheetRegistrar call is at the top of my view after the @model

@( Html.Telerik().StyleSheetRegistrar()
    .DefaultGroup(group => group.Add("telerik.common.css")
        .Add("telerik.vista.css"))
        )

My ScriptRegistrar call at the end of my view

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

I'm using jQuery(false) because I have a @{ Script.Require("jQuery").AtHead(); } at the top. I am actually considering switching that now because the new Telerik release uses jQuery 1.7.1, although once I get everything tested on Orchard 1.4 it has jQuery 1.7.1, so then it should be OK.

I had to add a web.config to the Scripts and Content folders to exclude the files from being handled and be served up as static files.

I also followed the advice in http://orchard.codeplex.com/discussions/240652?ProjectName=orchard and changed the web.config in my module to get Intellisense working with the Telerik MVC extensions, so I added these lines in the sectionGroup

  <remove name="host" />
  <remove name="pages" />

and then added the namespace and assembly references to the relevant spots for the Telerik MVC extensions

  <add namespace="Telerik.Web.Mvc.UI" />

and

  <add assembly="Telerik.Web.Mvc, Version=2010.3.1318.340, Culture=neutral, PublicKeyToken=121fae78165ba3d4, processorArchitecture=MSIL"/>

Sean

 

 

 

Mar 14, 2012 at 4:55 AM

I am following russelleon's post Nov 2011

and I am getting an error "microsoft JScript runtime error: Object doesnt support property or method tDatePicker"

 

Im unsure what this means/ how to resolve?

Mar 15, 2012 at 3:27 AM

You'll need to provide more info and the code where the error is occurring, but the first thing to verify is that you have followed the instructions to register the scripts (step 4. in russelleon's post), and probably my note too:

I had to add a web.config to the Scripts and Content folders to exclude the files from being handled and be served up as static files.

Mar 15, 2012 at 9:44 AM
Edited Mar 15, 2012 at 9:44 AM

try removing :jQuery(false)

from

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