ItemStyle-Wrap and Vertical Scroll bar

[Antony]

Hi,

I was binding my RADGrid on the server and I had set ItemStyle-Wrap to false; this worked perfectly. I am now binding my data on the client instead - I'm not mixing the two - and I can't seem to get ItemStyle-Wrap to work as it did. I'm guessing that the <ItemStyle> tag only works on server-side so my question is, how can I achieve the same thing on the client? NB. I've tried using <nobr> in the DataFormatString attribute but

1] it didn't work
2] I want the column width to be fixed

Scrollbars
My RadGrid is contained within a splitter pane. The vertical scroll bar does not initially show after data has been bound, it only becomes visible after I hover my mouse over the splitter bar of the splitter control the grid is contained in. i.e. in order to get the scroll bar to show I have to hover my mouse over the splitter bar.

My data is fetched from a webservice

function getSearch(id)

{

if(id.indexOf('str') > -1)

{

PAB3.GetSearch(id.replace('str',''),7,1,SucceededGetSearch_Callback,null,id);

}

}

function SucceededGetSearch_Callback(result,id)

{

alert(result);

var grContent = $find('<%= grContent.ClientID %>');

if(!grContent) return;

var masterTable = grContent.get_masterTableView();

if(!masterTable) return;

masterTable.set_dataSource(result);

masterTable.dataBind();

// we have one radgrid and mulitple tabs         // each time a tab is selected the data for that tab         // is loaded into the grid and the scrollbar position that was         // saved the last time the user was on the selected tab is retrieved         var scrollPos = GetSetting(id + 'Scroll');

if(scrollPos == null) scrollPos = 1;

document.getElementById('<%= grContent.ClientID%>_GridData').scrollTop = scrollPos;

}

function grContent_RowDataBound(sender, args)

{

args.get_item().get_cell("Title").innerHTML = args.get_dataItem()["Heading"];

args.get_item().get_cell("ContentType").innerHTML = args.get_dataItem()["TypeCode"].Name;

var isRead = args.get_dataItem()["Reading"];

var imgFlag = args.get_item().get_cell("Flag");

var id = args.get_dataItem()["ID"];

var img = document.createElement('img');

img.onmouseover = flagButton_Over;

img.onmouseout= flagButton_Out;

img.onclick= flagButton_Click;

img.id = id;

if(isRead)

{

img.src = "../Images/noFlag.png";

}

else

{

img.src = "../Images/flag2.png";

}

imgFlag.appendChild(img);

}

<telerik:RadGrid ID="grContent" runat="server"
                 Skin="Pab3" EnableEmbeddedSkins="false" GridLines="None" Width="100%" Height="100%" >
                    <MasterTableView AutoGenerateColumns="false" ShowHeadersWhenNoRecords="true" EnableNoRecordsTemplate="true" TableLayout="Fixed" ClientDataKeyNames="ID" DataKeyNames="ID" Width="100%">

                        <Columns>

                            <telerik:GridBoundColumn UniqueName="Flag" HeaderStyle-Wrap="false" HeaderStyle-Width="5%"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Title" HeaderText="Title" HeaderStyle-Wrap="false" HeaderStyle-Width="35%"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="ContentType" HeaderText="Content Type" HeaderStyle-Wrap="false" HeaderStyle-Width="35%"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Date" HeaderText="Date" HeaderStyle-Wrap="false" HeaderStyle-Width="15%"></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="False" AllowRowsDragDrop="true">
                        <Resizing AllowColumnResize="true" EnableRealTimeResize="false"
                        ResizeGridOnColumnResize="true" ClipCellContentOnResize="true" />
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="1" />
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />
                        <ClientEvents OnRowDragStarted="grContent_RowDragStarted"
                                      OnRowDropping="grContent_RowDropping"
                                      OnRowClick="grContent_RowClick"
                                      OnCommand="grContent_Command"
                                      OnRowDataBound="grContent_RowDataBound" />
                    </ClientSettings>

                </telerik:RadGrid>

Thanks in advance!

Antony

[Nikolay Rusev]

Hello Antony,

I am afraid that I am not able to replicate the issue locally. I suggest you to create small runnable application which demonstrate the problem and send it to us via formal support ticket. Thus we'll be able to debug it locally and help you more on the issue which you are currently facing.

Kind regards,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Antony]

Hi.

I've managed to solve the problem. As I'm not using the dataBind() function the DataFormatString attribute would not work. The code below, however, did.

var rowCell = masterTable.getCellByColumnUniqueName(rowDataItem,'Title');
rowCell.innerHTML = '<nobr>' + result[i].Heading + '</nobr>';

Thanks,

Antony