Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Scroll In RadWizardStep

1 Answer 231 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Al asked on 10 Dec 2015, 09:21 AM

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;
 
    }
}

1 Answer, 1 is accepted

Sort by
0
Al
Top achievements
Rank 1
answered on 10 Dec 2015, 10:21 AM

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">.......

Tags
Wizard
Asked by
Al
Top achievements
Rank 1
Answers by
Al
Top achievements
Rank 1
Share this question
or