Scroll In RadWizardStep

2 posts, 0 answers
  1. Al
    Al avatar
    6 posts
    Member since:
    Nov 2012

    Posted 10 Dec 2015 Link to this post

    Hi! I have a problem with rendering in RadWizardStep. I create step programmatically.During this creation i insert UserControl wich contains RadTreeView

    control. Everything is fine until i expand nodes of TreeView. There is no scrollbars and a bottom part of nodes becomes invisible.

    I've read the topic http://www.telerik.com/forums/height-attribute-of-radwizard, but this not works. Any suggestions to fix this issue?

    Here's my code:

    User Control

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreeControl.ascx.cs" Inherits="Wizard.TreeControl" %>
     <div>
          
            <telerik:RadTextBox ClientEvents-OnLoad="clientLoad" ID="RadTextBoxFilter1" runat="server" />
            <telerik:RadTreeView ID="RadTreeViewFilter1" runat="server">
                <Nodes>
                    <telerik:RadTreeNode runat="server" Text="Microsoft">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Windows">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Office">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Oracle">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Database 10g">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Data Integrator">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Adobe">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Photoshop">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Illustrator">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Premier">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode runat="server" Text="Telerik">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="1">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="2">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="3">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="4">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="5">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="6">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="7">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="8">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="9">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="10">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="11">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="12">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="13">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="14">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            <ExpandAnimation Type="None" />
                <CollapseAnimation Type="None" />
            </telerik:RadTreeView>
         
        </div>
       <script type="text/javascript">
     
            var timer = null;
             
            function clientLoad(sender) {
                $telerik.$(".riTextBox", sender.get_element().parentNode).bind("keydown", valueChanging);
            }
     
            function valueChanging(sender, args) {
                if(timer)
                {
                    clearTimeout(timer);
                }
     
                timer = setTimeout(function() {
                    var tree = $find("<%= RadTreeViewFilter1.ClientID %>");
                    var textbox = $find("<%= RadTextBoxFilter1.ClientID %>");
                    var searchString = textbox.get_element().value;
                 
                    for (var i = 0; i < tree.get_nodes().get_count(); i++) {
                        findNodes(tree.get_nodes().getNode(i), searchString);
                    }
                }, 200);
            }
     
            function findNodes(node, searchString) {
                node.set_expanded(true);
     
                var hasFoundChildren = false;
                for (var i = 0; i < node.get_nodes().get_count(); i++) {
                    hasFoundChildren = findNodes(node.get_nodes().getNode(i), searchString) || hasFoundChildren;
                }
     
                if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                    node.set_visible(true);
                    return true;
                }
                else {
                    node.set_visible(false);
                    return false;
                }
            }
     
        </script>

    Code behind

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace Wizard
    {
        public partial class TreeControl : System.Web.UI.UserControl
        {
            public string clientLoad { get; set; }
     
     
     
            protected void Page_PreRender(object sender, EventArgs e)
            {
                if (!string.IsNullOrWhiteSpace(clientLoad))
                {
                    ScriptManager.RegisterStartupScript(this, GetType(), "script",
                    clientLoad, true);
                }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
        }
    }

    Wizard

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
         
    <style type="text/css">
            .rwzContent {
                height: 500px !important;
            }
        </style>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            (function () {
     
                window.pageLoad = function () {
                    var $ = $telerik.$;
                    var cssSelectors = ["accountInfo", "personalInfo", "contactDetails", "confirmation"];
                    var breadCrumbButtons = $(".rwzBreadCrumb .rwzLI");
     
                    for (var i = 0; i < cssSelectors.length; i++) {
                        $(breadCrumbButtons[i]).addClass(cssSelectors[i]);
                    }
                }
     
               
     
                window.AcceptTermsCheckBoxValidation = function (source, args) {
                    var termsChecked = $telerik.$("input[id*='AcceptTermsCheckBox']")[0].checked;
                    args.IsValid = termsChecked;
                }
     
                window.UserNameLenghthValidation = function (source, args) {
                    var userNameConditions = $telerik.$(".conditions")[0];
                    var isValid = (args.Value.length >= 4 && args.Value.length <= 15);
                    args.IsValid = isValid;
                    $telerik.$(userNameConditions).toggleClass("redColor", !isValid);
     
                }
     
                window.PasswordLenghthValidation = function (source, args) {
                    var passwordConditions = $telerik.$(".conditions")[1];
                    var isValid = args.Value.length >= 6;
                    args.IsValid = isValid;
                    $telerik.$(passwordConditions).toggleClass("redColor", !isValid);
                }
            })();
     
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
          <div class="demo-container">
            <div class="wizardHeader"></div>
            <telerik:RadWizard ID="RadWizard1" runat="server" Height="420px"
                
                 OnNextButtonClick="RadWizard1_NextButtonClick"
                OnWizardStepCreated="RadWizard1_WizardStepCreated"
                     DisplayCancelButton="True" OnCancelButtonClick="RadWizard1_CancelButtonClick">
                <WizardSteps>
                    <telerik:RadWizardStep ID="RadWizardStep1" Title="Your account" runat="server" StepType="Start" ValidationGroup="accountInfo" CausesValidation="true" SpriteCssClass="accountInfo">
                        
                        <div class="inputWapper first">
                             
                                       
                            <asp:Label Text="User Name: *" runat="server" AssociatedControlID="UserNameTextBox" />
                            <telerik:RadTextBox ID="UserNameTextBox" runat="server" ValidationGroup="accountInfo" Width="320px"></telerik:RadTextBox>
                            <asp:CustomValidator ID="UserNameLenghthValidator" ValidationGroup="accountInfo" runat="server" ControlToValidate="UserNameTextBox" EnableClientScript="true" ClientValidationFunction="UserNameLenghthValidation"></asp:CustomValidator>
                            <asp:RequiredFieldValidator ID="UserNameTextBoxRequiredFieldValidator" runat="server" ControlToValidate="UserNameTextBox" EnableClientScript="true" ValidationGroup="accountInfo" ForeColor="red" ErrorMessage="required field" CssClass="validator"></asp:RequiredFieldValidator>
                            <span class="conditions">Minimum 4 characters, maximum 15 characters.</span>
                        </div>
      
                        <div class="inputWapper">
                            <asp:Label Text="Password: *" runat="server" AssociatedControlID="RadComboBox1" />
                             
                             <telerik:RadComboBox ID="RadComboBox1" Runat="server"  ValidationGroup="accountInfo" Width="320px">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Text="1" Value="1" />
                                    <telerik:RadComboBoxItem runat="server" Text="2" Value="2" />
                                    <telerik:RadComboBoxItem runat="server" Text="3" Value="3" />
                                </Items>
                            </telerik:RadComboBox>
                             
                            <asp:RequiredFieldValidator ID="PasswordTextBoxRequiredFieldValidator" runat="server"
                                ControlToValidate="RadComboBox1" EnableClientScript="true" ValidationGroup="accountInfo" ErrorMessage="required field" CssClass="validator"></asp:RequiredFieldValidator>
                            <span class="conditions">The password has to be at least 6 characters long.</span>
                        </div>
                    </telerik:RadWizardStep>
      
                    
      
                </WizardSteps>
            </telerik:RadWizard>
        </div>
     
        </form>
    </body>
    </html>
     

    Code behind

    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
    using Wizard;
     
    public partial class Default : System.Web.UI.Page
    {
        private static bool _stepCreated = false;
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack && !_stepCreated)
            {
                
                RadWizardStep step2 = new RadWizardStep();
                step2.ID = "Second";
              
     
                RadWizard1.WizardSteps.Add(step2);
     
               
     
                RadWizardStep completeStep = new RadWizardStep();
                completeStep.ID = "Complete";
                
                RadWizard1.WizardSteps.Add(completeStep);
                _stepCreated = true;
                RadComboBox1.Enabled = false;
                RadWizard1.ActiveStepIndex = RadWizard1.WizardSteps[1].Index;
            }
     
        }
     
     
         
     
        protected void RadWizard1_WizardStepCreated(object sender, Telerik.Web.UI.WizardStepCreatedEventArgs e)
        {
            if (e.RadWizardStep.ID == "Complete")
            {
                e.RadWizardStep.StepType = RadWizardStepType.Complete;
                Label label = new Label();
                label.Text = "Registration succeeded!";
                e.RadWizardStep.Controls.Add(label);
            }
            else
            {
                 
                Control wizardStepContents = LoadControl("TreeControl.ascx");
                wizardStepContents.ID = e.RadWizardStep.ID + "userControl";
                
              
                e.RadWizardStep.Controls.Add(wizardStepContents);
     
               
            }
        }
        protected void RadWizard1_NextButtonClick(object sender, WizardEventArgs e)
        {
            
        }
     
        protected void RadWizard1_CancelButtonClick(object sender, WizardEventArgs e)
        {
            if (_stepCreated)
            {
                
                RadWizardStep step2 = RadWizard1.WizardSteps[2];
                RadWizard1.WizardSteps.Remove(step2);
                RadWizardStep step1 = RadWizard1.WizardSteps[1];
                RadWizard1.WizardSteps.Remove(step1);
            }
            RadWizard1.ActiveStepIndex = 0;
            RadComboBox1.Enabled = true;
            _stepCreated = false;
     
        }
    }

  2. Al
    Al avatar
    6 posts
    Member since:
    Nov 2012

    Posted 10 Dec 2015 in reply to Al Link to this post

    I've fixed it, just added to UserControl css class

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreeControl.ascx.cs" Inherits="Wizard.TreeControl" %>
     
    <style type="text/css">
        .search {
            width:inherit;
            height:inherit;
            overflow:auto !important;
        }
      
    </style>
     <div class="search">
          
            <telerik:RadTextBox ClientEvents-OnLoad="clientLoad" ID="RadTextBoxFilter1" runat="server" />
            <telerik:RadTreeView ID="RadTreeViewFilter1" runat="server">.......

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top