Setting visibility for <div> tag

[John John]

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

[robertw102]

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.

[John John]

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

[John John]

Hi
    Anybody who knows about this question please respond me. Since I am awaiting for the reply as earliest

-Thanks

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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.

[John John]

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

[John John]

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

[John John]

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

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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.