This is a migrated thread and some comments may be shown as answers.

Change mouse style on mouse over

9 Answers 214 Views
Grid
This is a migrated thread and some comments may be shown as answers.
peter
Top achievements
Rank 1
peter asked on 23 Mar 2010, 11:01 PM
Hi everybody,
I want to change my mouse cursor from a beam into a pointing hand (or something like that) when i hover over the rows of the grid, so the user knows he can click on the row to get more info... Saw some C# code, but could not get it to work. I work in VB.NET.

Cheers, Peter.

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 24 Mar 2010, 08:53 AM
Hi Peter,

For changing cursor style on hovering the row, you can override the .rgRow and .rgAltRow styles. Add the CSS on page.

CSS:
<style type="text/css">  
.RadGrid_Default .rgRow  
{  
    cursor: hand !important;  
}  
.RadGrid_Default .rgAltRow  
{  
    cursor: hand !important;  
}  
</style>  

-Shinu
0
peter
Top achievements
Rank 1
answered on 24 Mar 2010, 04:36 PM
Thanks for the reply, I will give it go and get back.

0
peter
Top achievements
Rank 1
answered on 24 Mar 2010, 08:42 PM
Hi Shinu.,
I am not sure where to put this code. I can see the style sheets for the telerik radgrid, but if I select, go to code, i dont end up in the style sheet code. Mmm strange. I just dont understand where the style sheet of the telerik rg is defined. Sorry, could u explane?
0
peter
Top achievements
Rank 1
answered on 24 Mar 2010, 08:47 PM
Hang on... Trying something....
0
Foenix
Top achievements
Rank 1
answered on 24 Mar 2010, 08:50 PM
Check this

Hint: Read carefully "Getting started"
0
peter
Top achievements
Rank 1
answered on 24 Mar 2010, 09:04 PM
Hi Shinu,
Added the code to the webpage, but no luck. Here is my code:

<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="OverviewAdmin.aspx.vb" Inherits="OverviewAdmin" %> 
 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
 
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"
 
<style type="text/css">   
.RadGrid_Default .rgRow   
{   
    cursor: hand !important;   
}   
.RadGrid_Default .rgAltRow   
{   
    cursor: hand !important;   
}   
 
 
 
</style> 
   
</asp:Content> 
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"
 
 
     
     
    <asp:HiddenField ID="txtColumnName" runat="server" /> 
 
  
 
<script language="javascript"
 
    
    function getColumnCliecked(un) { 
 
        // Save the un in a HiddenField if want to access from server side 
        document.getElementById('<%= txtColumnName.ClientID %>').value = (un); 
    }  
     
 </script>    
   
 
 
 
 
    
    <telerik:RadGrid ID="RadGrid1" runat="server"  
    AutoGenerateColumns="False"  
    DataSourceID="ObjectDataSource1"  
    GridLines="None"  
    Skin="Outlook"  
    AllowPaging="True" AllowSorting="True" CssClass="RadComboBox"  
        style="margin-top: 0px"
         
 
        <AlternatingItemStyle BackColor="#FFFFCC" /> 
 
<MasterTableView DataKeyNames="ApartmentID" DataSourceID="ObjectDataSource1"
<RowIndicatorColumn> 
<HeaderStyle Width="20px"></HeaderStyle> 
</RowIndicatorColumn> 
 
<ExpandCollapseColumn> 
<HeaderStyle Width="20px"></HeaderStyle> 
</ExpandCollapseColumn> 
<Columns> 
        <telerik:GridImageColumn AllowFiltering="False" AllowSorting="False"  
            DataImageUrlFields="ApartmentPhotoPath" Groupable="False"  
            ImageAlign="AbsMiddle" ImageHeight="60px" ImageWidth="75px" Reorderable="False"  
            ShowSortIcon="False" UniqueName="column1"
            <HeaderStyle Width="75px" /> 
            <ItemStyle Width="75px" HorizontalAlign="Center" VerticalAlign="Middle"  
                Wrap="False" /> 
        </telerik:GridImageColumn> 
        <telerik:GridBoundColumn DataField="ApartmentName"  
            SortExpression="ApartmentName" UniqueName="ApartmentName"  
            AllowSorting="False"
            <HeaderStyle Width="100px" /> 
            <ItemStyle Font-Bold="True" Font-Size="9pt" VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentDescriptShort"  
            HeaderText="Omschrijving" UniqueName="column"  
            HeaderTooltip="Omschrijving van het object" MaxLength="175"  
            AllowSorting="False"
            <HeaderStyle Width="200px" /> 
            <ItemStyle VerticalAlign="Top" Height="50px" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentPersonsQuant"  
            HeaderText="Prs." HeaderTooltip="Aantal Personen waarvoor het geschikt is"  
            UniqueName="column3"
            <HeaderStyle Width="15px" /> 
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentBedroomQuant" HeaderText="Sl."  
            HeaderTooltip="Aantal Slaapkamers" UniqueName="column5"
            <HeaderStyle Width="15px" /> 
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentPricePdHs"  
            DataFormatString="€ {0}" HeaderText="Prijs (HS)"  
             
            HeaderTooltip="Prijs per dag in het hoogseizoen"  
            UniqueName="column7"
            <HeaderStyle Width="40px" /> 
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentPricePdLs"  
            DataFormatString="€ {0}" HeaderText="Prijs (LS)"  
            HeaderTooltip="Prijs accomodatie per dag in het laagseizoen; klik hier om op deze kolom te sorteren"  
            UniqueName="column6"
            <HeaderStyle HorizontalAlign="Center" Width="40px" /> 
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentExtraCostShort"  
            HeaderText="Extra Kosten"  
            HeaderTooltip="Extra bijkomende kosten"  
            UniqueName="column2" AllowSorting="False"
            <HeaderStyle Width="100px" /> 
            <ItemStyle VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentViewQuant" HeaderText="Gezien"  
            HeaderTooltip="Aantal keren dat dit object bekeken is"  
            UniqueName="ApartmentViewQuant"
            <HeaderStyle HorizontalAlign="Center" Width="20px" /> 
            <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridBoundColumn DataField="ApartmentLocation" HeaderText="Locatie"  
            UniqueName="column4"
            <HeaderStyle Width="50px" /> 
            <ItemStyle VerticalAlign="Top" /> 
        </telerik:GridBoundColumn> 
        <telerik:GridButtonColumn CommandName="Delete" HeaderText="Delete"  
            Resizable="False" Text="Delete" UniqueName="Delete"
            <HeaderStyle Width="20px" /> 
        </telerik:GridButtonColumn> 
        <telerik:GridButtonColumn ConfirmDialogType="RadWindow" HeaderText="Edit"  
            Text="Edit" UniqueName="Edit2" CommandName="Something"
            <HeaderStyle Width="20px" /> 
        </telerik:GridButtonColumn> 
    </Columns></MasterTableView
        <ClientSettings EnablePostBackOnRowClick="true" 
        EnableRowHoverStyle="true"
                    <Selecting AllowRowSelect="True" /> 
                     
        </ClientSettings> 
    </telerik:RadGrid> 
     
    <br /> 
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"  
        DeleteMethod="Delete" InsertMethod="Insert"  
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetApartments"  
        TypeName="ApartmentsTableAdapters.ApartmentsTableAdapter" UpdateMethod="Update"
        <DeleteParameters> 
            <asp:Parameter Name="Original_ApartmentID" Type="Int32" /> 
        </DeleteParameters> 
        <UpdateParameters> 
            <asp:Parameter Name="ApartmentName" Type="String" /> 
            <asp:Parameter Name="ApartmentDescript" Type="String" /> 
            <asp:Parameter Name="ApartmentAddress" Type="String" /> 
            <asp:Parameter Name="ApartmentEmail" Type="String" /> 
            <asp:Parameter Name="ApartmentRegion" Type="String" /> 
            <asp:Parameter Name="ApartmentPhotoPath" Type="String" /> 
            <asp:Parameter Name="ApartmentPricePdLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePwLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePmLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePdHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePwHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePmHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePY" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPersonsQuant" Type="Int16" /> 
            <asp:Parameter Name="ApartmentBedroomQuant" Type="Int16" /> 
            <asp:Parameter Name="ApartmentType" Type="String" /> 
            <asp:Parameter Name="AparmentExtras" Type="String" /> 
            <asp:Parameter Name="ApartmentRating" Type="Decimal" /> 
            <asp:Parameter Name="Original_ApartmentID" Type="Int32" /> 
        </UpdateParameters> 
        <InsertParameters> 
            <asp:Parameter Name="ApartmentName" Type="String" /> 
            <asp:Parameter Name="ApartmentDescript" Type="String" /> 
            <asp:Parameter Name="ApartmentAddress" Type="String" /> 
            <asp:Parameter Name="ApartmentEmail" Type="String" /> 
            <asp:Parameter Name="ApartmentRegion" Type="String" /> 
            <asp:Parameter Name="ApartmentPhotoPath" Type="String" /> 
            <asp:Parameter Name="ApartmentPricePdLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePwLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePmLs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePdHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePwHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePmHs" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPricePY" Type="Decimal" /> 
            <asp:Parameter Name="ApartmentPersonsQuant" Type="Int16" /> 
            <asp:Parameter Name="ApartmentBedroomQuant" Type="Int16" /> 
            <asp:Parameter Name="ApartmentType" Type="String" /> 
            <asp:Parameter Name="AparmentExtras" Type="String" /> 
            <asp:Parameter Name="ApartmentRating" Type="Decimal" /> 
        </InsertParameters> 
    </asp:ObjectDataSource> 
    <br /> 
    <br /> 
    <br /> 
</asp:Content> 
 

0
peter
Top achievements
Rank 1
answered on 24 Mar 2010, 09:15 PM
Thanks Foenix,
You are right, I am total beginner and could use some reading.
0
Stacy
Top achievements
Rank 1
answered on 24 Mar 2010, 10:00 PM
Hey Peter,

One additional side note from a web dev perspective, if you use IE8 there are a bunch of good developer tools that can help you walk through the styles on the screen to drill down to exactly what style to modify. You simply hit F12 and then CTRL+B, click on the style in question and then start messing around.  You can't break anything.  If you use Firefox, install the extension called "FireBug" and if you use another browser, they all pretty much come with some dev tools.

One additional resource for ya, http://w3schools.com/css/default.asp

Hope you find this helpful and not too simple for ya!  :D

Stacy
0
peter
Top achievements
Rank 1
answered on 25 Mar 2010, 02:11 PM
Thanks Stacey for the additional information. Very kind.
Regards, Peter.
Tags
Grid
Asked by
peter
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
peter
Top achievements
Rank 1
Foenix
Top achievements
Rank 1
Stacy
Top achievements
Rank 1
Share this question
or