Visible/Invisible Grid????

[Saad]

I have become fed up of this javascript....i am writting a code which makes my three radgrids visible and invisible. One grid will be visible at a time.....i am doing this when radToolBarButton is clicked OnClientButtonClicked="OnMenuButtonClicked".
I have set Radgrid_NoteBook initially to visible=true and other two are false..

Here`s my javascript code:

function

OnMenuButtonClicked(sender, args)

 

{

if(args.get_item().get_text() == "Friends")

 

{alert(args.get_item().get_text());

$find(

"<%=RadGrid_Friends.ClientID %>").get_element().style.display = "";

 

$find(

"<%=RadGrid_Networks.ClientID %>").get_element().style.display = "none";

 

$find(

"<%=RadGrid_NoteBook.ClientID %>").get_element().style.display = "none";

 

}

 

else if(args.get_item().get_text() == "Networks")

 

{alert(args.get_item().get_text());

$find(

"<%=RadGrid_Friends.ClientID %>").get_element().style.display = "none";

 

$find(

"<%=RadGrid_Networks.ClientID %>").get_element().style.display = "";

 

$find(

"<%=RadGrid_NoteBook.ClientID %>").get_element().style.display = "none";

 

}

 

else if(args.get_item().get_text() == "NoteBook")

 

{alert(args.get_item().get_text());

$find(

"<%=RadGrid_Friends.ClientID %>").get_element().style.display = "none";

 

$find(

"<%=RadGrid_Networks.ClientID %>").get_element().style.display = "none";

 

$find(

"<%=RadGrid_NoteBook.ClientID %>").get_element().style.display = "";

 

}

}

[Dimo]

Hi saadi,

I am not sure I understand you correctly - is there a problem with the provided Javascript code or you simply want to optimize/remove it?

If you want to remove it, please try using RadTabStrip + RadMultiPage:

http://demos.telerik.com/aspnet-ajax/TabStrip/Examples/Functionality/Multipage/DefaultCS.aspx

Each RadGrid will be placed in a separate page view.

In case you want to optimize the Javascript, you can do the following:

1) Wrap all three RadGrids in a single container, e.g. a <div>

2) Assign a unique CssClass to each of the three RadGrids.

3) Clicking on a RadToolBar button will set one of the three CSS classes to the RadGrids container.

4) Depending on the container's CSS class, only one of the three RadGrids will be visible.


Here is an example:


HTML

<div id="RadGridContainer" class="Notebook">
    <telerik:RadGrid CssClass="FriendsGrid" />
    <telerik:RadGrid CssClass="NetworksGrid" />
    <telerik:RadGrid CssClass="NotebookGrid" />
</div>


Javascript

function OnMenuButtonClicked(sender, args)
{
    $get("RadGridContainer").className = args.get_item().get_text();
}


CSS

.Friends .RadGrid,
.Networks .RadGrid,
.Notebook .RadGrid
{
    display: none;
}

.Friends .FriendsGrid,
.Networks .NetworksGrid,
.Notebook .NotebookGrid
{
    display: block;
}



I guess this is a lot better than using a bulk of Javascript. $get is a short form of document.getElementById() in MS AJAX enabled websites.


Kind regards,
Dimo
the Telerik team

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

[Saad]

NOTHING has happened man....
There isn`t a single change in the condiiton. I did the same as u told me.
First i used radToolStrip with multiPages but that was not working on mozilla firefox!
PLEASE help me! PLEASE

[Dimo]

Hi saadi,

Please send us a runnable example of what you are trying to do and I will tell you how to proceed.

Kind regards,
Dimo
the Telerik team

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

[Saad]

Now i am using radTabStrip again for this....so for now its ok. But tell me that the changing of the pageViews using radTabStrip is on the client side or server?

[Dimo]

Hi saadi,

RadMultiPage supports both modes, it depends on the RenderSelectedPageOnly property. By default this is set to False, so all page views are rendered as in the online demo, provided in my previous post.

Best wishes,
Dimo
the Telerik team

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