Hide/Show Selected Row Cell Using JavaScript

[Venkata]

Hi,
I want show GridImage Cell when user Selected a Row and i want to Hide when user Un-Select the Row using JavaScript

 function grid_RowSelected(sender, args)
{
sender.get_masterTableView().showColumn(2);
}

But above method Shows or Hide the Column in Whole Radgrid. But I just want to Show/Hide User Select Row Cell/Column only

Thanks In Advance

[Jayesh Goyani]

Hello,

Please check the below link. In this link i have already provided code snippet for same requirement.

http://www.telerik.com/community/forums/aspnet-ajax/grid/display-command-items-on-mouse-over.aspx

Note : In this demo i have used OnMouseOver/out you can use OnrowSelect/Deselect event.

Let me know if any concern.

Thanks,
Jayesh Goyani

[Venkata]

Hi Jayesh Goyani,

Thank You for your quick Reply.. But it's not working.. here is my code
 

<telerik:GridImageColumn ImageUrl="~/images/Icons/time.png" UniqueName="timeImage" AllowFiltering="false">

</telerik:GridImageColumn>

 

<ClientSettings EnableRowHoverStyle="true">

 <ClientEvents OnRowSelected="grid_RowSelected" OnRowDeselecting="grid_RowDeselected" />            
</ClientSettings> 

And JavaScript.

function grid_RowSelected(sender, args)

{

 toggleContent(sender, args, true);

}

 

function toggleContent(sender, args, flag)
{

var wrapperEl = $telerik.getElementByClassName(args.get_gridDataItem().get_element(), "imgTime", "img");

if (wrapperEl)

    wrapperEl.style.visibility = flag ? "visible" : "";
}

I am getting wrapperEl as null
Am i missing any Thing..?

[Eyup]

Hi Venkata,

I have created a sample RadGrid web site to demonstrate how you can achieve the requested functionality. Please run the attached application and let me know if it works for you.

Regards,
Eyup
Telerik

[Venkata]

Hi Eyup,
Thanks and It worked.. One last question
I am storing the Select/Unselet value in my Session. Once user come back to Grid Screen how to show the Image if Previously selected?

here is my code and it's not working

protected void radGrid_PreRender(object sender, EventArgs e)
  {
     if (!IsPostBack)
     {
        if (HttpContext.Current.Session[MyObject] != null)
      {
        Image image = sender as Image;
        GridDataItem dataItem = image.NamingContainer as GridDataItem;
       image.Style["display"] = dataItem.Selected ? "" : "";
      }
     }
}

[Eyup]

Hello Venkata,

You can achieve that by using the unique ID of the item:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (!IsPostBack && e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        string itemID = Session["SelectedItemID"] as string;

        if (!string.IsNullOrEmpty(itemID))
        {
            string id = dataItem.GetDataKeyValue("OrderID").ToString();
            if (itemID == id)
            {
                dataItem.Selected = true;
            }
        }
    }
}

In addition, I'm attaching a sample to demonstrate how optimally you can navigate to and select the saved item from different page.

Looking forward to your reply.

Regards,
Eyup
Telerik

[Venkata]

Hi Eyup

Thank You.. It Worked