This is a migrated thread and some comments may be shown as answers.

Unwanted Resize

3 Answers 72 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 10 Oct 2012, 11:08 PM
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.

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 15 Oct 2012, 10:28 AM
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.
0
Matthew
Top achievements
Rank 1
answered on 15 Oct 2012, 02:48 PM
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.
0
Matthew
Top achievements
Rank 1
answered on 16 Oct 2012, 07:05 PM
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;
}
Tags
ListView
Asked by
Matthew
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or