[Solved] Controls not formatting

[Reid]

Hello,

I just upgraded to the latest Premium version of all the Telerik controls.  I have a View that is displaying a RadPanelBar that contains a few grids and RadTreeView embedded in the PanelBar.  I have some questions and to start in terms of styling, my components are not looking like they do in the demos.  I went through the upgrade process in the documentation.  For instance the Calender in an Events User Control does not have any navigation.   The code enables the footer for instance but it is not visiible or if so not formatted.

No JavaScript errors or any other error types. 

I have attached a screen shot of the way the controls are looking.  Also, how do you size the active open panel of a RadPanel component?  I believe it is a RadPane object.

[Atanas Korchev]

Hi Reid,

 Could you please clarify which set of components are you using? This is the forum for Telerik Grid for ASP.NET MVC whereas you seem to be using RadControls for ASP.NET Ajax. Understanding this would help us answer your questions.

 Other than that controls may appear unstyled if their CSS files are not properly included for some reason. Providing a sample project would help us identify what prevents the CSS files from loading.

Regards,
Atanas Korchev
the Telerik team

[Reid]

 

Hello Atanas,

I am relatively new to MVC.  The solution is an MVC 3 solution.  This view started as view with an ASP.NET Ajax controls and the open source MVC controls until I opted yesterday to upgrade to the latest Telerik controls.

So the images show MVC controls inside the ASP.NET Ajax PanelBar component.  Simply because I was starting the conversion to MVC from the inside out, meaning I was focusing on the embedded RadGrids, RadTreeViews and the like.  So these controls are now in MVC loading their data from the ViewData.

The template that loads this RanPanelBar (soon to be MVC) is a view.  Practically every view in this project that is not a UserControl uses a customer ApplicationPage object as it's model so the user controls that are placed on these templates cannot bind to the model. They need to bind to their respective types injected into the ViewData[] by the controller prior to showing the view. This seems to work in terms of the binding but again the controls are not adhering to their .CSS.

I have tried manually registering the JavaScripts and css using the Registrar(s) but was told in the AJAX forum that I did not need to do that.

So here is some conceptual questions I hope you can answer.

1) How to get the styles working.
2) I need to respond to a NodeClick event in JavaScript for a Treeview and a RadCalendar.  How does the MVC control respond to that without using AJAX?  Right now I have a RadTreeView that has JS in place to call a WebService when it's nodes are clicked to bring back some content.  So in general the question about MVC controls responding to user interaction using AJAX calls as to not affect the state of their sibling controls.  So if the user clicks a date on an MVC calendar that is part of a UserControl, how can I refresh the display in the UserControl without affecting the other MVC controls (Grids) and their state.
3) Is there anything other than the statement below and the resident folders and .css (see below) that the controls need to render correctly?

 

 

 

 

 

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

I can post the markup if you like, but crafting a custom solution is just too time consuming considering the multiple data types.
The markup for the panelbar as it is just places the statement for the user controls in the RadPanes.  All the JavaScript is encapsulated in the controls respectfully.

I went through the steps for upgrading to the latest versions that Telerik documents.

Thanks,
Reid

[Atanas Korchev]

Hello Reid,

 I am afraid I cannot be sure why the styles are not loaded in your project without seeing it first. My general recommendation is not to mix the Telerik Mvc Extensions with RadControls for ASP.NET Ajax. Both are very different in terms of API although sharing common features.

 In ASP.NET MVC you cannot subscribe to any server-side event of a server control simply because server side events do not exist. You need to use action methods instead.

 I suggest you check our online examples which show Telerik Extensions for ASP.NET MVC in action.

Regards,

Atanas Korchev
the Telerik team

[Reid]

Hello again,

Please note this is a typical MVC 3 project, not a Telerik MVC project.

I am stumped then about the styling.  I just created a new controller for prototyping MVC in the project.  I created a new View all MVC.  The view just declares the Event control and the Event control is pure MVC as well.  The result is the same, the calendar has no navigation and the css is not apparent.

The examples for MVC both installed and online as far as the calendar component shows nothing into the styles at all of the demo as far as I can see.  Maybe I am wrong.  But reviewing the code does not show what makes the calendar looks nice and formatted in the FrstLook demo. The FirstLook demo is displayed on a  ViewPage whereas my scenario is in a user control embedded on a view page.  Is RenderPartial() needed? 

Here is the code for the "Events" user control:

<div class="wrapperEventCalendar">
    <div class="box-leftEventCalendar">

         <%= Html.Telerik().Calendar()
            .Name("Calendar")
            .Selection(settings => settings
            .Dates((List<DateTime>) ViewData["EventsSelectedDates"]))
            .Value((DateTime) ViewData["FocusedDate"])
            .MinDate((DateTime)ViewData["minDate"])
            .MaxDate((DateTime)ViewData["maxDate"])

         %>

    </div>

    <div class="box-rightEventCalendar">
        <asp:Literal ID="Literal1" runat="server" Text="This is the Event Title"></asp:Literal>
        <br />
        <asp:Literal ID="Literal2" runat="server" Text="This is the Event Subject Text"></asp:Literal>
    </div>
</div>

Styles

 .wrapperEventCalendar {  width: 100%; height:300px;  border: 1px solid gr;  padding: 5px; }
 .box-leftEventCalendar {  width: 230px;  padding: 5px;  border: 1px solid gray;  float: left;  height:100%; margin:0px;}
.box-rightEventCalendar {  padding: 5px;  border: 1px solid gray;  margin-left:240px;  height:100%;   }

Nothing fancy here and the parent MVC template just declares DIVS to contain the UserControl. 

When I inspect the element in FireFox the class for the calendar registers as "t-widget t-calendar".  I did a search for that .css class in the solution and find the usage in the telerik.calendar.js and min.js files.  Both in the root ~/scripts folder and the "~scripts/2011.1.414" folder.  I am not sure if those files are being sent to the client.  Is there anything you know of to inspect the .css and .js files downloaded to the client at any one time?


Also, do you know how to address conceptually, can the control respond to click events and show data in an adjacent panel?

Thanks again,
Reid

[Atanas Korchev]

Hello Reid,

 You should check if there is a ScriptRegistrar and StyleSheetRegistrar defined in your master page. The getting started help topic shows how to use them.

All the best,
Atanas Korchev
the Telerik team

[Reid]

Hello,

Ok I have created a demo project that shows how the styles are not working.  If I remove the commented out  portion of the explicit includes in the template that displays the MVC controls I get a "Jquery is undefined" error.  So I assume that the Registrar is loading the scripts otherwise.  Yet still, no style formatting.


Please take a look at the demo attached.  Hopefully you will have better context.

Thanks,
Reid

[Dimo]

Hello Reid,

Thanks for the demo. I see that you want to use script and CSS file combination and compression, but this requires a handler registration in the web.config, otherwise there is nobody to output the manipulated web assets. Please refer to the documentation:

http://www.telerik.com/help/aspnet-mvc/web-assets-working-with-javascript-web-assets.html#Combination

Generally, the Javascript file references are rendered automatically by the ScriptRegistrar, depending on the components being used. The only exception when you need to add JS file references explicitly in the registrar is when you will be showing a component as a result of an AJAX request. In this case the ScriptRegistrar is unable to register the new script files and they have to be present on the page beforehand.

http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

All the best,
Dimo
the Telerik team

[Reid]

Hello Dino,

I already did the modifications to the Web.Config in the demo I provided, I ran through the steps of the link your provided prior to uploading.

I am still not clear on this resolve.  Can you modifiy the demo and upload it so that I can see it working and what was changed or show me what is wrong in the demo?

Thanks,
Reid

[Dimo]

Hi Reid,

I am sending you a modified version of your sample. Here is what I have changed.

1. In web.config <system.web> added

<httpHandlers>
    <add verb="GET,HEAD" path="asset.axd" validate="false" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>
</httpHandlers>

2. In web.config <system.webServer> added

<handlers>
    <add name="AssetHandler" preCondition="integratedMode" verb="GET,HEAD" path="asset.axd" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>
</handlers>

3. In Site.Master removed

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/2011.1.414/telerik.common.css" rel="stylesheet" type="text/css" />
<link href="../../Content/2011.1.414/telerik.default.css" rel="stylesheet" type="text/css" />

4. In Site.Master removed

.Add("telerik.default.css")

because you are registering two skins at the same time in the StyleSheetRegistrar, which is unnecessary.

Greetings,
Dimo
the Telerik team

[Reid]

Hello,

Thank you for providing this.  I am boarding a flight and will adapt the changes tonight or tommorow.

Most appreciated.


Reid

[Reid]

Hello Atanas,

I have just downloaded and ran the project that contains your modifications.

First of all thank you for doing this.  I wanted to also mention that the web.config declarations were in place in my demo already.

When I run your project under your modifications I see the top calendar working and the navigations working which is contained in the ViewPage, hooray!. 

You might notice though that the same is not true for the user control scenerios below that.  I need to get the controls working in the context of a user control embedded in a view.  Or really for that matter they could be child user controls in a parent user control.  The controls are formatted but no navigation.

Could you continue to work with the demo on your end to help discover why the user controls are not providing navigation in this scenerio?

Thanks,.
Reid

[Dimo]

Hello Reid,

The navigation arrows are generated client-side and their correct addition depends on the Calendar having a unique ID. The problem is that you end up with 3 Calendars with the same ID on the page. This is a general MVC user control issue, which is discussed online, e.g.

http://stackoverflow.com/questions/265508/asp-net-mvc-view-user-control-how-to-set-ids

All the best,
Dimo
the Telerik team

[Reid]

Hi Dimo,

Thank you for your continuing help and patience with this thread.  With the link you provided and the help Atanas provided I have the demo working to display the styles and navigation correctly for the RadCalendar contained in the ViewPage and the embedded user controls.  The key is to make sure the ID of the control is unique for JQuery.  And to do that you need to pass a custom model class to contain the ID.   You can expand out that class to contain other properties that would be useful like the CssClass.

I intend to upload the detailed demo that demonstrates this for the community today or tomorrow.  Before I upload it I want to finish the part that assigns more than one selected date on the calendar.  The code below is correct according to my research so far but the results are that there is no dates being selected.  It might be a css issue but I think not because viewing source shows no selected dates in the HTML other than the current date.

Using the Ajax component previously we could just DataBind() to the calendar, and doing so showed that the selected dates were being used.  But in this MVC version the dates fed into the Dates member does not work.   Here is the code I have.


Controller code. (the GenerateDemoEventData() method generates stub data)

public ActionResult TelerikMVCView()
        {

            ViewData["selectedDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
            ViewData["minDate"] = new DateTime(1899, 12, 31);
            ViewData["maxDate"] = new DateTime(2100, 12, 31);

            EventsCalendar userControl1Events = new EventsCalendar() { ID = "userEventsControl1" , Events = new List<ScheduledEvent>()};
            EventsCalendar userControl2Events = new EventsCalendar() { ID = "userEventsControl2", Events = new List<ScheduledEvent>() };

            GenerateDemoEventData(userControl1Events, userControl2Events);
            ViewData["userControlDates1"] = userControl1Events;
            ViewData["userControlDates2"] = userControl2Events;

            return View();
        }

User Control Markup (EventsCalendar is the Model class that contains the EventDates List<> member of date times values.)

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Telerik.MVC3.Web.Models.EventsCalendar>" %>


<div class="calendarBox">

     <% Html.Telerik().Calendar()

            .Name(Model.ID) 

            .Value((DateTime)ViewData["selectedDate"])

            .MinDate((DateTime)ViewData["minDate"])

            .MaxDate((DateTime)ViewData["maxDate"])

              

            .ClientEvents(events =>

            {

                events.OnChange("change");

                events.OnChange("change");

                events.OnLoad("onLoad");

            })        

            .Selection(settings => settings               

                .Dates((IList<System.DateTime>) (IList<System.DateTime>) Model.EventDates)) 

                  

            // Exchange the line below to use a controller call instead of the Model data above

            //.Dates(Telerik.MVC3.Web.Controllers.TelerikPrototypeController.GetEventDemoDates());

                      

            .Render();            

    %>

    </div>

I can testify that when a breakpoint is set in the section above the "Model.EventDates" member is full of 12 event date times, yet those days do not display as selected in any way.

Do you know what might be going wrong here?

Thanks,
Reid

[Dimo]

Hi Reid,

I am afraid the MVC Calendar does not support multiple selection.

Regards,
Dimo
the Telerik team

[Reid]

Oh, bummer.

That was the whole purpose of the adventure for me. :(  I need a calendar to display the events in the system, so without being able to highlight specific dates on the calendar so that the user can click on one to see the event,  it was not a resolve.

I hope that when you say it does not support multi selection you were referring to the user trying to multi-select more than one date.  Because if that is the case it is not an issue, I want to present the calendar with a set of pre-selected dates.

Curious why the Dates() member exists if not to support pre-selected dates.

If you answer that is it not possible, does Telerik plan that functionality?  It seems the same logic that selects the current date or the "SelectedDate" property could extend to look at the Dates array and set those <td> properties respectfully., allowing the user's CssClass to propagate to the table cell.

Thanks again

[Dimo]

Hello Reid,

We will consider implementing multiple Calendar selection in a future version of the component, based on customer feedback and other priorities.

In the meantime, you can achieve the desired behavior by modifying the following demo:

http://demos.telerik.com/aspnet-mvc/calendar/selectaction

<%= Html.Telerik().Calendar()
        .Name("Calendar")
        .Selection(settings =>
                settings
                    .Action("SelectAction", new { date = "{0}" })
                    .Dates(new List<DateTime> {
                        DateTime.Today.AddDays(-25),
                        DateTime.Today.AddDays(-9),
                        DateTime.Today.AddDays(-1),
                        DateTime.Today.AddDays(2),
                        DateTime.Today.AddDays(3),
                        DateTime.Today.AddDays(10),
                        DateTime.Today.AddDays(35)
                    })
        )
        .ClientEvents(ev => ev.OnLoad("calendarLoad"))
%>

function calendarLoad(e)
{
    // select days with events
    $(this).find(".t-action-link").parent().addClass("t-state-selected");

    // prevent selection of other days
    $(this).delegate(".t-content .t-link", "click", function(){
        if (this.className.indexOf("t-action-link") == -1)
            return false;
    });
}

Greetings,
Dimo
the Telerik team

[Reid]

Hi again Dimo,

That did it!  The dates are now being highlighted. 

Please forgive me for milking this thread a bit more because I have a couple of questions.

1. When the calendar navigates to the next month the SelectedDate highlights underlining the text but the background color present in selected days on the first month are not present.
2. Are there any plans to extend the CalendarBuilder ot CalendarSelectionBuilder classes to bind complex objects to the Calendar?  
3. How can I adjust the CSS for the Selected Dates?
4. How can hints or ToolTips be propagated to the SelectedDates?  Showing the event title would be great.

Thanks!
Reid 

[Dimo]

Hi Reid,

It seems that you are trying to use the Calendar component as a Scheduler, however, I am afraid this is way over the top and we have no plans in extending the features that much. We may have a Scheduler in the future, however, no specific timeframe has been set.

You can customize the appearance of the selected dates by using the t-action-link CSS class, which is applied to the <a> elements that have an event. Alternatively, use the t-state-selected CSS class, but use it in selectors that also contain the Calendar's wrapper CSS class - t-calendar, otherwise other components will be affected as well.

Tooltips can be added only client-side by setting the <a> element's title HTML attribute.

Regards,
Dimo
the Telerik team

[Reid]

Ok, not sure how to get to the <a> element in JQuery but will approach that.

I am uploading the demo that I have been working on for others to download and modify for their usage.

I am going to investigate a scheduling DHTML solution for this task.  I would love to find a JQuery based schedular to improve performance so that a proprietary JS library does not have to be downloaded to the client each time.  DHX has a nice set of controls in that respect.  I am considering evaluating and maybe purchasing them.  It seems that in MCV you are required to lean more on JS so investing in a good set of DHTML controls might be a good idea.

Thanks for your help on this.

Reid

[Dimo]

Thank you for your contribution, Reid.

Regards,
Dimo
the Telerik team