[Solved] Modifying Custom Skin

[Anu]

Hi,

I am trying to modify the custom skin applied to my radgrid. I have tried the steps in
 http://blogs.telerik.com/DimoDimov/Posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx?ReturnURL=%2fDimoDimov%2fPosts.aspx

In my case, I am using vista as the skin and want to modify the selected row property.

.SelectedRow_vista{}
is modified to
div.SelectedRow_vista{}

However, I still get the same old stying applied to my radgrid.  Can someone help me please?

kind regards,

Anu

[Dimo]

Hi Anu,

1. CSS classes are case sensitive. Are you sure that your skin name is "vista" and not "Vista" ?

2. table rows are "tr" elements, not "div" elements. You need to use tr.SelectedRow_SkinName

3. Depending on your RadGrid version, you may need to use

div.RadGrid_SkinName  .rgSelectedRow
{
      /*Q1 2009 and newer*/
}

instead of

tr.SelectedRow_SkinName
{
       /*Q3 2008 and older*/
}


http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

Let us know if you need more information.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Anu]

Dimo,

Thank you very much. I changed it to tr and worked fine. How do I find out whether something is div or tr? any documentation anywhere?

I have a similar issue with radmenu. I am trying to highlight the selected item using the code below.

 

function pageLoad()

 

{

 

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

 

 

var href = window.location.href;

 

 

var index = href.lastIndexOf('/');

 

 

var pageURL = href.substring(index + 1);

 

 

 

var items = menu.get_items();

 

 

var item = null;

 

 

for(var i = 0; i < items.get_count(); i++)

 

{

 

if (items.getItem(i).get_navigateUrl() == pageURL)

 

{

item = items.getItem(i);

 

break;

 

}

 

}

 

if (item)

 

{

 

while (item != menu)

 

{

 

var element = item.get_linkElement();

 

element.className +=

'rmFocused';

 

item = item.get_parent();

}

}

}

For my selected rad menu skin (Telerik), the rmFocused does not hightlight it any way and I am trying to modify this. I am not sure how to achieve this. Can you help me on this as well please?

Thanks again,

Anu

[Kamen Bundev]

Hi Anu,

For some controls we provide the HTML elements in addition to the CSS classes, for example:

http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html

However, the easiest and fastest way is to simply check the generated HTML code in the browser. You can also use a web developer tool such as Firebug, as mentioned in the blog post above.

About the RadMenu - the only thing you need to change to get the script working is to add a space in front of rmFocused in the string, like this:
while (item != menu)
{
    var element = item.get_linkElement();
    element.className += ' rmFocused';
    item = item.get_parent();
}
Alternatively you can use this script instead, which does the same:
function pageLoad() {
    var menu = $find('<%= RadMenuID.ClientID %>');
    if (menu) {
        var pageName = window.location.href.match(/\/{1,1}[^\/]+(?=$|\?)/)[0].substring(1);

        $telerik.$('.rmLink[href*='+pageName+']', menu.get_element()).addClass('rmFocused');
    }
}
Both scripts require to be placed somewhere after your script manager.

Kind regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Anu]

Hi Karmen,

Thank you very much for your help. My problem was that the skin - 'Telerik' that I used did not have any special properties for rmFocused. Now, I have modified it by using the appropriate selector from the link you sent me.

kind regards,

Anu