Telerik Forums
UI for ASP.NET AJAX Forum
3 answers
178 views
Hi,

I have followed the example code for filtering a RadTreeView using a RadTextBox as you type into the box, and it works a charm.  The link to that example is here: Filter Tree

I am using Telerik version: 2013.2.611.40

The issue I have is that my tree and textbox are in a user control, and on the same page I have two versions of this control.  When I type into the first textbox to filter the first tree nothing happens, but the second tree does expand.  The second tree works fine.

I know this is an issue with the valueChanged javascript function being called twice, but I cannot figure out a way around it, as this is hooked up the the keydown event on the textbox as a delegate (i think).

I have looked through plenty of articles saying to pass through the target, or to implement INamingContainer but nothing I do seems to sort this issue out.

Can anyone point me in the right direction?

Screenshots attached showing issue:

Screen 1 - page first loaded and both tree, fully collapsed.
Screen 2 - enter character into first textbox, and second tree expands.
Screen 3 - enter character into second textbox, and second tree filters as expected.

Demo project code below:

Master Page:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="TestTree.master.vb" Inherits="TestTreeViewFiltering.TestTree" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Web Page:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/TestTree.Master" CodeBehind="TestFilterTree.aspx.vb" Inherits="TestTreeViewFiltering.TestFilterTree" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Src="~/ucFilterTree.ascx" TagName="ucFilterTree" TagPrefix="uc1" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadSplitter ID="RadSplitter1" runat="server">
        <telerik:RadPane ID="rpLeft" runat="server">
            <uc1:ucFilterTree ID="ucFilterTreeLeft" runat="server" />
        </telerik:RadPane>
        <telerik:RadSplitBar ID="rsbSplit" runat="server"></telerik:RadSplitBar>
        <telerik:RadPane ID="rpRight" runat="server">
            <uc1:ucFilterTree ID="ucFilterTreeRight" runat="server" />
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

UserControl:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucFilterTree.ascx.vb" Inherits="TestTreeViewFiltering.ucFilterTree" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:UpdatePanel ID="upFilterTree" runat="server">
    <ContentTemplate>
        <telerik:RadTextBox ID="rtbFilterText" runat="server">
            <ClientEvents OnLoad="clientLoad" />
        </telerik:RadTextBox>
 
        <telerik:RadTreeView ID="rtvFilterTree" runat="server"></telerik:RadTreeView>
    </ContentTemplate>
</asp:UpdatePanel>
 
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            String.prototype.startsWith = function (string) {
                return (this.lastIndexOf(string, 0) === 0);
            }
 
            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("<%= rtvFilterTree.ClientID%>");
                    var _textBox = $find("<%= rtbFilterText.ClientID%>");
 
                    var _searchString = _textBox.get_element().value;
 
                    for (var _ii = 0; _ii < _tree.get_nodes().get_count() ; _ii++) {
                        findNodes(_tree.get_nodes().getNode(_ii), _searchString);
                    }
                }, 100);
            }
 
            function findNodes(node, searchString) {
                node.set_expanded(true);
 
                var _hasChildren = false;
 
                for (var _ii = 0; _ii < node.get_nodes().get_count() ; _ii++) {
                    _hasChildren = findNodes(node.get_nodes().getNode(_ii), searchString) || _hasChildren;
                }
 
                var _textToCheck = node.get_textElement().textContent;
                if (_hasChildren || _textToCheck.toLowerCase().startsWith(searchString.toLowerCase())) {
                    node.set_visible(true);
                    return true;
                } else {
                    node.set_visible(false);
                    return false;
                }
            }
        </script>
    </telerik:RadScriptBlock>

VB

Public Class ucFilterTree
    Inherits System.Web.UI.UserControl
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            rtvFilterTree.LoadContentFile("~/TreeData.xml")
        End If
    End Sub
 
End Class

XML Data:

<?xml version="1.0" encoding="utf-8" ?>
<Tree>
    <Node Text="Desktop" ToolTip="Desktop">
        <Node Text="Administrator">
            <Node Text="AppData" >
                <Node Text="Microsoft" />
            </Node>
            <Node Text="Contacts" />
            <Node Text="Downloads" />
            <Node Text="Documents" />
            <Node Text="Favorites" >
                <Node Text="Links" />
            </Node>
            <Node Text="Music" />
            <Node Text="Pictures" />
            <Node Text="Saved Games" />
            <Node Text="Searches" >
                <Node Text="History" />
            </Node>
            <Node Text="Videos" />
        </Node>
        <Node Text="Computer" ToolTip="My Computer">
            <Node Text="WebServer (\\10.0.0.80) (W:)" />
            <Node Text="Local Disk (C:)">
                <Node Text="inetpub">
                    <Node Text="AdminScripts"></Node>
                </Node>
            </Node>
            <Node Text="Local Disk (D:)">
                <Node Text="Movies" />
                <Node Text="Music" />
                <Node Text="Games" />
            </Node>
        </Node>
    </Node>
</Tree>

Thanks 

Dale
Boyan Dimitrov
Telerik team
 answered on 16 Aug 2013
1 answer
355 views
Hi all,

I have implemented a simple RadEditor on the page, where I want to display the contents within the RadEditor and a Print button on the top, to print the contents. I want to disable the content area specifically, so that users cannot make any changes to the populated text, but can still print. 
Here is the code:

<telerik:RadEditor ID="red1" runat="server" EnableResize="false" Width="100%" EditModes="Design" AutoResizeHeight="true" EmptyMessage="No notes">
<Tools>
    <telerik:EditorToolGroup>
        <telerik:EditorTool Name="Print" />
    </telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>

If I change the EditModes to Preview, then the Print toolbar button gets disabled as well, which I dont want. 
Rumen
Telerik team
 answered on 16 Aug 2013
1 answer
69 views
Hi ,

I have a grid with 40 columns and I need to filter the data

My requirement is Suppose I have Id Column and when I enter 2,3,4 in the ID Filtering Column, I need to get the records with all the ID's 2,3,4 .Is it possible in Telerik.
Eyup
Telerik team
 answered on 16 Aug 2013
2 answers
141 views
I am working with the following sample project.

http://www.telerik.com/community/code-library/aspnet-ajax/grid/excel-look-and-feel-for-radgrid.aspx#tForumTop

I am receiving the following errors in the stack trace. I am using the code directly within a User Control. Any help would be great.

[NullReferenceException: Object reference not set to an instance of an object.]
   dsCloud.UserControls.SpreadSheetSample.get_GridSource() +497
   dsCloud.UserControls.SpreadSheetSample.RadGrid1_NeedDataSource(Object source, GridNeedDataSourceEventArgs e) +16
   Telerik.Web.UI.RadGrid.OnNeedDataSource(GridNeedDataSourceEventArgs e) +190
   Telerik.Web.UI.RadGrid.AutoDataBind(GridRebindReason rebindReason) +108
   Telerik.Web.UI.RadGrid.OnLoad(EventArgs e) +253
   System.Web.UI.Control.LoadRecursive() +70
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Control.LoadRecursive() +189
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3177
Angel Petrov
Telerik team
 answered on 16 Aug 2013
3 answers
103 views
Hi there,

I use a system that makes use of the Telerik RadCalendar control. I do not have access to modify the function called on OnPopUpOpening, and it contains an error that breaks in non-IE. I was wondering if there is a way i can change the function call at runtime through javascript?

Regards,

Jack
Vasil
Telerik team
 answered on 16 Aug 2013
1 answer
95 views
Hi ,

I am having Update panels in my application, and our requirement is to develop AjaxLoadingPanel instead of update progress.
But while doing with AjaxLoadingPanel, the controls inside update panel are not updating with data.
Please help me.

Thanks,
Eyup
Telerik team
 answered on 16 Aug 2013
1 answer
101 views
Hi,

I need to be able to create a graph that has multi level category grouping (see attached picture).  Is it possible to do it with Telerik?

Rosko
Telerik team
 answered on 16 Aug 2013
1 answer
107 views
Hi,

i'm using org chart control to build employee hierarchy.
one of our web application contains search page with asp.ne text box where users will search others hierarchy by last name.
i'm using JQUERY auto complete to populate employee last names from sql table 
i created a new file with name search.js and pasted below code 

my search page contains below telerik controls
 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
 <telerik:RadOrgChart ID="RadOrgChart1" >
 <telerik:RadListBox ID="RadListBox1">
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
 
---------------------------------------------------------- search.js file code-----------------
var searchbutton;
jQuery(document).ready(function() {
    searchbutton = jQuery('[id$="_tbAuto"]');
    $(searchbutton).watermark('Type Last Name', { useNative: false, className: 'innercolor' });
});



$(function () {
    $(".tb").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "EmployeeList.asmx/GetEmployeeInfo",
                data: "{ 'mail': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item.EmployeeLastName
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("There was a search error please contact admin");
                }
            });
        },
        minLength: 2
    });
});
Peter Filipov
Telerik team
 answered on 16 Aug 2013
2 answers
208 views
Hi,

I have a form which contains a few TextBoxes with RequiredFieldValidators and serveral UserControls each containing RadGrid's, inside each UserControl I am using the following to ajaxify

<telerik:RadAjaxManagerProxy runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Grid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Grid" LoadingPanelID="LoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" />

The problem is, everytime I do a postback in any of the RadGrid's, the RequiredFieldValidator messages are duplicated.

I've read elsewhere that I need to add the ValidationSummary as an UpdatedControl to what is causing the problem but this does not work in this case as the ValidationSummary is in the page, the Grid is in a UserControl

Any ideas?
Angel Petrov
Telerik team
 answered on 16 Aug 2013
1 answer
280 views
Hi All,

I have a rad grid in my page. I need to provide filter option for 4 columns. we need only "EqualTo" filter.

What i need is that, filter button should show in the header. And will clicking on the button, the options should not show. While clicking on the button, the grid should filter for "EqualTo" filter function.

The code we have wrritten given below. But its showing the filter menu. Please help.
Thanks in advance.

<telerik:GridTemplateColumn UniqueName="Column1" SortExpression="Column1" 
    HeaderStyle-ForeColor=
"#245E9E" HeaderText="Column 1" ItemStyle-Wrap="true" Resizable="true"
    AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" DataField="Column1"
    FilterImageUrl="_layouts/Images/CoreSystem.LayoutsApp/filter.png">
     <ItemTemplate>
         <asp:Label ID=
"LblColumn1" Text='<%#Eval("Column1")%>' runat="server"></asp:Label>
     </ItemTemplate>
     <HeaderStyle Width=
"280px" />
     <ItemStyle Font-Names=
"Arial" Font-Size="11px" Wrap="true" />
    </telerik:GridTemplateColumn>

Andrey
Telerik team
 answered on 16 Aug 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?