RadGrid - remove fixed width

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Mar 2015

    Posted 03 Sep 2015 Link to this post

    Hi, 

    Currently we're using RadGrid in conjunction with the Scheduler as an "Event Picker" so the user can drag and drop onto the schedule. 

    The problem I'm facing is with the length of these events in the RadGrid. We're using Bootstrap for our responsive design framework.

     Here is our RadGrid

    <div class="col-sm-7 col-md-5 col-lg-4 hidden-print" id="event-types-list-container">
                <div id="event-types-list">
                    <telerik:RadGrid runat="server" ID="EventTypesRadGrid"
                        GridLines="None"
                        AutoGenerateColumns="False"
                        AllowAutomaticInserts="True" AllowAutomaticUpdates="true"
                        ShowFooter="false" AllowScroll="true" AllowSorting="false"
                        onitemdatabound="EventTypesRadGrid_ItemDataBound">
                        <clientsettings allowrowsdragdrop="True">
                            <Selecting AllowRowSelect="True" />
                            <ClientEvents OnRowDropping="Sch_AppointmentDropped" />
                        </clientsettings>                   
                        <mastertableview datakeynames="ScheduleEventTypeID" insertitemdisplay="Bottom" editmode="InPlace" ClientDataKeyNames="ScheduleEventTypeID">
                            <SortExpressions>
                                <telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" />
                            </SortExpressions>
                            <Columns>
                                <telerik:GridTemplateColumn DataField="Subject" HeaderText="Event Types">
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="NameLabel" Text='<%# Bind("Name") %>' CssClass="schedule-appointment-title events-container-appointment"></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle CssClass="draggable" />
                                </telerik:GridTemplateColumn>
                            </Columns>
                        </mastertableview>
                    </telerik:RadGrid>
                </div>
              
            </div>

     
    See RadGrid-1.jpg attachment.

     

    The problem is the RadGrid is adding an inline style to itself of 390px (the width of the longest "event"). I've tried to override the styles with inline width: 170px for testing but to no success. 

    Is there a way to make the RadGrid obey the width of its parent and wrap the text of the "events" / rows

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Sep 2015 Link to this post

    Hi Andrew,

    With the setup that you have I was not able to replicate a behavior where the grid is setting a width of its wrapping DIV element, nor to the tables. Following is the example that I have tested locally:
    <style>
        .itemStyle td span{
            word-break: break-all;
        }
    </style>
     
    <div id="event-types-list" style="width: 5%;">
            <telerik:RadGrid runat="server" ID="EventTypesRadGrid"
                GridLines="None"
                AutoGenerateColumns="False"
                AllowAutomaticInserts="True" AllowAutomaticUpdates="true"
                ShowFooter="false" AllowScroll="true" AllowSorting="false"
                 OnNeedDataSource="EventTypesRadGrid_NeedDataSource">
                <clientsettings allowrowsdragdrop="True">
                    <Selecting AllowRowSelect="True" />
                </clientsettings>                  
                <ItemStyle CssClass="itemStyle"/>
                <AlternatingItemStyle CssClass="itemStyle" />
                <mastertableview datakeynames="ScheduleEventTypeID" insertitemdisplay="Bottom" editmode="InPlace" ClientDataKeyNames="ScheduleEventTypeID">
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" />
                    </SortExpressions>
                    <Columns>
                        <telerik:GridTemplateColumn DataField="Subject" HeaderText="Event Types">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="NameLabel" Text='<%# Bind("Name") %>' CssClass="schedule-appointment-title events-container-appointment"></asp:Label>
                            </ItemTemplate>
                            <ItemStyle CssClass="draggable" />
                        </telerik:GridTemplateColumn>
                    </Columns>
                </mastertableview>
            </telerik:RadGrid>
        </div>

    And the dummy data:
    protected void EventTypesRadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ScheduleEventTypeID", typeof(int));
        table.Columns.Add("Name", typeof(string));
        for (int i = 0; i < 50; i++)
        {
            table.Rows.Add(i, "FirstNameFirstNameFirstNameFirstName" + i);
        }
     
        (sender as RadGrid).DataSource = table;
    }

    Nevertheless, if the container holding the RadGrid has a specified width, you can set the Width property of the grid to "100%" and use the CSS for the items from the above example, which should wrap long words.

    Please give this a try and let me know if everything works correctly on your side too.


    Regards,
    Konstantin Dikov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top