RadGrid - remove fixed width

[Andrew]

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

 

[Konstantin Dikov]

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