Questions on UI for ASP.NET AJAX Forum

1 answer

261 views

Auto Complete Minimum number of characters for web service call

    
            I have a combobox as displayed below, and I was wondering if there is a setting to control the minimum number of characters to display before

            the service gets called. In other words, I would like to call the service only after the user typed in 3 or more characters.

            Also, when the control initially loads, there are no rows, as soon as I start typing, a blank drop down appears. Is there a way to

            supress the display the dropdown if there are no rows?

                                                            <script type="text/javascript">  
        
                                                                function OnClientItemsRequesting(sender, eventArgs) {  
        
                                                                    var context = eventArgs.get_context();  
        
                                                                    context["prefixText"] = eventArgs.get_text();  
        
                                                                }  
        
                                                            </script> 
        
                                                            <telerik:RadComboBox ID="rcCompany" runat="server" 
        
                                                                AllowCustomText="true" 
        
                                                                DataTextField="Name" 
        
                                                                DataValueField="CompanyId" 
        
                                                                Height="200px" 
        
                                                                Width="400px" 
        
                                                                DropDownWidth="400px" 
        
                                                                MarkFirstMatch="true"                                                          
        
                                                                Text='<%# Bind("CompanyName") %>' 
        
                                                                EnableLoadOnDemand="true" 
        
                                                                ShowMoreResultsBox="true" 
        
                                                                EnableVirtualScrolling="true" 
        
                                                                OnClientItemsRequesting="OnClientItemsRequesting">  
        
                                                                <WebServiceSettings Method="GetCompletionList" 
        
                                                                    Path="AutoCompleteCompany.asmx" /> 
        
                                                            </telerik:RadComboBox>

ComboBox

answered on 20 Mar 2009

8 answers

495 views

[Solved] How to insert javascript after an AJAX Response

Hi

I'm trying to load a UserControl with Page.Load(), the user control has a RadComboBox and I need the javascript code to handle the ComboBox events, but the javascript isn't loaded.

I tried with the SrciptManager.RegisterClientScriptBlock() and the RadAjaxManager.GetCurrent(this.Page).ResponseScripts.

the second let me put code like alert('hello') and it work, but if I put some like RadAjaxManager.GetCurrent(this.Page).ResponseScripts.Add("function hello(){alert('hello');}") and try to call it don't.

the user control ChartWidget.ascx

                                ...         
                            <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" Height="200px" Width="300px">         
                                    <telerik:RadComboBox ID="ChartSelector" runat="server" Height="150px" Width="200"  OnClientDropDownOpened="OnClientDropDownOpenedHandler">         
                                    <ItemTemplate>         
                                        <div id="div1">         
                                            <telerik:RadTreeView ID="Charts" runat="server" OnClientNodeClicking="nodeClicking">         
                                            </telerik:RadTreeView>         
                                        </div>                    
                                    </ItemTemplate>         
                                    <Items>         
                                        <telerik:RadComboBoxItem Text="" />         
                                    </Items>         
                                </telerik:RadComboBox>         
                            </telerik:RadAjaxPanel>         
                        ...         

the code behind

                                       protected void Page_Load(object sender, EventArgs e)         
                                {         
                                    ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "RadDropDownFunc",         
                                        "function comboLoad(sender, eventArgs){sender.set_text(sender.get_items().getItem(0).get_value());}"+         
                                        "function StopPropagation(e){if (!e) {e = window.event;}e.cancelBubble = true;}"+         
                                        string.Format("function OnClientDropDownOpenedHandler(sender, eventArgs){var tree = sender.get_items().getItem(0).findControl('{0}'); var selectedNode = tree.get_selectedNode(); if (selectedNode){selectedNode.scrollIntoView();}}",this.ChartSelector.ClientID),         
                                        true);         
                                    LoadData();         
                                }         
                                public void LoadData()         
                                {         
                                    ChartSelectorData = new List<ChartListItem>         
                                    {         
                                        new ChartListItem { Text = "Nodo 1", NodeID=1 , ParentID=0},         
                                        new ChartListItem { Text = "Nodo 2", NodeID=2 , ParentID=0},         
                                        new ChartListItem { Text = "Nodo 3", NodeID=3 , ParentID=0},         
                                        new ChartListItem { Text = "Nodo 1-1", NodeID=4 , ParentID=1},         
                                        new ChartListItem { Text = "Nodo 1-2", NodeID=5 , ParentID=1},         
                                        new ChartListItem { Text = "Nodo 2-1", NodeID=6 , ParentID=2},         
                                        new ChartListItem { Text = "Nodo 2-2", NodeID=7 , ParentID=2},         
                                        new ChartListItem { Text = "Nodo 3-1", NodeID=8 , ParentID=3}         
                                    };         
                                    ChartSelectorDataBind();         
                                    ChartSelectorInitialize();         
                                }         
                                private void ChartSelectorDataBind()         
                                {         
                                 
                                    RadTreeView tree = GetChartSelectorTreeView();         
                                    tree.DataTextField = "Text";         
                                    tree.DataNavigateUrlField = "";         
                                    tree.DataFieldID = "NodeID";         
                                    tree.DataFieldParentID = "ParentID";         
                                    tree.DataSource = ChartSelectorData;         
                                    tree.DataBind();         
                                }         
                                 
                                private void ChartSelectorInitialize()         
                                {         
                                    RadTreeView tree = GetChartSelectorTreeView();         
                                    foreach (RadTreeNode Node in tree.GetAllNodes())         
                                    {         
                                        if (Node.Nodes.Count == 0)         
                                        {         
                                            Node.ImageUrl = "~/Includes/Skin/Default/chart.gif";         
                                        }         
                                    }         
                                }         
                                private RadTreeView GetChartSelectorTreeView()         
                                {         
                                    return (RadTreeView)ChartSelector.Items[0].FindControl("Charts");         
                                }         

the code behind where i want to load

                                        protected void Button1_Click(object sender, EventArgs e)         
                                {         
                                    chartWidget = LoadControl("~/widgets/ChartWidget.ascx", new object[] { }) as ChartWidget;         
                                    chartWidget.LoadData();         
                                    Panel1.Controls.Clear();         
                                    Panel1.Controls.Add(chartWidget);         
                                }         
                                private UserControl LoadControl(string UserControlPath, params object[] constructorParameters)         
                                {         
                                    List<Type> constParamTypes = new List<Type>();         
                                    foreach (object constParam in constructorParameters)         
                                    {         
                                        if (constParam != null)         
                                            constParamTypes.Add(constParam.GetType());         
                                 
                                    }         
                                    UserControl ctl = Page.LoadControl(UserControlPath) as UserControl;         
                                 
                                    ConstructorInfo constructor = ctl.GetType().BaseType.GetConstructor(constParamTypes.ToArray());         
                                    constructor.Invoke(ctl, constructorParameters);         
                                    return ctl;         
                                }         

the page where the usercontrol loads

                                ...         
                            <asp:ScriptManager ID="ScriptManager1" runat="server">         
                            </asp:ScriptManager>         
                            <telerik:RadAjaxManager ID="AjaxManager1" runat="server">         
                                <AjaxSettings>         
                                    <telerik:AjaxSetting AjaxControlID="Button1">         
                                        <UpdatedControls>         
                                            <telerik:AjaxUpdatedControl ControlID="Panel1" />         
                                        </UpdatedControls>          
                                    </telerik:AjaxSetting>         
                                </AjaxSettings>         
                            </telerik:RadAjaxManager>         
                        ...         
                            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />         
                        ..         
                                    <asp:Panel ID="Panel1" runat="server">         
                                    </asp:Panel>         

Ajax

answered on 20 Mar 2009

3 answers

157 views

RadGrid Change Filter NotEqualTo

I'm trying to change the NotEqualTo filter to be able to return any record that have no value. I mean when i tried to filter a row it return only the row who that have some value in, all the other row are not displaying.

Is there a way to change the NotEqualTo filter to return also the null record?? or i have to create a custom filter?

Thank you and have a nice day!

Grid

answered on 20 Mar 2009

1 answer

104 views

[Solved] don't want the scrollbar to appear on radeditor

I don't want the scroll bar to appear on the editor. I need the radeditor to be of fixed height and width.
So that I can indicate to the user that only limited text needs to be entered as per the height of the editor.

Editor

answered on 20 Mar 2009

2 answers

189 views

problem in refreshing the multiple grids in tabs

Hi
I have 3 tabs and 3 grids in each tab..
in first grid i have a deleted button column where in i delete the rows..
dependidng on the deletion i should refresh other two grids with appropriate data..

since it is using ajax it is not reloading the page.. first page rows are delted perfectly but the other two are not refreshing..
i have code to reload the other tow grids in grid_DeleteCommand event.. and even i am doing the databinding too..
i tried to Rebind() also.. but no use

is there any way i can reload the other two grid without post back.?
or is there anyway that i should reload the page in deletecommand event?

Please help
Thanks
-Krishna

Grid

answered on 20 Mar 2009

7 answers

167 views

Quick Skinning Questions...

Hello,

I'm working on a custom skin and just getting started. The concept is pretty straight forward but I'm wondering why if I edit any of the CSS or image files in any of the pre-defined skins there is no change in the application of the skin. For example, if I edit an image and keep it in the original directory (for example, change the background color in the ButtonSprites.gif to pink) then refresh the browser the original image still appears. What is keeping the image from being updated in the browser?

Also, I'm wondering when making a new skin why the contents of the new skin have to be copied to the project directory, is it not possible to just keep it with the pre-defined and just somehow add it to the list of available skins in the pulldown in the properties to assign it to a tool instead of having to register it manually?

Can I add styles to a skin's CSS file? For example, the form decorator has h4, h5, and h6. Can I add a style for h3 or do I need to create a separate CSS file to place it in?

Using Q3 2008 tools.

Thanks,
Bob

General Discussions

answered on 20 Mar 2009

2 answers

147 views

template filtering

hello all

i am trying to create a template to filter my radgrid i used this aspx code

SortExpression="Technology" UniqueName="Technology">

<telerik:RadComboBox ID="teck" runat="server" DataSourceid="teck_filter" DataTextField="teck_Name" DataValueField="teck_Name"

AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Technology").CurrentFilterValue %>'

OnClientSelectedIndexChanged="SelectedIndexChanged" AutoPostBack="false" >

<Items>

<telerik:RadComboBoxItem></telerik:RadComboBoxItem>

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

function SelectedIndexChanged(sender,args) {

var tableView=$find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");

tableView.filter("Country",args.get_item().get_value(),"EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

<asp:TextBox ID="TechnologyTextBox" runat="server"

Text='<%# Bind("Technology") %>'></asp:TextBox>

</EditItemTemplate>

<asp:Label ID="TechnologyLabel" runat="server" Text='<%# Eval("Technology") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

when i run the combo box apear but when i change the selected index nothing happens...

i thought about using the server side but the issue as u can see i have to edit it if not in this column then in others that i have to filter using a combo box ...did i do anything wrong i followed the example exactly..

Grid

answered on 20 Mar 2009

3 answers

176 views

GridButtonColumn question

Currently my code is:

<telerik:GridButtonColumn CommandArgument="DETPRO" CommandName="Jpro" ButtonType="ImageButton"

UniqueName="ProButton" ImageUrl="~/img/icon_info.gif" HeaderText="Pro" />

what I would like to do is add the icon_info.gif image to a css file and use it from there, how would I do that, or can it not be done ?
please provide a small example.

thanks

Grid

answered on 20 Mar 2009

1 answer

101 views

About Banded/Stacked Columns

Does RADGrid support the properties as Banded/Stacked Columns headers. It is, the Columns headers have several layers and is crossed jast like some report columns headers. as the link:
Stacked Multiple Columns
Any one tell me?

Grid

answered on 20 Mar 2009

7 answers

138 views

RadInputManager and Prototype Incompatibility?

Hi
i'm getting tired trying to debug the following simple page that contains a Radajaxmanager, a RadInputMananger AND a reference to prototype.js (the latest version 1.6.0.3). the RadInputManager transforms a textbox in an Email Required Field.

    
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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>test</title> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server"> 
        
              <telerik:RadScriptManager ID="rsm" runat="server"> 
        
                <Scripts> 
        
                  <asp:ScriptReference Path="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js" /> 
        
                </Scripts> 
        
              </telerik:RadScriptManager> 
        
              <telerik:RadAjaxManager ID="ram" runat="server"> 
        
                <AjaxSettings> 
        
                  <telerik:AjaxSetting AjaxControlID="btUpd"> 
        
                    <UpdatedControls> 
        
                      <telerik:AjaxUpdatedControl ControlID="lb"></telerik:AjaxUpdatedControl> 
        
                    </UpdatedControls> 
        
                  </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
              </telerik:RadAjaxManager> 
        
              <asp:TextBox ID="txtFrom" runat="server" Width="322px" MaxLength="500"></asp:TextBox> 
        
              <telerik:RadInputManager ID="rim" runat="server"> 
        
                <telerik:RegExpTextBoxSetting BehaviorID="ebh4" ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> 
        
                  <Validation IsRequired="true" /> 
        
                  <TargetControls> 
        
                    <telerik:TargetInput ControlID="txtFrom" /> 
        
                  </TargetControls> 
        
                </telerik:RegExpTextBoxSetting> 
        
              </telerik:RadInputManager> 
        
              <asp:Button ID="btUpd" runat="server" Text="Update" OnClick="btUpd_Click" /> 
        
                <br /> 
        
                <asp:Label ID="lb" runat="server" /> 
        
              </form> 
        
            </body> 
        
            </html>

The code behind is trivial

    
            public partial class WebForm2 : System.Web.UI.Page 
        
              { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                } 
        
                protected void btUpd_Click(object sender, EventArgs e) 
        
                { 
        
                  lb.Text = "ajax query!"; 
        
                } 
        
              }

When I do provide a valid email in the textbox and press the update button i get a javascript error

com.get_targetControlIDs is not a function

--> var ids=com.get_targetControlIDs();

A few remarks

It appears that when prototype is loaded, the onsubmit function od radinputmanager.js (line 726) is retrieving two values instead of one only in the this._getSettings() method.

    
            _onSubmit:function(){ 
        
            var i; 
        
            for(i in this._getSettings()){ 
        
            if(this._getSettings()[i]){ 
        
            this._beforeSubmit(this._getSettings()[i]); 
        
            } 
        
            } 
        
            }

The first and correct retrieved value is "rim_e4" which corresponds to the behaviour.
The second one which is weird and I cannot understand why it is bugging is "each" which is a function and not a behaviour at all.

I think that the Object.extend(Array.prototype, Enumerable); line in protoype.js is causing the issue but i can't understand why

Please help me, this is really getting urgent.
Best Regards
Philippe

Input

answered on 20 Mar 2009

	...
	<telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" Height="200px" Width="300px">
	<telerik:RadComboBox ID="ChartSelector" runat="server" Height="150px" Width="200" OnClientDropDownOpened="OnClientDropDownOpenedHandler">
	<ItemTemplate>
	<div id="div1">
	<telerik:RadTreeView ID="Charts" runat="server" OnClientNodeClicking="nodeClicking">
	</telerik:RadTreeView>
	</div>
	</ItemTemplate>
	<Items>
	<telerik:RadComboBoxItem Text="" />
	</Items>
	</telerik:RadComboBox>
	</telerik:RadAjaxPanel>
	...

	protected void Page_Load(object sender, EventArgs e)
	{
	ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "RadDropDownFunc",
	"function comboLoad(sender, eventArgs){sender.set_text(sender.get_items().getItem(0).get_value());}"+
	"function StopPropagation(e){if (!e) {e = window.event;}e.cancelBubble = true;}"+
	string.Format("function OnClientDropDownOpenedHandler(sender, eventArgs){var tree = sender.get_items().getItem(0).findControl('{0}'); var selectedNode = tree.get_selectedNode(); if (selectedNode){selectedNode.scrollIntoView();}}",this.ChartSelector.ClientID),
	true);
	LoadData();
	}
	public void LoadData()
	{
	ChartSelectorData = new List<ChartListItem>
	{
	new ChartListItem { Text = "Nodo 1", NodeID=1 , ParentID=0},
	new ChartListItem { Text = "Nodo 2", NodeID=2 , ParentID=0},
	new ChartListItem { Text = "Nodo 3", NodeID=3 , ParentID=0},
	new ChartListItem { Text = "Nodo 1-1", NodeID=4 , ParentID=1},
	new ChartListItem { Text = "Nodo 1-2", NodeID=5 , ParentID=1},
	new ChartListItem { Text = "Nodo 2-1", NodeID=6 , ParentID=2},
	new ChartListItem { Text = "Nodo 2-2", NodeID=7 , ParentID=2},
	new ChartListItem { Text = "Nodo 3-1", NodeID=8 , ParentID=3}
	};
	ChartSelectorDataBind();
	ChartSelectorInitialize();
	}
	private void ChartSelectorDataBind()
	{

	RadTreeView tree = GetChartSelectorTreeView();
	tree.DataTextField = "Text";
	tree.DataNavigateUrlField = "";
	tree.DataFieldID = "NodeID";
	tree.DataFieldParentID = "ParentID";
	tree.DataSource = ChartSelectorData;
	tree.DataBind();
	}

	private void ChartSelectorInitialize()
	{
	RadTreeView tree = GetChartSelectorTreeView();
	foreach (RadTreeNode Node in tree.GetAllNodes())
	{
	if (Node.Nodes.Count == 0)
	{
	Node.ImageUrl = "~/Includes/Skin/Default/chart.gif";
	}
	}
	}
	private RadTreeView GetChartSelectorTreeView()
	{
	return (RadTreeView)ChartSelector.Items[0].FindControl("Charts");
	}

	protected void Button1_Click(object sender, EventArgs e)
	{
	chartWidget = LoadControl("~/widgets/ChartWidget.ascx", new object[] { }) as ChartWidget;
	chartWidget.LoadData();
	Panel1.Controls.Clear();
	Panel1.Controls.Add(chartWidget);
	}
	private UserControl LoadControl(string UserControlPath, params object[] constructorParameters)
	{
	List<Type> constParamTypes = new List<Type>();
	foreach (object constParam in constructorParameters)
	{
	if (constParam != null)
	constParamTypes.Add(constParam.GetType());

	}
	UserControl ctl = Page.LoadControl(UserControlPath) as UserControl;

	ConstructorInfo constructor = ctl.GetType().BaseType.GetConstructor(constParamTypes.ToArray());
	constructor.Invoke(ctl, constructorParameters);
	return ctl;
	}

	...
	<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
	<telerik:RadAjaxManager ID="AjaxManager1" runat="server">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="Button1">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="Panel1" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	...
	<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
	..
	<asp:Panel ID="Panel1" runat="server">
	</asp:Panel>