Unwanted Resize

4 posts, 0 answers
  1. Matthew
    Matthew avatar
    51 posts
    Member since:
    Oct 2012

    Posted 10 Oct 2012 Link to this post

    I'm using the ItemTemplate. In the template I have one user control which consists of a button and another control. The button controls the visibility of the other control. Not every instance of this user control is the same size. When the controls are initially hidden, clicking the buttons will reveal their respective controls as desired. However, when any of the controls are not initially hidden, the list view sizes all it's items to the potentially largest control whether or not that control is hidden. Any ideas why this would be occuring and how I can work around it? Thanks.
  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 15 Oct 2012 Link to this post

    Hi Matthew,

    This isn't the default RadListView behavior, it does not apply sizing of its own to the elements. So, the reason should be somewhere in the templates declaration and/or styling. To be able to help you, we would need your RadListView declaration and any styles applied, so we can replicate and inspect the problem.

    Kind regards,
    Tsvetina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew
    Matthew avatar
    51 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    Here's the declaration:
    <asp:Panel runat="server" Width="100%" style="position: relative; top: -2px">
        <telerik:RadListView runat="server" DataSourceID="ldsTeams" Width="100%">
            <ItemTemplate>
                <asp:Panel runat="server" style="margin-top: 2px">
                    <scinet:TeamScheduler runat="server" TeamID='<%# int.Parse(Eval("EmployeeTeamID").ToString()) %>' />
                </asp:Panel>
            </ItemTemplate>
        </telerik:RadListView>
    </asp:Panel>

    Here's the user control:
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Panel ID="pnl" runat="server" CssClass="customRSHeader">
                <button id="btn" type="button" runat="server" onserverclick="lb_Click">
                    <asp:Label ID="lbl" runat="server" />
                </button>
            </asp:Panel>
            <telerik:RadScheduler ID="rsTeamToday" runat="server" AllowDelete="false" AllowEdit="false" AllowInsert="false"
                    ShowFooter="false" ShowHeader="false" ShowResourceHeaders="false" SelectedView="TimelineView"
                    OverflowBehavior="Expand" Visible="false" DataSourceID="ldsSchedules" DataKeyField="ScheduleID"
                    DataStartField="ScheduleStartDate" DataEndField="ScheduleEndDate" DataSubjectField="EmployeeName"
                    DataRecurrenceField="ScheduleRecurrenceRule" DataRecurrenceParentKeyField="ScheduleRecurrenceParentID"
                    OnTimeSlotCreated="rsTeamToday_TimeSlotCreated" OnAppointmentDataBound="rsTeamToday_AppointmentDataBound"
                    OnDataBound="rsTeamToday_DataBound" RowHeight="20px">
                <TimelineView GroupBy="Employee" GroupingDirection="Vertical" ReadOnly="true" ShowInsertArea="false"
                    StartTime="08:00:00" SlotDuration="00:15:00" NumberOfSlots="36" TimeLabelSpan="4"
                    ColumnHeaderDateFormat="h tt" EnableExactTimeRendering="true" />
                <ResourceTypes>
                    <telerik:ResourceType KeyField="EmployeeID" Name="Employee" TextField="EmployeeID"
                        ForeignKeyField="ScheduleEmployeeID" DataSourceID="ldsEmployees" />
                    <telerik:ResourceType KeyField="ScheduleActivityTypeID" Name="Activity" TextField="ScheduleActivityTypeName"
                        ForeignKeyField="ScheduleActivityTypeID" DataSourceID="ldsActivityTypes" />
                </ResourceTypes>
                <ResourceStyles>
                    <telerik:ResourceStyleMapping Type="Activity" Text="Work" ApplyCssClass="WorkSchedule" />
                    <telerik:ResourceStyleMapping Type="Activity" Text="Sick" ApplyCssClass="SickSchedule" />
                    <telerik:ResourceStyleMapping Type="Activity" Text="Vacation" ApplyCssClass="VacationSchedule" />
                    <telerik:ResourceStyleMapping Type="Activity" Text="Extended Leave of Absence" ApplyCssClass="OffSiteSchedule" />
                </ResourceStyles>
            </telerik:RadScheduler>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btn" />
        </Triggers>
    </asp:UpdatePanel>
    The associated data sources are indeed there and working. The user control is auto-wired.

    Here's some of the code-behind for the user control in case this is to blame:
    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lbl.Text = TeamID == 0 ? "Full-Timers" : (from team in dbContext.EmployeeTeams
                                                      where team.EmployeeTeamID == TeamID
                                                      select team).Single().EmployeeTeamName;
     
            string pref = PreferenceUtility.GetPreferenceValue("TeamTodaySchedulersExpanded", dbContext, Profile);
            if (!String.IsNullOrEmpty(pref) && pref.Split(',').Contains(TeamID.ToString())) lb_Click(sender, e);
        }
    }
     
    protected void lb_Click(object sender, EventArgs e)
    {
        if (rsTeamToday.Visible = !rsTeamToday.Visible) rsTeamToday.Rebind();
        if (pnl.CssClass == "customRSHeader") pnl.CssClass = "customRSHeaderPressed";
        else pnl.CssClass = "customRSHeader";
        if (IsPostBack) savePreference();
    }

    Here's my CSS:
    .customRSHeader button
    {  
        border: 1px solid #C3D6E5;
        background: white;
                 
        color: #336699;
        display: block;
        font-size: 15px;
        font-weight: normal;
        height: 25px;
        overflow: hidden;
        text-align: left;
        text-indent: 5px;
        width: 100%;
    }
             
    .customRSHeaderPressed button
    {  
        border: 1px solid #A9CCE8;
        background: #A9CCE8;
                 
        color: white;
        display: block;
        font-size: 15px;
        font-weight: 500;
        height: 25px;
        overflow: hidden;
        text-align: left;
        text-indent: 5px;
        width: 100%;
    }
             
    .customRSHeader button:hover
    {
        background: #A9CCE8;
        border: 1px solid #A9CCE8;
        color: white;
        font-weight: 500;
    }
     
    /* TeamToday Schedulers CSS */
    .RadScheduler .rsTopWrap .rsContent
    {
        border: 1px solid #A9CCE8;
    }
     
    .rsInnerFix .rsHorizontalHeaderTable th
    {
        border: 1px solid #A9CCE8;
        border-right-style: none;
    }
     
    .rsHorizontalHeaderWrapper div
    {
        width: auto;
    }
     
    .rsHorizontalHeaderTable
    {
        border: 1px solid #A9CCE8;
        border-top-style: none;
        height: 21px;
    }
     
    .rsHorizontalHeaderTable tr:first-child th
    {
        padding: 0px;
        border: 1px solid #A9CCE8;
        border-right-style: none;
        border-top-style: none;
    }
     
    .rsHorizontalHeaderTable tr th:first-child
    {
        border-left-style: none;
    }
     
    .rsHorizontalHeaderTable tr th:last-child
    {
        border-right-style: none;
    }
     
    th
    {
        border: 1px solid #A9CCE8;
    }
             
    .rsInnerFix tr th div
    {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
         
        font: 12px/20px Corbel,Verdana,Tahoma,Helvetica,Geneva,Arial,sans-serif;
         
        position: static;
        text-align: center;
        padding-top: 0px;
        height: 20px;
    }
     
    .rsHidden { display: none; }
     
    .rsContentWrapper .rsContentScrollArea .rsAllDayTable .rsAllDayRow
    {
        height: 20px;
    }
     
    .rsContentScrollArea .rsAllDayTable .rsAllDayRow td
    {
        border: 1px solid #A9CCE8;
        border-top-style: none;
        border-right-style: none;
    }
     
    .rsContentScrollArea .rsAllDayTable .rsAllDayRow .rsLastCell
    {
        border-right: 1px solid #A9CCE8;
    }
     
    .rsAptIn .rsAptContent .rsAptRecurrence
    {
        display: none;
    }

    Which should be overriding most if not all of this higher level stuff:
    .rsHorizontalHeaderTable tr th
    {
        background: #e0edf9 !important;
        position: relative;
        overflow: visible;
    }
     
    .rsHorizontalHeaderTable tr th div
    {
        writing-mode: tb-rl;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        font-weight: normal;
        width: 38px;
        text-transform: uppercase;
        font: 11px/47px Corbel,Verdana,Tahoma,Helvetica,Geneva,Arial,sans-serif;
        position: relative;
        top: 15px;
        left: -19px;
        letter-spacing: 0.5px;
        text-align: left;
        padding-top: 36px;
        display: inline-block;
        white-space: nowrap;
    }
     
    .rsHorizontalHeaderTable tr:first-child th
    {
        padding: 5px 0;
    }
     
    .rsVerticalHeaderWrapper
    {
        position: absolute;
    }

    Thank you for looking into it. Let me know if there's anything else I can do.
  5. Matthew
    Matthew avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    I still don't know why it's doing it, but I've countered it with this work around:
    .rsContentWrapper .rsContentScrollArea .rsAllDayTable .rsAllDayRow
    {
        height: 20px !important;
    }
Back to Top