Increase in group name width

[Pavan Vadlamudi]

I am newbie to telerik controls.  I am currently using RadScheduler control, how do i increase the width of Group by cell name (See the attachment) and see my code below.

<telerik:RadScheduler ID="RadScheduler1" runat="server"
      DataSourceID="SQLDSAppointmentList"
DataKeyField="ID"
DataStartField="StartDate" DataEndField="EndDate"
DataSubjectField="Description"
 Skin="Outlook"
GroupBy ="Inspectors"
 GroupingDirection ="Vertical"
SelectedView="MonthView">


        <ResourceTypes>
            <telerik:ResourceType DataSourceID="SQLDSInspectorList"
                    ForeignKeyField="InspectorID" KeyField="InspectorListID" Name="Inspectors"
                    TextField="InspectorName" />
                <telerik:ResourceType DataSourceID="SQLDSInspectionTaskList"
                    ForeignKeyField="InspectionTaskTypeID" KeyField="ReferenceTypeDetailsID" Name="InspectionTaskTypes"
                    TextField="Name" />

        </ResourceTypes>

    </telerik:RadScheduler>
    </div><br />
    <div>
        <asp:Button ID="ButtonAddNonInspectionTaskTypeList" runat ="server" Text ="Add Non-InspectionTask" />
    </div>
    <asp:SqlDataSource
        ID="SQLDSInspectorList"
        runat="server"
        ConnectionString="<%$ ConnectionStrings:SQLConnectionString %>"
         SelectCommand ="SELECT IL.InspectorListID ,IL.UserInfo_tp_Title AS InspectorName
                FROM RSS.InspectorList IL WHERE IL.InspectorListID = 14"
        >
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SQLDSInspectionTaskList" runat ="server"
         ConnectionString ="<%$ ConnectionStrings:SQLConnectionString %>"
          SelectCommand ="SELECT
 RTD.ReferenceTypeDetailsID
 ,RTD.Name
FROM RSS.ReferenceTypeDetails RTD
INNER JOIN RSS.ReferenceTypes RT
ON RT.ReferenceTypeID = RTD.ReferenceTypeID
WHERE RT.Name = 'InspectionTaskTypes'"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SQLDSAppointmentList" runat ="server"
      ConnectionString ="<%$ ConnectionStrings:SQLConnectionString %>"
       SelectCommand ="SELECT [ID]
      ,[StartDate]
      ,[EndDate]
      ,[InspectorID]
      ,[InspectionTaskTypeID]
      ,[Description]
  FROM vw_InspectionTaskAppointmentsAll">
</asp:SqlDataSource>

[T. Tsonev]

Hi Pavan,

Thank you for the detailed problem description. You should try setting the RowHeaderWidth property. Using pixels works best.

<telerik:RadScheduler ... RowHeaderWidth="150px" />

I hope this helps.

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Pavan Vadlamudi]

Hi Tsonev,

thanks for the response, i tried that property as you suggested but no luck no change in its appearence.    I am also using AppointmentDataBound event (please see code below) i dont think that will impact the width of group name or is it?

Private Sub RadScheduler1_AppointmentDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.SchedulerEventArgs) Handles RadScheduler1.AppointmentDataBound
        If e.Appointment.Resources.GetResourceByType("InspectionTaskTypes") <> Nothing Then

            Select Case e.Appointment.Resources.GetResourceByType("InspectionTaskTypes").Text

                Case "case 1"
                    e.Appointment.CssClass = "rsCategoryDarkGreen"
                    Exit Select
                Case "case 2"
                    e.Appointment.CssClass = "rsCategoryDarkGreen"
                    Exit Select
                Case "case 3"
                    e.Appointment.CssClass = "rsCategoryDarkGreen"
                    Exit Select
                Case "case 4"
                    e.Appointment.CssClass = "rsCategoryDarkRed"
                    Exit Select
                Case Else
                    Exit Select
            End Select

        End If
    End Sub

    <telerik:RadScheduler ID="RadScheduler1" runat="server"
      DataSourceID="SQLDSAppointmentList"
DataKeyField="ID"
DataStartField="StartDate" DataEndField="EndDate"
DataSubjectField="Description"
 Skin="Outlook"
GroupBy ="Inspectors"
 GroupingDirection ="Vertical"
SelectedView="MonthView" RowHeaderWidth="200px">
....
</telerik:RadScheduler>

any help appritiated

Thanks,

[Peter]

Hi Pavan,

It looks like RowHeaderWidth does not work for Month view. I will log the issue, but meanwhile you can use the following css workaround:

.rsVerticalHeaderTable
   {
       width: 200px !important;
   }

Greetings,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Pavan Vadlamudi]

Thanks Peter,

That definitely increased the width of Group name cell aligned to right doesn’t display full name.   Even if you change text-align property to left it crops letters.  After hit and miss the following CSS fixed the issue.

 

.rsMainHeader div

        {WIDTH: 150px !important; TEXT-ALIGN: left !important;}

 

Issue is now resolved and thanks for all your help.

[Ghezzo]

Hi i have same problem, i guess your solution could work, just a question..WHERE shd i apply :

.rsMainHeader div
        {WIDTH: 150px !important; TEXT-ALIGN: left !important;}

 

Thank

Maurizio Brusini

[Ivan Danchev]

Hello Maurizio,

This is a standard  CSS rule so you can add it inside the "styles" tags in your page markup:

<style type="text/css">
    .rsMainHeader div {
        width: 150px !important;
        text-align: left !important;
    }
</style>

Regards,
Ivan Danchev
Telerik

[Ghezzo]

Yes Ivan, what i dont know is the connection from .rsMainHeader and the RadSchedular.

Notice that i dont use Appointment so i cant write code like example above.

best regards

Maurizio

[Ivan Danchev]

Hello Maurizio,

The "rsMainHeader" is the class of the tr element shown in this screenshot. It appears if you set the Scheduler's GroupingDirection to vertical. You can see it in our Resource Grouping demo.

Regards,
Ivan Danchev
Telerik

[Ghezzo]

Hi Ivan, ty for your explanation but i still dont know where apply "rsMainHeader".

Follow my simple RadSchedular.

 <telerik:RadScheduler ID="RadScheduler1" runat="server" Skin="Office2010Black" RenderMode="Lightweight"
            AppointmentStyleMode="Default"
            DataSourceID="ObjSked"
            DataKeyField="cod_edificio"
            DataStartField="dal" DataEndField="al"
            DataSubjectField="evento"
            WorkWeekStart = "DayOfWeek.Monday"
            WorkWeekEnd = "DayOfWeek.Saturday"
            ShowAllDayRow="False"
            HoursPanelTimeFormat="HH:mm"
            TimeLabelRowSpan ="1"
            OverflowBehavior="Auto"
            DayEndTime="20:30:00"       
            FirstDayOfWeek="Monday"
            ShowFooter="False"
            AllowDelete="False" AllowEdit="False" AllowInsert="False"
            WeekView-UserSelectable="false" DayView-UserSelectable="TRUE"
            Culture="it-IT"
            MonthView-UserSelectable="false"
            TimelineView-UserSelectable="true"
            TimelineView-NumberOfSlots="24"
            TimelineView-SlotDuration="00:30:00"
            TimelineView-TimeLabelSpan="1"
            RowHeaderWidth="100px"  
            RowHeight="30px"
            TimelineView-ColumnHeaderDateFormat="HH:mm"
            TimelineView-StartTime="08:00:00"
            TimelineView-GroupBy="Aule"
            TimelineView-GroupingDirection="Vertical"
            AgendaView-UserSelectable="false" DayView-GroupBy="Aule"  
            WorkDayEndTime="20:30:00" Height="" Font-Size="X-Small">
                        
            <AdvancedForm Modal="True"></AdvancedForm>

           <ResourceTypes>
                <telerik:ResourceType KeyField="cod_ris_fissa" Name="Aule" TextField="des_ris_fissa" ForeignKeyField="cod_ris_fissa"
                   DataSourceID="ObjectDataSource1"></telerik:ResourceType>
            </ResourceTypes>
     </telerik:RadScheduler>

 

      Is it. so where apply that css class?

     thanks

   Best regards

    Maurizio Brusini

 

[Ivan Danchev]

Hello Maurizio,

I am not sure I understand your question correctly. The "rsMainHeader" class is added automatically to the tr elements if vertical grouping direction is set (as I've shown in the screenshot in my previous reply). I see that you have already enabled vertical grouping for the TimelineView (by setting the TimelineView-GroupingDirection="Vertical" property), so you have to do the same for the other views you are using, the DayView for example: DayView-GroupingDirection="Vertical". You don't need to add the class yourself, you just have to add the CSS rule.

Regards,
Ivan Danchev
Telerik

[Ghezzo]

Oh i finally understand what u mean, sorry for my poor english.

Anyway if so in my case "text-align:left !important" DONT work. Is opposite the text is right aligned. take a look to the attached file.

best regards

Maurizio

[Ivan Danchev]

Hello Maurizio,

Are you applying any other similar CSS rules, because if the text-align style is not being applied this could indicate other rules might be overriding it. Could you inspect the element with class rsMainHeader in the browser's developer tools and check whether the two styles (width and text-align) are applied and then overridden by other styles?
 
Regards,
Ivan Danchev
Telerik