Questions on UI for ASP.NET AJAX Forum

1 answer

176 views

RadDatePicker - FastNavigationPopup position static when popupCalender over

Hi, I've tried to set a static position on my fastnavigationpopu when we click on title of the calendar inside the RadDatePicker and i also add an other function to show the calendar over the dateInput when there's not enough space on bottom of the screen. But the thing is that when the calendar is showing over the dateInput the fastnavigationpopup show where he should be when the calendar is under the dateInput.

Is there anyway to set the position on click of the calendarTitle? or simply get the fastnavigationpopup

Here,s the javascript i used to implement both function:

FastNavigationPopup: (OnLoad / OnCalendarViewChange - Calendar)

    
            function SetUpNavigation (sender)  
        
            {  
        
                var datePickerTitle = sender._titleID;  
        
                var titleElement = $get(datePickerTitle);  
        
                var pickerID = datePickerTitle.replace("_calendar_Title", "");  
        
                var calendarPosition = GetCalendarElement(pickerID);  
        
                var oldOnclick = titleElement.onclick;  
        
                var onclickHandler = function()  
        
                                    {  
        
                                        var e = {  
        
                                                    clientX : calendarPosition.x - 75,  
        
                                                    clientY : calendarPosition.y + 30  
        
                                                };  
        
                                        oldOnclick(e);  
        
                                        window.setTimeout(function()  
        
                                            {  
        
                                                titleElement.onclick = onclickHandler;  
        
                                            }, 20);  
        
                                     };  
        
                titleElement.onclick = onclickHandler;  
        
            }  
        
            function GetCalendarElement (datePickerID)  
        
            {  
        
                var datePicker = $find(datePickerID);  
        
                var calendar = datePicker.get_popupContainer();  
        
                return datePicker.getElementPosition(calendar);  
        
            }

For the calendarPopup (OnClick - DatePopupButton)

    
            functionShowPopupCorrectPosition (pickerID)  
        
            {  
        
                var dpWrapper = document.getElementById(pickerID).parentNode  
        
                var picker = $find(pickerID);               
        
                var dpOffsetTop = GetElementPosition(pickerID).y + dpWrapper.offsetHeight;  
        
                var pageHeight = document.body.offsetHeight;                                 
        
                var calHeight = GetCalendarHeight(pickerID);  
        
                if((dpOffsetTop + calHeight) > pageHeight)  
        
                {  
        
                   shouldSkip = true;  
        
                   PopupAbove(pickerID);  
        
                   SetUpNavigationPopupOpenning(pickerID);                 
        
                }  
        
                else 
        
                {  
        
                   var datePicker = $find(pickerID);    
        
                   datePicker.showPopup();  
        
                }  
        
            }  
        
            function GetCalendarHeight (pickerID)  
        
            {  
        
                var datePicker = $find(pickerID);   
        
                var popupElement = datePicker.get_popupContainer();  
        
                var dimensions = datePicker.getElementDimensions(popupElement);  
        
                return dimensions.height;  
        
            }  
        
            function GetElementPosition(pickerID)  
        
            {  
        
                var datePicker = $find(pickerID);   
        
                var textBox = datePicker.get_textBox();  
        
                var position = datePicker.getElementPosition(textBox);  
        
                return position;  
        
            }  
        
            function PopupAbove(pickerID)  
        
            {  
        
                var datePicker = $find(pickerID);                 
        
                var popupElementHeight = GetCalendarHeight(pickerID);                 
        
                var position = GetElementPosition(pickerID);  
        
                datePicker.showPopup(position.x, (position.y - popupElementHeight) + 18);  
        
            }

Thanks

Calendar

answered on 05 Feb 2009

0 answers

62 views

No Gridlines on the 2nd page of Print

When a large radgrid was printed from a web page, the1st printout page displayed the gridlines properly. However, starting from 2nd printout page, the gridline disappears. The grid used radgrid.dll v.5.120 (1.1 framework). The skin was "Classic". Any work around suggested? Thanks!

One additional note: By using your radgrid within 2.0 framework, the 2nd page was printed with gridlines. However the problematic grid print was in 1.1 framework. Please help on this. Thanks.

Grid

asked on 05 Feb 2009

3 answers

172 views

Disable dates

Hi,
I need to disable the dates outside the current month of the current view.
For example February, then I want to disable 26-31 of January and 1-8 of Mars.
I'm trying with the dayrender method with no success.

    
            protected void radCalendar_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e) 
        
                    { 
        
                        if (e.Day.Date < _calendarFirstDateOfMonth || e.Day.Date > _calendarLastDateOfMonth) 
        
                        { 
        
                            e.Cell.Style.Add(HtmlTextWriterStyle.Cursor, "default"); 
        
                            e.Cell.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#ff0000"); 
        
                            e.Day.IsSelectable = false; 
        
                            e.Day.IsDisabled = true; 
        
                        } 
        
                        else 
        
                        { 
        
                            if (SelectedEvents != null) 
        
                            { 
        
                                foreach (Swh.Ih7.Entities.Event ev in SelectedEvents) 
        
                                { 
        
                                    if (e.Day.Date >= ev.StartDate.Date && e.Day.Date <= ev.EndDate.Date) 
        
                                    { 
        
                                        e.Cell.Style.Add(HtmlTextWriterStyle.FontWeight, "700"); 
        
                                    } 
        
                                } 
        
                            } 
        
                        } 
        
                    }

(the red background is set so the if-statement is working)

With this code I can still click on all dates! :(
Is it because I have AutoPostBack=true?

Calendar

answered on 05 Feb 2009

4 answers

145 views

Imprecise horizontal scrolling

I have an issue with the horizontal scrolling. Dragging the scrollbar or clicking the arrow buttons work fine if I don't freeze any columns. The moment I've frozen the first 2 columns the following starts to happen:
- I begin dragging the scrollbar until its center reaches about 1/3 of the grid's width (let's name this position A)but nothing is scrolling yet!
- I continue dragging and for the next approx 50 pixels (the whole grid is 830 pixels wide) all the unfrozen columns scroll at high speed until only the last column is visible (let's call this position B)
- I drag from B all to the right and obviously nothing happens
- I now begin dragging back from the far right towards position B - nothing happens; when I reach back to position A ALL the unfrozen rows JUMP in their original position like they should look when the scroll bar is all the way to the left
- I drag from A all the way to the left and obviously nothing happens

What I think that should happen is that the scrolling should be happening smoother, on all the width of the dragging, not only on those 50 pixels. And when you drag back from right to left the columns should scroll one at the time, not jump back at once.

Grid

answered on 05 Feb 2009

2 answers

337 views

Updating a master page control from a control within a content area

I have a master page set up with a RadAjaxManager, some controls, and a content placeholder. I have wired up a few buttons to a RadTreeView that exists on the master page, and ajax updates are occurring as expected. I have also used RadAjaxManagerProxy to successfully ajax-enable a grid that resides in the content page.

What I have not been able to do is configure the content page so that I can trigger an update to the treeview on the master page. Here's what I've done so far:

I have exposed a public method on the master page called BuildHierarchy() which populates the treeview.
I have a button in the content page that calls the BuildHierarchy() method after changing some data.
I have programmatically added the ajax settings that I thought would allow the AjaxManager to allow that update.

Below is the key piece code I've used to try to set up the scenario described above. The buttonMakeDemo control is a button which I need to update the RadGrid within the content page and the RadTreeView in the master page.

First, the relevant ajax code in my ASPX page. I'm allowing the grid to be ajax-enabled for sorting, and I'm allowing the button to update the grid:

    
                <telerik:RadAjaxManagerProxy ID="radajaxProxy" runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="gridMGs"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="gridMGs" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="buttonMakeDemo"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="gridMGs" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManagerProxy>

Next, the relevant codebehind in the content page. You can see that I've also tried adding the settings to the RadAjaxManagerProxy's AjaxSettings, but that doesn't work either.

    
            var ajaxManager = RadAjaxManager.GetCurrent(Page); 
        
            var treeviewHierarchy = (RadTreeView) Master.FindControl("treeviewHierarchy"); 
        
            // radajaxProxy.AjaxSettings.AddAjaxSetting(buttonMakeDemo, treeviewHierarchy); 
        
            ajaxManager.AjaxSettings.AddAjaxSetting(buttonMakeDemo, treeviewHierarchy);

In case it matters, here's the codebehind for the button click event. "ThreePaneMaster" is the class name of the master page in question. Don't worry about the argument passed to that BuildHierarchy method -- it's a business object accessible on the page.

    
            protected void buttonMakeDemo_Click(object sender, EventArgs e) 
        
            { 
        
                // Do my business logic stuff here 
        
                gridMGs.Rebind(); 
        
                ((ThreePaneMaster) Master).BuildHierarchy(RootSecurityToken.AccountID); 
        
            }

Any ideas what I might be doing wrong? The ajax-enabled controls work so long as they're all either in the master or in the content, but not if one's in the content and one's in the master.

Thanks,
Josh

Ajax

answered on 05 Feb 2009

4 answers

137 views

Beginning & Ending Images

Is there an easy way to add a beginning and ending image to a horizontal menu? I would like to have a curved image on both ends to smooth the look of the menu. My menu is inside of a table <td> element.

I tried:
<img src=...>
<telerik:radMenu ...>
<img src=...>

but when opened in IE I see the two images on one line, followed by the menu on a separate line immediately below it.

Any help will be very much appreciated!
Steve

Menu

answered on 05 Feb 2009

1 answer

128 views

issue with databinding

Hello,

i am using v2008.3.1105.35

I am trying to data bind a text box in the panel bar's item template to a field in my data source. But it dose not seem to to working correctly. Here are the important parts:

    
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="800px">

                <ItemTemplate>

                    <asp:TextBox ID="TextBox2" runat="server" Text='<%#  DataBinder.Eval(Container.DataItem, "ItemDesc")%>' />

                </ItemTemplate>

            </telerik:RadPanelBar>

    
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    if (!IsPostBack) 
        
                    { 
        
                        BindPanelBar(); 
        
                        for (int i = 0; i < RadPanelBar1.Items.Count; i++) 
        
                            RadPanelBar1.Items[i].DataBind(); 
        
                    } 
        
                }

    
                protected void BindPanelBar() 
        
                {   
        
                  DataTable dt; 
        
            // snip: code building the datatable 
        
                    RadPanelBar1.DataSource = dt; 
        
                    RadPanelBar1.DataTextField = "Title"; 
        
                    RadPanelBar1.DataValueField = "ID"; 
        
                    RadPanelBar1.DataFieldID = "Alt_ID"; 
        
                    RadPanelBar1.DataBind(); 
        
                }

It runs with no errors but the text box is blank. Am I doing this in the wrong order or missing a step?

If i data bind to a panel bar property it works as expected

    
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="800px"> 
        
                <ItemTemplate> 
        
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%#  DataBinder.Eval(Container, "Text")%>' /> 
        
                </ItemTemplate> 
        
            </telerik:RadPanelBar>

Thanks for the help.

PanelBar

answered on 05 Feb 2009

4 answers

139 views

TabStrip Switching ...

Hi. am working with tabStrip, and i want to make different content in different tabs.
Everything is okay, but i can not click on the tab when am starting the form, so i can see only the content of the first tab, a can not switch to another.

Please for Help.

TabStrip

answered on 05 Feb 2009

0 answers

137 views

Center li in ul

I've created a custom skin, and I'm currently trying to get the list item's of the submenu to align to the center of their parent ul. However, when I put a border around the parent ul, I see that it is 0 pixels tall, and does not wrap around it's li's. I was wondering, why is it doing this? It is preventing me from simply putting text-align:center on the ul element.

Any help would be greatly appreciated.

TabStrip

asked on 05 Feb 2009

2 answers

91 views

Javascript error in IE7 but not in firefox

Hi

A have a strange problem which I hope one of you can help me with.

When i Insert an editor on my page, I get a javascript error in IE 7 but not i firefox 3. The error just state the following:
Line: 618
Char: 1
Error: Object required
Code: 0

But at line 618 I do not have any javascript or editorcode. It seems that it can locate the error past this line.

I have tryed cutting out parts of the page to get the code linies below 618 and even got it down to 528 but the error still states that there is an error on line 618.

Do anybody have a clue to what this problem could be.

Update:
-------

I've tryed clicking on the elements in the editor and on the font size and font type drop down list i get another error, which might be related:
Line: 8195
Char: 1
Error: 'this._getPopupVisibilityController()' is null or not an object
Code: 0

Thanks in advance
Dennis Cassøe

Editor

answered on 05 Feb 2009