More in this section

Forums / Developing with Sitefinity / Popup box like in categories

Popup box like in categories

11 posts, 1 answered
  1. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    26 Jun 2009
    Link to this post
    I need to add a popup box to my module. Similar to the one in categories.
    When you press the "add subcategories " link a popup box comes up and allows you to type in a name that is added to the database.

    What would be the best apreach to achieve the same affect?
    I have been looking at the radWindows control.
    Is that the same control used in categories?

    Andrew
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    26 Jun 2009
    Link to this post
    Hi Andrew,

    You can use LinkButton control and then in the server side - in your view you need to add some logic that will pop up the button.

    Then create a new function that will be used to for adding the client script to the Linkbutton  when clicked.

    void ScriptToButton(Control button, string buttonId, string script) 
            { 
                if (button != null
                { 
                    LinkButton lnkButton = button as LinkButton; 
                    if (lnkButton != null
                        lnkButton.OnClientClick = script; 
                    
                } 
               
            } 

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    01 Jul 2009
    Link to this post
    I am sorry, but i did not really understand what you mean.
    Am i correct in thinking you are simply telling me to create a link button and attach client side code (JS) to popup a new window?

    That's not what i was asking for. I am aware i could do that. I am trying to make it look more like the existing functionality within the system already.

    The categoriesView has a div in it:

    <div id="subcategoryPopup<%# Eval("ID") %>" class="editItemPropertiesForm addNewCategory" 
                            style="display: none">  
                            <asp:Label ID="Label77" runat="server" Text='<%$Resources:SubcategoryName %>' AssociatedControlID="subcategoryName"></asp:Label> 
                            <asp:TextBox ID="subcategoryName" runat="server" ValidationGroup="subcategory" CssClass="txt" 
                                MaxLength="250"></asp:TextBox> 
                            <asp:RequiredFieldValidator ID="rfvSubcategory" runat="server" ControlToValidate="subcategoryName" 
                                Display="Dynamic" CssClass="validMessage" EnableViewState="False" SetFocusOnError="True" 
                                ValidationGroup="subcategory">  
                                <strong> 
                                    <asp:Literal ID="Literal77" runat="server" Text="<%$Resources:CategoryNameEmpty %>"></asp:Literal></strong></asp:RequiredFieldValidator> 
                            <class="button_area">  
                                <asp:LinkButton ID="btnSubmitSubcategory" runat="server" ValidationGroup="subcategory" 
                                    CssClass="CmsButLeft okdark">  
                                    <asp:Literal ID="Literal66" runat="server" Text='<%$Resources:AddSubcategory %>'></asp:Literal></asp:LinkButton> 
                                <span class="cmsorlbl">  
                                    <asp:Literal ID="Literal44" runat="server" Text="<%$Resources:Or %>"></asp:Literal></span>  
                                <href="#" class="min" onclick="ToggleDiv('subcategoryPopup<%# Eval("ID") %>'); return false;" 
                                    title="Close">  
                                    <asp:Literal ID="Literal33" runat="server" Text="<%$Resources:Close %>"></asp:Literal></a>  
                            </p> 
                        </div> 


    And somehow the link button manages to show this in a popup window. I would like to know how this is done. Unless of course this is some sort of trade secret. :)
     
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    01 Jul 2009
    Link to this post
    Hi Andrew,

    For adding  sub category we use LinkButton as described in the previous post. This functionality was accomplished by using js.

    The button that is used has ID="popupSubcategoryButton"

     <asp:LinkButton ID="popupSubcategoryButton" runat="server" Text="Add a subcategory" CssClass="addCategoryName"></asp:LinkButton> 

    The main control is RadTreeView control. On NodeDataBound event we are finding the control with this ID "popupSubcategoryButton", then using js function similar to this one I wrote in the previous post. As you can see in the function we are looking for LinkButton control. When we find it we call the third parameter of the function OnItemClick event.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    01 Jul 2009
    Link to this post

    Hi Ivan.

     

     
     
     

    It appears there is a miss communication here, either you are not understanding my question or i am not understanding your answer.

     

     

    I am aware that i can attach JS to any button be it inside a control or not. I am also aware that i can then put code inside the new window to write into my database and reload the page to show the result. That is not the issue here.

    What i am looking for is consistency in the system; i want my popup to look identical to the popup that exists in the categories functionality. I want my new control to look exactly like that. So what i am looking is the exact code for the popup. Say if the popup is an apsx page. I am interested in what the front end code looks like. What css is used what divs are on the page etc.

    I don’t know what the architecture is, so i can’t exactly say what i am looking for here. As i said in my last post i see there is a div called:

     

     

     
    <div id="subcategoryPopup<%# Eval("ID") %>" class="editItemPropertiesForm addNewCategory" style="display: none">     
     
     

     


    Now, it is simply in the aspx code. Is that just a placeholder? If i ware to take this code and put it in an apsx page and pop that up would i get what i am looking for?

     

     

     

    Or is the code that includes this actual code real code as it is. And if so how do you manage to use this div? How does it appear in a popup box?

    I am using this page as a sample: project/sitefinity/admin/ControlTemplates/Generic_Content/CategoriesView.aspx

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    02 Jul 2009
    Link to this post
    Hello Andrew,

    i want my popup to look identical to the popup that exists in the categories functionality. I want my new control to look exactly like that. So what i am looking is the exact code for the popup

    The appearance of the controls inside the div is a css responsibility. It is not server or client code.
    All css classes can be found at ~/Sitefinity/Admin/Themes/Default/Modules.css.

    Generally the following class styles the form.

    .editItemPropertiesForm 
        border:1px solid #000000
        background-color#ffffe6
        border1px solid #000
        width250px
        font-weightnormal


    Now, it is simply in the aspx code. Is that just a placeholder? If i ware to take this code and put it in an apsx page and pop that up would i get what i am looking for?


    You should use js - when you press the button, say "Show Div". In the js function you need to call the id of the div Then the window will open. You can even use  a href onclick event instead of a button.

    Below is the markup:

    <div id="divWorkArea" runat="server" class="workArea insert"
        <href="#" onclick="ToggleDiv('subcategoryPopup');">Show Div</a> 
        <div id="subcategoryPopup" class="editItemPropertiesForm addNewCategory"
            <asp:Label ID="Label77" runat="server" Text="SubcategoryName" AssociatedControlID="subcategoryName"></asp:Label> 
            <asp:TextBox ID="subcategoryName" runat="server" ValidationGroup="subcategory" CssClass="txt" MaxLength="250"></asp:TextBox> 
            <class="button_area"
                <asp:LinkButton ID="btnSubmitSubcategory" runat="server" ValidationGroup="subcategory" CssClass="CmsButLeft okdark"><asp:Literal ID="Literal66" runat="server" Text="AddSubcategory"></asp:Literal></asp:LinkButton> 
                <span class="cmsorlbl"><asp:Literal ID="Literal44" runat="server" Text="Or"></asp:Literal></span
                <href="#" class="min" onclick="ToggleDiv('subcategoryPopup'); return false;" title="Close"><asp:Literal ID="Literal33" runat="server" Text="Close"></asp:Literal></a
            </p> 
        </div> 

    Here is the js function that you can use

        function ToggleDiv(divId) { 
            var div = document.getElementById(divId); 
            var relativeParent = div.parentNode.parentNode.parentNode.parentNode; 
            if (div.style.display == 'none') { 
                div.style.display = ''
                relativeParent.style.zIndex = "100"
            } 
            else { 
                div.style.display = 'none'
                relativeParent.style.zIndex = "0"
            } 
        } 


    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
    Answered
  7. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    02 Jul 2009
    Link to this post
    Hi Ivan,

    That has infact brought me much closer to the solution i am looking for.
    I have used the javascript function you have provided.
    I have also created this event:

     

    protected void NodeBound(object sender, RadTreeNodeEventArgs e)  
        {  
            e.Node.Expanded = true;  
     
            ((LinkButton)e.Node.FindControl("popupSubcategoryButton")).OnClientClick = "ToggleDiv('subcategoryPopup" + e.Node.Value + "');";  
            ((LinkButton)e.Node.FindControl("popupRenameButton")).OnClientClick = "ToggleDiv('renamePopup" + e.Node.Value + "');";  
        } 

    It is attached to the treeview itemdatabound event.

    What happens though is that, when i press the button it displays the popup (with all the correct styling), but it then submits the form before i press any buttons. It realoads it, before anything can be done..
    I tried changing the 'causesvalidation' to false. but it does not apear to make any difference.

    A

  8. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    02 Jul 2009
    Link to this post

    I have made some progress again.
    Having again used some of your code. I have replaced the linkbuttons which were submiting the form to early, with this:

     

    <

     

    a href="#" CssClass="addCategoryName" onclick="ToggleDiv('subcategoryPopup<%# Eval("ID") %>');">Add a subcategory</a>

    This almost does what i want it to do. Except that the validator is stoping me from submiting the form. When i remove it it does submit.

     

    <

     

    asp:RequiredFieldValidator ID="rfvSubcategory" runat="server" ControlToValidate="subcategoryName"

     

     

     

     

     

    Display="Dynamic" CssClass="validMessage" EnableViewState="False" SetFocusOnError="True"

     

     

     

     

     

    ValidationGroup="subcategory">

     

  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    02 Jul 2009
    Link to this post
    Hi Andrew,

    Then remove the validation of the popup.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Andrew
    Andrew avatar
    202 posts
    Registered:
    05 Jun 2009
    02 Jul 2009
    Link to this post
    Thanks Ivan.

    That is in fact the route i have taken.
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    03 Jul 2009
    Link to this post
    Hello Andrew,

    If you get stuck somewhere, let us know.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Register for webinar
11 posts, 1 answered