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

Scroll In RadWizardStep

1 Answer 333 Views

Wizard

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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