Position radgrid vertical scroll bar on the left side of the grid

[DasNugget]

can this be done?

[Dimo]

Hi DasNugget,

RadGrid scrollbars are automatically moved to the other side if the control is in RTL mode. I suppose you don't want to switch to RTL mode, so here is another tricky way to achieve the same thing:

Add the following CSS rules to your application:


.GridDataDiv_SkinName
{
      direction: rtl;
}

.GridDataDiv_SkinName table
{
     direction: ltr;
}


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[DasNugget]

Thanks, that does work nicely with one caveat:

It's a long, wide grid so i'm using static headers and desire the scroll bar on the left.

But now the static headers are out of alignment with the grid columns by the width of the scroll bar.

Do you have another magic trick to offset the static header by the scroll bar width?

 

[Dimo]

Hello DasNugget,

Yes, I have another magic trick, but as far as I can see, all these hacks do not work very well in all browsers and scenarios. That's why, please remove the previously provided CSS rules and use these:

.MyRadGrid
{
    direction: rtl;
}

.MyRadGrid table
{
     direction: ltr;
}


<telerik:RadGrid  CssClass="MyRadGrid"  />


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dhamodharan]

Hi it is working IE correctly. but firefox is not working in this vertical scroll bar.

Please let me know how to fix this one.

Thanks,
Dhamu.

[Karl]

For anyone who is still interested in this old thread, as I was, the problem lies in forgetting to include the Radgrid's header styles in the css. 

Note, below uses the default skin.  If you are using another skin, you may need to add the "_SkinName" suffix to the name of the divs or, better yet, take two seconds to look at the actual Telerik-generated HTML code (right click your web page and select "view source") and double check.
​
.rgHeaderWrapper
{
direction: rtl;
}

.rgHeaderWrapper table
{
direction: ltr;
}

.rgDataDiv
{
direction: rtl;
}

.rgDataDiv table
{
direction: ltr;
}

[Aruna]

Hi
                   <ClientSettings >
                          <Scrolling AllowScroll="True" UseStaticHeaders="true" />
                    </ClientSettings>

Here i set vertical Scroll in RadGrid,its working fine in Chrome and firefox.but in ie-10 the vertical scroll bar background color is Black.
i want to set the scroll bar background color.Please Reply me soon...

[Pavlina]

Hello,

A possible reason for the described problem could be a RadFormDecorator on the page with Black skin. If this is the cause for the unwanted behaviour please remove the Skin or set the one you use for the RadGrid control.
 
Regards,
Pavlina
Telerik

 

 

[Aruna]

Hi,
          <rad:GridTemplateColumn UniqueName="Qty" AllowFiltering="false" HeaderText="Quantity">
                                <ItemTemplate>
                                    <rad:RadTextBox ID="txtbqty" runat="server" Text='<%# Bind("Qty") %>' BorderColor="White"
                                        BorderStyle="None" Width="100px" autopostback="false"OnTextChanged="txtbqty_Textchanged">
                                    </rad:RadTextBox>                                    
                                </ItemTemplate>
                            </rad:GridTemplateColumn>      here ,how to fire txtbqty_Textchanged event? i used this txtbqty_Textchanged,but it is not working,please help me...

[Konstantin Dikov]

Hello Aruna,

The server-side OnTextChanged event of the RadTextBox will be fired on the first postback that occurs after you change the text. If you need the event to fire after you change the text and after blurring the input element you can set the AutoPostBack property to true:

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" Width="100px">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="Qty" AllowFiltering="false" HeaderText="Quantity">
                <ItemTemplate>
                    <telerik:RadTextBox ID="txtbqty" runat="server" Text='<%# Bind("ID") %>' BorderColor="White"
                        BorderStyle="None" Width="100px" AutoPostBack="true" OnTextChanged="txtbqty_TextChanged">
                    </telerik:RadTextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i);
    }

    (sender as RadGrid).DataSource = table;
}

protected void txtbqty_TextChanged(object sender, EventArgs e)
{

}

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Aruna]

Hi ,

       I have used RadAjaxManager,to avoid flickering in radgrid,Everything works well except When i click on EDIT image button.In Radgrid It suppose to open a radwindow but it is not opening.


           <rad:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/edit2.png" CommandName="EditCol"
                                    UniqueName="editbuttoncolumn" HeaderText="Edit" HeaderStyle-Width="30">
          </rad:GridButtonColumn>

[Konstantin Dikov]

Hello Aruna,

Can you please share you logic for opening the RadWindow for editing, so we can examine it and determine what could be the root of the problem.

Additionally, can you please elaborate on the version that you are currently using?

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik