Questions on UI for ASP.NET AJAX Forum

2 answers

264 views

Window without IFrame (ie. ASPX in RadWindow)

Hi,

RadWindow architecture is very tied to IFrame since the content is a page.

This is interesting but the communication between page and windows (or between parent and child windows) is not very user friendly (JavaScript, etc.)

Is their any chance to put directly ASPX inside RadWindow in a next version, just like we're doing for RadTooltip ? With a RadAjaxPanel inside RadWindow the behaviour should be the same.

Best regards,

Florian DREVET

Window

answered on 14 Aug 2009

4 answers

138 views

[Solved] Load on demand and selecting items

Hi,

I'm in the middle of trying to get an idea of how the telerik components work and if they can fit my future projects.
concering the radcombobox the load on demand feature seems pretty funky, so i've tried it out in a sample project.
I found out that the behaveour changed slightly, but to such a degree that it could potentially confuse users.
It seems that after enabeling load on demand the way a user can select an item from the dropdownlist changes.
Without load on demand the user can simply click anywhere in the dropdownlist to select the desired item. After enabeling he can only select the item by clicking on the item text! He can't click on the blank area behind the text.

This can be experienced also by using one of the examples of load on demand: http://demos.telerik.com/aspnet-ajax/combobox/examples/populatingwithdata/autocompletesql/defaultcs.aspx

Can anybody tell me how to enable load on demand without losing the click anywhere in the dropdownlist feature?

ComboBox

answered on 14 Aug 2009

2 answers

177 views

RadTimePicker inside asp.net gridview

Hi

I am having radtimepicker inside a asp.net gridview.
OnRowDatabound of gridview in the code behind I attached "OnClientTimeSelected" event of radtimepicker.
I am having a javascript function
But that function is not getting called.
Please tell me proper solution for this.

This is the sample code

aspx page
------------------------------

                     <asp:GridView runat="server" ID="gvWorkingHours_New" AutoGenerateColumns="false"
                                    OnRowDataBound="gvWorkingHours_New_RowDataBound">
                                        <Columns>
                                            <asp:TemplateField HeaderText="Slot Name">
                                                <ItemTemplate>
                                                    <asp:TextBox runat="server" ID="txtSlotName" CssClass="inputsNoExpression" Text='<%# Eval("SlotName") %>'></asp:TextBox>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="From Time">
                                                <ItemTemplate>
                                                    <radCln:RadTimePicker ID="ddlFromTimeHrs" Width="31%" runat="server" TabIndex="2"
                                                        EnableTyping="true" TimeView-TimeFormat="HH:mm" DateInput-DateFormat="HH:mm"
                                                        DateInput-DisplayDateFormat="HH:mm" DateInput-EmptyMessage="From Time">
                                                        <TimeView ID="TimeView1" runat="server" ShowHeader="False" Interval="00:30" Columns="4" OnClientTimeSelected="sree()">
                                                        </TimeView>
                                                    </radCln:RadTimePicker>
                                                    <font class="sf-lab">hrs</font>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField HeaderText="To Time">
                                                <ItemTemplate>
                                                  <radCln:RadTimePicker ID="ddlToTimeHrs" Width="31%" runat="server" TabIndex="2"
                                                        EnableTyping="true" TimeView-TimeFormat="HH:mm" DateInput-DateFormat="HH:mm"
                                                        DateInput-DisplayDateFormat="HH:mm" DateInput-EmptyMessage="From Time">
                                                        <TimeView ID="TimeView1" runat="server" ShowHeader="False" Interval="00:30" Columns="4">
                                                        </TimeView>
                                                    </radCln:RadTimePicker>
                                                </ItemTemplate>
                                            </asp:TemplateField>

                                        </Columns>
                                        <HeaderStyle CssClass="sf-formlabel" />
                                    </asp:GridView>


--------

aspx.cs file
protected void gvWorkingHours_New_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        DataRowView drv = e.Row.DataItem as DataRowView;
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            RadTimePicker ddlFromTimeHrs = (RadTimePicker)e.Row.FindControl("ddlFromTimeHrs");
            RadTimePicker ddlToTimeHrs = (RadTimePicker)e.Row.FindControl("ddlToTimeHrs");

((RadTimePicker)e.Row.FindControl("ddlFromTimeHrs")).Attributes.Add("OnClientTimeSelected", "javascript:return CheckValidTimeHrs_New(" + ddlFromTimeHrs.ClientID + "," +
ddlToTimeHrs.ClientID + ",1" + ")");

((RadTimePicker)e.Row.FindControl("ddlToTimeHrs")).Attributes.Add("OnClientTimeSelected", "javascript:return CheckValidTimeHrs_New(" + ddlFromTimeHrs.ClientID + "," +
ddlToTimeHrs.ClientID + ",2" + ")");

        }
    }

---

javascript function

CheckValidTimeHrs_New(value1,value2,value3)
{
alert('Onclienttimeselected');
}

Regards
Sreedhar Ambati

Calendar

answered on 14 Aug 2009

1 answer

133 views

RadGrid dynamic no of columns width to be resizable

Hello ,

        I have a issue in arranging RadGrid columns , which will be dynamically added at runtime. No of columns differ from time to time.
       When i tried with TableLayout fixed i have all columns fixed in size but the date columns are appearing shrinked with out the calender control.
      When i tried removing TableLayout fixed for mastertableview all columns based on column length either come together if less or stetch if more no of columns.
      Can any one suggest how to align the columns accordingly with the no of columns.

Thanks & Regards,
Satya.

Grid

answered on 14 Aug 2009

0 answers

162 views

From Time To Time Validation

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <rad:RadGrid ID="gvWorkingHours_New" runat="server" Skin="SkeltaGrid" AutoGenerateColumns="false"
            OnItemDataBound = "gvWorkingHours_New_OnItemDataBound">
                <MasterTableView>
                    <Columns>
                     <rad:GridTemplateColumn>
                            <ItemTemplate>
                                <asp:TextBox runat="server" ID="txtSlotName"
                                CssClass="inputsNoExpression" Text='<%# Eval("SlotName") %>'></asp:TextBox>

                            </ItemTemplate>
                        </rad:GridTemplateColumn>
                        <rad:GridTemplateColumn>
                            <ItemTemplate>
                                <radCln:RadTimePicker ID="rtpFromTime" Width="31%" runat="server" TabIndex="2"
                                    EnableTyping="true" TimeView-TimeFormat="HH:mm" DateInput-DateFormat="HH:mm"
                                    DateInput-DisplayDateFormat="HH:mm" DateInput-EmptyMessage="From Time"
                                    DBSelectedDate='<%# Eval("FromTime") %>'>
                                    <TimeView ID="tvFrom" runat="server" ShowHeader="False" Interval="00:30" Columns="3"                                                                    >
                                    </TimeView>
                                </radCln:RadTimePicker>
                            </ItemTemplate>
                        </rad:GridTemplateColumn>
                        <rad:GridTemplateColumn>
                            <ItemTemplate>
                                <radCln:RadTimePicker ID="rtpToTime" Width="31%" runat="server" TabIndex="2"
                                    EnableTyping="true" TimeView-TimeFormat="HH:mm" DateInput-DateFormat="HH:mm"
                                    DateInput-DisplayDateFormat="HH:mm" DateInput-EmptyMessage="To Time"
                                     DBSelectedDate='<%# Eval("ToTime") %>'>
                                    <TimeView ID="tvTo" runat="server" ShowHeader="False" Interval="00:30" Columns="3"
                                     >
                                    </TimeView>
                                </radCln:RadTimePicker>
                            </ItemTemplate>
                        </rad:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </rad:RadGrid>
             <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lnkbtnAddSlot_New_Click" Width="97px"
              CssClass="sf-inputsLinkButton" OnClientClick="return AddSlot_New()">Add Slot_New</asp:LinkButton>
        </div>
    </form>
</body>
</html>

code behind
----------

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SetInitialRowForSlots_New();
        }
    }
    private void SetInitialRowForSlots_New()
    {
        DataTable dtSlots = new DataTable();
        dtSlots.Columns.Add(new DataColumn("SlotName", typeof(string)));
        dtSlots.Columns.Add(new DataColumn("FromTime", typeof(string)));
        dtSlots.Columns.Add(new DataColumn("ToTime", typeof(string)));

        DataRow drSlot = dtSlots.NewRow();
        drSlot["SlotName"] = string.Empty;
        drSlot["FromTime"] = new TimeSpan(0, 0, 0);
        drSlot["ToTime"] = new TimeSpan(0, 0, 0);
        dtSlots.Rows.Add(drSlot);

        gvWorkingHours_New.DataSource = dtSlots;
        gvWorkingHours_New.DataBind();
    }

    protected void lnkbtnAddSlot_New_Click(object sender, EventArgs e)
    {
        DataTable dtSlots = new DataTable();
        dtSlots.Columns.Add(new DataColumn("SlotName", typeof(string)));
        dtSlots.Columns.Add(new DataColumn("FromTime", typeof(string)));
        dtSlots.Columns.Add(new DataColumn("ToTime", typeof(string)));

        foreach (GridDataItem pkgItem in gvWorkingHours_New.MasterTableView.Items)
        {
            TextBox SlotName = pkgItem.FindControl("txtSlotName") as TextBox;
            RadTimePicker FrTime = pkgItem.FindControl("rtpFromTime") as RadTimePicker;
            RadTimePicker ToTime = pkgItem.FindControl("rtpToTime") as RadTimePicker;

            DataRow dr = dtSlots.NewRow();
            dr["SlotName"] = SlotName.Text;
            dr["FromTime"] = new TimeSpan(((DateTime)(FrTime.DbSelectedDate)).TimeOfDay.Hours, ((DateTime)(FrTime.DbSelectedDate)).TimeOfDay.Minutes, 0);
            dr["ToTime"] = new TimeSpan(((DateTime)(ToTime.DbSelectedDate)).TimeOfDay.Hours, ((DateTime)(ToTime.DbSelectedDate)).TimeOfDay.Minutes, 0);

            dtSlots.Rows.Add(dr);
        }
        DataRow drEmpty = dtSlots.NewRow();
        drEmpty["SlotName"] = string.Empty;
        drEmpty["FromTime"] = new TimeSpan(0, 0, 0);
        drEmpty["ToTime"] = new TimeSpan(0, 0, 0);

        dtSlots.Rows.Add(drEmpty);
        gvWorkingHours_New.DataSource = dtSlots;
        gvWorkingHours_New.DataBind();
    }

    protected void gvWorkingHours_New_OnItemDataBound(object sender, GridItemEventArgs e)
    {

        if (e.Item.ItemType == GridItemType.Item)
        {
            DataRowView dr = (DataRowView)e.Item.DataItem;
            if (dr != null)
            {

                RadTimePicker rtpFrom = (RadTimePicker)e.Item.FindControl("rtpFromTime");

                //((RadTimePicker)e.Item.FindControl("rtpFrom")).Attributes.Add("OnClientTimeSelected", "javascript:return sree(" + tvFrom.ClientID + ")");

            }
        }

}

Hi

I placed two radtimepickers (fromtime and totime) inside a radgrid and want to validate in javascript (FromTime should be less than ToTime. I want to show this message in an alert whenever user gives invalid time)
How to achieve this?
I tried attaching onclienttimeselected in onitemdatabound but it is not firing
Please help me

Regards
Sreedhar Ambati

Calendar

asked on 14 Aug 2009

3 answers

172 views

Web.config registration missing

Hello Everybody

I have lost more day to check the Editor but not sccussfully.
I do not know why it work fine in the localhost, but not work in the web
I have met an error like this"
Web.config registration missing

The Telerik dialogs require a HttpHandler registration in the Web.config file. Please
use the control's Smart Tag to add the handler automatically, or see the help for moew information
control > Editor>Dialogs"
please help me
Thanks all
Phuc Hoang

Editor

answered on 14 Aug 2009

9 answers

224 views

[Solved] RadToolTip Paging

Hi Telerik support,

I am running Telerik: v2008.3.1214.35
I am having trouble with the radgrid and tooltipManager with paging.

The grid is dynamically loaded when a menu selection is made.
When I don’t have paging my tooltips behave properly. With paging they are display data from the first page only.

I have the tooltip and the grid defined in AJAX manager, because I am using paging I went from simple databinding to advanced. I know there is a sequence to the databinding when using advanced.

I know I am hitting the Itemdatabound event before the rebind… Could you please provide an example on how to resolve this.

Thank you

Julie

Code below:

The setting in Ajax manager.

<telerik:AjaxSetting AjaxControlID="gridStudyDetails">

<telerik:AjaxUpdatedControl ControlID="gridStudyDetails" LoadingPanelID="LoadingPanel1"/>

<telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"

RelativeTo="Element"

Width="420px"

Height="150px"

Position="BottomLeft"

HideEvent="ManualClose"

Title="Study Details"

Skin="Vista"

Animation="Slide"

ShowEvent="OnClick" AutoTooltipify="False"

onajaxupdate="RadToolTipManager1_AjaxUpdate" EnableViewState="True">

</telerik:RadToolTipManager>

The grid

<telerik:RadGrid ID="gridStudyDetails" runat="server" AutoGenerateColumns="False"

ClientSettings-Selecting-AllowRowSelect="true" CssClass="gridText"

skin="Vista" Width="675px" GridLines="None"

onitemcommand="gridStudyDetails_ItemCommand" AllowSorting="True"

onsortcommand="gridStudyDetails_SortCommand"

onitemdatabound="gridStudyDetails_ItemDataBound" AllowPaging="True"

onpageindexchanged="gridStudyDetails_PageIndexChanged" PageSize="6"

EnableViewState="False" onneeddatasource="gridStudyDetails_NeedDataSource" >

</HeaderContextMenu>

</ClientSettings><FilterMenu EnableTheming="True">

</FilterMenu>

<telerik:GridBoundColumn DataField="StudyID" HeaderText="Study ID" UniqueName="StudyID" Visible="True" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="RecType" HeaderText="RecType UniqueName="RecType" Visible="False" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="DetailStudy">

<asp:HyperLink ID="hlkStudyDetail" runat="server" NavigateUrl="#" Text="Details" ></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

Code Behind:

protected void gridStudyDetails_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)

{

Control hpStudyDetail = e.Item.FindControl("hlkStudyDetail");

if (!Object.Equals(hpStudyDetail, null))

{

if (!Object.Equals(this.RadToolTipManager1, null))

{

DataRowView currentRow = (DataRowView)e.Item.DataItem;

this.RadToolTipManager1.TargetControls.Add(hpStudyDetail.ClientID,currentRow.Row["StudyID"].ToString(), true);

}

protected void gridStudyDetails_PageIndexChanged(object source, GridPageChangedEventArgs e)

{

gridStudyDetails.DataSource = null;

RadToolTipManager1.TargetControls.Clear();

gridStudyDetails.Rebind();

}

protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)

{

Control ctrl = Page.LoadControl("StudyDetail.ascx");

StudyDetail details = (StudyDetail)ctrl;

details.StrStudyID = e.Value;

e.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);

}

protected void gridStudyDetails_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

if (Session["Selection"] != null)

{

string selection = Session["Selection"].ToString();

if (selection == "Pending" || selection == "Approved" || selection == "Archived")

{

SetMenu(selection);

}

else

{

gridStudyDetails.DataSource = null;

}

protected void SetMenu(string selection)

{

switch (selection)

{

case "Pending":

{

lblGridHeader.Text = "Pending Studies";

lblGridDetails.Text = "Studies";

gridStudyDetails.Columns.FindByUniqueName("ApprovalToDate").Display = false;

gridStudyDetails.Columns.FindByUniqueName("ReceiveDate").Display = true;

DataColumn dc0 = new DataColumn("DashBoardSelection");

dc0.DataType = typeof(string);

dc0.DefaultValue = selection;

gridDataTable.Columns.Add(dc0);

DataColumn dc1 = new DataColumn("DashBoardCategory");

dc1.DataType = typeof(string);

dc1.DefaultValue = "Studies";

gridDataTable.Columns.Add(dc1);

gridStudyDetails.DataSource = gridDataTable;

//gridStudyDetails.DataBind();

StudyPanel.CssClass = "";

break;

}

protected void MenuDashboard_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)

{

Session["Selection"] = e.Item.Value;

if (e.Item.Value == "Pending" || e.Item.Value == "Approved" || e.Item.Value == "Archived")

{

gridStudyDetails.DataSource = null;

gridStudyDetails.Rebind();

}

else

{

SetMenu(e.Item.Value);

}

Grid

answered on 14 Aug 2009

1 answer

185 views

RadToolTip inside RadComboBox

Hi,

I have a project with a RadComboBox which contains a list of items which each require a tooltip that shows an image and some text. I have used the example provided at http://www.telerik.com/support/kb/aspnet-ajax/tooltip/radtooltip-for-radcombobox.aspx

However because my lists are created at runtime I ended up using the information on how to do a runtime template for list items provided at http://www.telerik.com/help/aspnet/combobox/combo_templates_runtime.html

The list is now working and showing tooltips, however the issue I have is that the tool tips are all wider (and in some cases higher) than the drop down section of the list, however the tooltip remains "inside" the drop down thus making it hard to read the tooltip (it also causes scroll bars on the drop down to appear, but I don't want users to have to scroll within the drop down just to view the tool tip). Is it possible to make the tool tip "break out" of the drop down?

The InstantiateIn for the template is currently:

    
            public void InstantiateIn(Control container)  
        
            {  
        
                Panel pnl = new Panel();  
        
                pnl.ID = "ElementContainerPnl";  
        
                pnl.CssClass = "elementListItem";  
        
                Label elementName = new Label();  
        
                elementName.ID = "ElementName";  
        
                elementName.DataBinding += new EventHandler(elementName_DataBinding);  
        
                RadToolTip toolTip = new RadToolTip();  
        
                toolTip.ID = "ElementToolTip";  
        
                toolTip.TargetControlID = elementName.ID;  
        
                Image img = new Image();  
        
                img.ID = "ElementToolTipImage";  
        
                img.DataBinding += new EventHandler(img_DataBinding);  
        
                Label toolTipText = new Label();  
        
                toolTipText.ID = "ElementToolTipText";  
        
                toolTipText.DataBinding += new EventHandler(toolTipText_DataBinding);  
        
                toolTip.Controls.Add(img);  
        
                toolTip.Controls.Add(toolTipText);  
        
                pnl.Controls.Add(elementName);  
        
                container.Controls.Add(pnl);  
        
                container.Controls.Add(toolTip);  
        
            }

Any ideas?

Thanks

ToolTip

answered on 14 Aug 2009

2 answers

83 views

Telerik.Web.UI.Slide and Telerik.Web.UI.SlideDuration using Javascript - Not supported in q2 2009 release?

Hi,

I have been using telerik ajax asp.net controls since last year. We have been using following piece of code for animating RadDock.
I just updated my dll to Q2 2009. And I am getting javascript error at following bold line. Then I tried to do alert on Telerk.Web.UI.Slide and Telerik.Web.UI.SlideDirection.Up, but it gives javascript error saying object not defined. Would you please let me know what do I have to change to make following piece of code working?

var

slide;

var expanded = false;

function SetUpAnimation(element) {

element.style.position =

"relative";

if(Telerik.Web.UI.AnimationSettings != null) {
var expandAnimation = new Telerik.Web.UI.AnimationSettings({});

var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

slide = new Telerik.Web.UI.Slide(element, expandAnimation, collapseAnimation, false);

slide.initialize();

slide.set_direction(Telerik.Web.UI.SlideDirection.Up);

}

function ExpandPendingDock(element) {

if(!expanded) {

element.parentNode.style.visibility =

"visible";

element.parentNode.style.display =

"block";

slide.expand();

expanded =

true;

}

function CollapsePendingDock(element) {

if(expanded) {

element.parentNode.style.visibility =

"visible";

element.parentNode.style.display =

"block";

slide.collapse();

expanded =

false;

}

}

Regards,
Venu

Dock

answered on 14 Aug 2009

13 answers

684 views

Dynamic RadDockLayout, RadDockZone and RadDock

I have a need to create ALL 3 of these dynamically/in code please do not just point me to the 'Dynamic RadDock Only' example.....I've tried many different methods and so far all have failed mostly because I think I'm doing something funny in the lifecycle.....Can someone provide me with a quick Clif's Notes/Page Lifecycle path for accomplishing this?

So far dynamic creation is not the problem it is page postbacks and attempting to save the Layout's/Zone's/Dock's that is frustrating me.

Dock

answered on 14 Aug 2009