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

Setting visibility for <div> tag

8 Answers 159 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John John
Top achievements
Rank 1
John John asked on 23 Feb 2010, 03:24 PM
Hi
          I need to set the visibility of <div> tag placed inside the EditFormTemplate.
Ex: I have a Show button in the EditFormTemplate, and i also have <div id="divSearch" runat="server">. I just need to show this div tag when only the Show button clicks.

I used to apply the style tag for div dynamically like 

divSearch.Style[

"display"] = "block";    and i also tried

 

divSearch.Visible=true;

But the above scenarios doesnt work for me. I could not get control over the div and also i am not able to show the div tag.

--Thanks

8 Answers, 1 is accepted

Sort by
0
robertw102
Top achievements
Rank 1
answered on 23 Feb 2010, 07:35 PM
If you're trying to show the div tag on the client-side you should write it like this:

document.getElementById("<%=divSearch.ClientID%>").style.display = "block";

I hope that's what you're looking for.
0
John John
Top achievements
Rank 1
answered on 24 Feb 2010, 08:05 AM
Hi robertw102,
                    It  not seems like that, I have Parent grid which has nestedview grid. That nesteview grid hav EditFormTemplate section for editing purpose. My Div is just  inside this editform template section. The simple demo code given as below;
<EditFormSettings EditFormType="Template" PopUpSettings-Modal="true" PopUpSettings-ScrollBars="Auto" 
                        PopUpSettings-Width="800px" PopUpSettings-Height="500px">  
                        <FormTemplate> 
                            <div align="center">  
                                <div class="FirmEditPage">  
                                   <asp:Button ID="b1" runat="server" OnClick="btnShow_Click" Text="ShowDiv"  CausesValidation="False" Enabled="True" /> 
                                    <div id="divTest" class="compsrch" visible="false" runat="server">  
                                        <asp:Label ID="Label1" Text="MY DIV IS SHOWN" runat="server" BackColor="Red"></asp:Label> 
                                    </div> 

I just want to click btnShow button and as a effect of this i need to show Div section which has the id of divTest. I set the visible is false by default.
I am not even find difficult to find the Div, but i dont know why the div is not coming to view.

I used the below related CS code to show the Div
 protected void btnShow_Click(object sender, EventArgs e)  
    {  
        Button btn = (Button)sender;  
        
        
        GridEditableItem editItem = (GridEditableItem)btn.Parent.NamingContainer;  
 
        HtmlContainerControl divSearch = editItem.FindControl("divTest") as HtmlContainerControl; //NAIC Div  
        divSearch.Visible = true


Note: The issue occures only for nested view grid. I used the same kind of code for parent grid EditFormTemplate section.But it is working fine i am able show the div element when i click button.

I assume i need to do an extra some work for EditFormTemplate Div section which is under child or nested grid.

Hope u could understand my scennario.

-Thanks
0
John John
Top achievements
Rank 1
answered on 25 Feb 2010, 06:42 AM
Hi
    Anybody who knows about this question please respond me. Since I am awaiting for the reply as earliest

-Thanks
0
Dimo
Telerik team
answered on 25 Feb 2010, 08:22 AM
Hi John,

There are two ways to achieve the desired behavior - client-side and server-side. Choose the one that suits you best.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 3;
        int rowsNum = 1;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
    protected bool ShowHiddenPanel = false;
 
    protected void ShowButton_Click(object sender, EventArgs e)
    {
        ShowHiddenPanel = true;
    }
 
    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        if (ShowHiddenPanel)
        {
            GridItem[] items = (sender as RadGrid).MasterTableView.GetItems(GridItemType.EditFormItem);
            foreach (GridItem item in items)
            {
                if (item.IsInEditMode)
                    (item as GridEditFormItem).FindControl("HiddenPanel").Visible = true;
            }
        }
    }
 
    protected void RadGrid2_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (e.Item as GridEditableItem);
            (item.FindControl("ShowButton") as Button).OnClientClick = String.Format("$get('{0}').style.display = '';return false;", item.FindControl("HiddenPanel").ClientID);
        }
    }
         
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
 
.hp
{
    margin:20px;
    background:#fc9;
}
 
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
 
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
 
<p>show panel server-side</p>
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="600px"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource" OnPreRender="RadGrid1_PreRender">
    <MasterTableView>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <p>FormTemplate</p>
                <asp:Button ID="ShowButton" runat="server" Text="Show hidden asp:Panel" OnClick="ShowButton_Click" />
                <asp:Panel ID="HiddenPanel" runat="server" CssClass="hp" Visible="false">
                    This asp:Panel is hidden
                </asp:Panel>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>
 
<br /><br />
 
<p>show panel client-side</p>
 
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="600px"
    AutoGenerateEditColumn="true"
    OnNeedDataSource="RadGrid_NeedDataSource"
    OnItemCreated="RadGrid2_ItemCreated" >
    <MasterTableView>
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <p>FormTemplate</p>
                <asp:Button ID="ShowButton" runat="server" Text="Show hidden asp:Panel" />
                <asp:Panel ID="HiddenPanel" runat="server" CssClass="hp" style="display:none">
                    This asp:Panel is hidden
                </asp:Panel>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>
 
</form>
</body>
</html>


Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
John John
Top achievements
Rank 1
answered on 25 Feb 2010, 11:57 AM
Hi Dimo,
                 Thanks for your response  and also i am very sorry to say that it is not working well in nested grid section but is fine with parent grid EditFormTemplate section.

Already i have no problem to hide or unhide any of the controls of EditFormTemplate section of Parentgrid. But i am facing issues only to handling those controls in EditFormTemplate section of nestedgrid.

I am using NestedViewTemplate concept to interacting with parent and child grid.

Hope now u could understand my issue, I hope this scenario may be strange to every one.

-Thanks
0
John John
Top achievements
Rank 1
answered on 26 Feb 2010, 02:41 PM
Hi,
    I hope everybody could understand the above mentioned scenario, So please let me know the possiblities of the solution.
Since my task largely depending on the same result.

-Thanks In Advance
0
John John
Top achievements
Rank 1
answered on 01 Mar 2010, 04:02 PM
Hi,
   Any one please help me to know the possiblity of the above question since my project is largely depends on the above scenarion.

-Thanks
0
Accepted
Dimo
Telerik team
answered on 01 Mar 2010, 04:13 PM
Hello John,

I don't see any problem in the case when the RadGrid control is part of a NestedViewTemplate. Can you show us your implementation, which does not work? Here is mine.


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<script runat="server">
  
    protected bool ShowHiddenPanel = false;
  
    protected void ShowButton_Click(object sender, EventArgs e)
    {
        ShowHiddenPanel = true;
    }
  
    protected void RadGrid11_PreRender(object sender, EventArgs e)
    {
        if (ShowHiddenPanel)
        {
            GridItem[] items = (sender as RadGrid).MasterTableView.GetItems(GridItemType.EditFormItem);
            foreach (GridItem item in items)
            {
                if (item.IsInEditMode)
                    (item as GridEditFormItem).FindControl("HiddenPanel").Visible = true;
            }
        }
    }
  
    protected void RadGrid22_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (e.Item as GridEditableItem);
            (item.FindControl("ShowButton") as Button).OnClientClick = String.Format("$get('{0}').style.display = '';return false;", item.FindControl("HiddenPanel").ClientID);
        }
    }
     
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
  
.hp
{
    margin:20px;
    background:#fc9;
}
  
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" />
  
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
  
<p>show panel server-side</p>
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="600px"
    DataSourceID="XmlDataSource1">
    <MasterTableView>
        <NestedViewTemplate>
            <telerik:RadGrid
                ID="RadGrid11"
                runat="server"
                AutoGenerateEditColumn="true"
                DataSourceID="XmlDataSource1" OnPreRender="RadGrid11_PreRender">
                <MasterTableView>
                    <EditFormSettings EditFormType="Template">
                        <FormTemplate>
                            <p>FormTemplate</p>
                            <asp:Button ID="ShowButton" runat="server" Text="Show hidden asp:Panel" OnClick="ShowButton_Click" />
                            <asp:Panel ID="HiddenPanel" runat="server" CssClass="hp" Visible="false">
                                This asp:Panel is hidden
                            </asp:Panel>
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>
 
<asp:XmlDataSource ID="XmlDataSource1" runat="server">
<Data>
<nodes>
<node Column1="value 1" />
</nodes>
</Data>
</asp:XmlDataSource>
 
<br /><br />
<p>show panel client-side</p>
 
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="600px"
    DataSourceID="XmlDataSource1">
    <MasterTableView>
        <NestedViewTemplate>
            <telerik:RadGrid
                ID="RadGrid22"
                runat="server"
                AutoGenerateEditColumn="true"
                DataSourceID="XmlDataSource1"
                OnItemCreated="RadGrid22_ItemCreated">
                <MasterTableView>
                    <EditFormSettings EditFormType="Template">
                        <FormTemplate>
                            <p>FormTemplate</p>
                            <asp:Button ID="ShowButton" runat="server" Text="Show hidden asp:Panel" />
                            <asp:Panel ID="HiddenPanel" runat="server" CssClass="hp" style="display:none">
                                This asp:Panel is hidden
                            </asp:Panel>
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>
  
</form>
</body>
</html>


Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
John John
Top achievements
Rank 1
Answers by
robertw102
Top achievements
Rank 1
John John
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or