How do I use AJAX controls when my site was not created with AJAX enabled?

My site is not originally created with AJAX Conotrol Toolkit Web Site. How do I use the TabContainer and TabPanel?

Step 1 - Add the following references to your project...

.NET: System.Web.Extensions

.NET: System.Web.Extensions.Design

PROJECT / BROWSE: AjaxControlToolkit

Step 2 - Modify your web.config (add in the bits you don't have)

<configSections><sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/><section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/></sectionGroup></sectionGroup></sectionGroup></configSections><system.web><pages><controls><add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></controls></pages><compilation debug="true"><assemblies><add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/><add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Management, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies></compilation><httpHandlers><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers><httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></httpModules><system.webServer><validation validateIntegratedModeConfiguration="false"/><modules><add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></modules><handlers><remove name="WebServiceHandlerFactory-Integrated"/><add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></handlers></system.webServer>

Step 3 - Top of your aspx page

<%

@.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>
<%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

I think that's about it!

Thanks! I'll give that a try. By the way, does the IIS server needs to have some kind of update for all my AJAX enabled pages to work?

As long as you've installed the ASP.NET AJAX (downloadable from this site ajax.asp.net) then you'll be fine - it has to be installed on the machine you're using as the web server as it places itself in the GAC.

How do I trigger a script to run when a PopupControl gets hidden?

To put it another way: How do I trigger a script to run when a PopupControl gets hidden?

Seeing as the control toolkit handles all the event trapping and so on, I don't know what event to trap and how. Anyone know?

Hi,

the ModalPopup exposes an OnCancelScript property. You can set this property to the script that will be executed when the popup is dismissed.

Hmm ... if I was using a ModalPopup that would be a great tip, but I'm using a normal PopupControl. I've found a dirty trick - the animation property allows a javascript routine to be called when the popup closes. Initially I tried using a javascript _doPostBack to run a server-side routine, but I couldn't get that to work, so I did the whole thing client side instead. It may not be the prettiest way to do it, but hey, it works.

How do I Select Values in Cascading Dropdowns

Using VS 2005, ASP.NET AJAX 1.0 and AJAX Toolkit 10618

I have 2 dropdowns using the Cascading Dropdown from the toolkit, these are both connected to a web service and this all seems to work fine. No other Ajax type controls are being used on the page.

How do I set the dropdown values from server side code? or any method to change the selected item in each dropdown once they have been set.

I did manage to get the selected value to pass in with the data from the callbacks on the web service and this works fine when the page first opens, but any attempt to change the selected values once the page is open either through the web service or server code does not work; both drop downs keep their previous setting. I have setup a breakpoint on the data (in the web service) before it is sent back to the page and I can see the item that should be selected but yet the dropdowns do not change their selected value.

I have tried combobox.selectedvalue = "Some Value" and the GetTargetProperties method doesn't seem available anymore.

I have this nagging suspicious feeling I am missing something obvious.

Please Help

This video has a walk though.

http://asp.net/learn/videos/view.aspx?tabid=63&id=77

I had used the information in this video to get started which was a great help.

Now I need to now how to set a selected value in the dropdowns. I can get the values set on the initial page load, it is changing the values once the page is loaded and the initail values have been set. The setting of the selected values are done through code. It seems that the dropdowns have a memory once their intial selected values are set and cannot be changed.

figured it out!

Had a look at the toolkit source code and it was obvious...

cascadingdropdown1.clientstate = "String of selected value"

All is good in the world again!

Turns out SelectedValue works as well. I was trying to do this on the dropdown itself instead of the cascading control.

How do I put a scrollbar on an AutoComplete extender?

Hi, I'm new to the AJAX toolkit (and AJAX) so I hope you'll forgive me asking this stupid question. I can see from the example website that it is possible to have an AutoComplete extender which if you have more than say ten suggestions, it shows the first ten and then you can scroll through the rest.

However, I can't see which bit of the example code tells it to do that. What I Here's what I've got right now.

<form id="form1" runat="server">
<asp:ScriptManager ID="AutoCompleteScriptManager" runat="server" >
<Services>
<asp:ServiceReference Path="AutoCompleteService.asmx" />
</Services>
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Columns="40" ></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" TargetControlID="TextBox1" CompletionInterval="10" MinimumPrefixLength="1" ServicePath="AutoCompleteService.asmx" ServiceMethod="GetCompletionList" >

</ajaxToolkit:AutoCompleteExtender>
</form

I'd appreciate it if somebody could point me in the right direction. Thanks.

Just thought I'd bump this thread as it had gone off the front page. I'd really appreciate some help with this.

You need to use an appropriate CSS class with overflow:auto on the appropriate elements.

Set a value for CompletionListCssClass to something that controls the CSS correctly. Not being a CSS chap, I leave that exercise to somebody else :)

Hi GillouX,

Here is the sample that we set the AutoComplete's CompletionListElementID to a Panel and then set the css to the panel.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;

font-weight: normal;
border:solid 1px #006699;

line-height:20px;
padding:2px;
background-color:White;
}

.AutoExtenderList
{
border-bottom:dotted 1px #006699;
cursor:pointer;
color:Maroon
}

.AutoExtenderHighlight
{
color:White;
background-color:#006699;
cursor:pointer;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TBSearch" runat="server"></asp:TextBox>
<asp:Panel runat="server" ID="myPanel" Height="100px" ScrollBars="Vertical">
</asp:Panel>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" BehaviorID="myACEBID" TargetControlID="TBSearch"
ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionInterval="1" EnableCaching="true" CompletionSetCount="12"CompletionListElementID="myPanel"/>
<br/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

WebService

"C#" Class="AutoComplete" %>using System;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Collections.Generic;[WebService(Namespace ="http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class AutoComplete : System.Web.Services.WebService { public AutoComplete() { } [WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey) {// contextKey += "23"; if (count == 0) { count = 10; } if (prefixText.Equals("xyz")) {return new string[0]; } Random random =new Random(); List<string> items =new List<string>(count);for (int i = 0; i < count; i++) {char c1 = (char)random.Next(65, 90);char c2 = (char)random.Next(97, 122);char c3 = (char)random.Next(97, 122); items.Add(prefixText + c1 + c2 + c3); }return items.ToArray(); }}

I hope this help.

Best regards,

Jonathan

How do I intsall the Atlas Control Toolkit?

Can someone please direct me on where I can find documentation or webpage on how to install the Atalas Control Toolkit?

hello.

well, you just download it and then add the dll to your bin's folder.

You can find it here:

http://ajax.asp.net/default.aspx?tabid=47&subtabid=477

How do I install the toolkit controls?

Incredibly novice question I know. I'm using Visual Web Developer 2005 Express Edition, have download the ZIP containing all toolkit controls and samples, but how do I add the controls?

Thanks in advance

Mark

what you want to do is right-click on the control toolbox and goto choose items, then goto browse and navigate to where ever you unzipped the ajax control toolkit .dll file. Selecting this should add the controls to your toolbox list and select them all, so then click apply and you should be good

check this out if you need further help

http://ajax.asp.net/ajaxtoolkit/Walkthrough/Setup.aspx

Thanks pal!

How do I get rid of System.Web.Extensions ?

Hi

I have installed the AJAX toolkit and framework. But now, for some reasons, it is conflicting with my application.

I have uninstall VS and reinstall it, and the AJAX toolkit is still there and there s still a conflict.

How canI reinstall VS from scratch (get rid of the AJAX toolkit and framework)?

in windows you should be able to goto the control panel > add remove programs and remove asp.net 2.0 ajax extensions 1.0

if items still show up in your project toolbox just goto "choose items" and deselect anything about ajax and also goto the folder with the ajax .dll (if it is still around after the removal) and delete it manually

How do I deploy an AJAX Toolkit web app?

This seems like a pretty common thing to want to do, yet I can't find anything (clear) in the documentation or various forums. Simply put, how do I deploy an AJAX enabled ASP.NET 2.0 application?

I can get the files on the server no problem, but what do I need to install on the server to get the AJAX 1.0 code to work? I assume I just need to install AJAX 1.0 on the server, and everything should be fine, right? If so, then why isn't my AJAX code working. If not, then what am I missing?

Note, I'm using the CascadingDropDown control. It works fine on my development computer, but I get the following message when trying to run it on our web server:

AjaxControlToolkit.CascadingDropDown missing required Category property value for CascadingDropDown1.
Parameter name: Category

The category parameter is being set, so I don't understand what the error is.

Any help is much appreciated.

Hi...

and welcome to ASP.NET Forums!

I have an article on cascading dropdownlist. Check this linkhttp://www.aspalliance.com/1183

You also need to make sure, the parameter names should be the same (case-sensitive) as defined in the docs.

Thanks

How Do I add Atlas to a Current project?

All,I am trying to add atlas to a current project so I can use some things from the toolkit. I tried dragging in the collapsible panel from the toolbar, but what else should I do to make it work?

Karls

There is some stuff you have to add to your web.config. Search Google harder, it is out there, I just did this recently and had to find it. I believe it was on Scott's blog or the Microsoft web site. Don't get confused about how to add Atlas to Visual Studio (toolkit) from Adding Atlas to your project.

-Wayne

How do I "replace" the ACT controls in my application?

Hi,

I have an application I wrote with an older version of the Atlas Control Toolkit. I just downloaded the latest version, and installed it. I'm wondering if there is anything else I need to do to update the controls in my application to use the more recent versions. Thanks.

Aaron

Nope. Just make sure the DLLs are replaced and everything should be fine.

Thank you.

Aaron

There were a few breaking changes in the framework though:

http://ajax.asp.net/files/Migration_Guide.doc

http://ajax.asp.net/files/Migration_Guide_Beta_Beta2.doc

how difficult is it to retrofit a webapp with the ajax toolkit

Hi folks, haven't posted in any of the ajax forums before in fact I haven't used the toolkit or the ajax framework extensions for asp.net at all. All my ajax to this data has been regular javascript functions. Anyhow for the current web app I'm building I really want to pull out all the stops for the client so was consdering using some toolkit controls namely collapsible panel, calendar and autocomplete. However my app is about 50% complete and i want to finizle the core functionality of it before getting down with ajax so I'm wondering how easy or difficult is it to retrofit a webapp with controls from the toolkit. Am I better of stopping right now and implemented the ajax controls or do I need to start form sratch? or can I simply tweaks a few things to make ajax controls work when I 99% done with CS code behind stuff.

Thanks for your thoughts.

The quickly you convert your website to ASP.NET AJAX website the better. Toolkit controls are really easy to use, but if you are planning to use lot of update panels then u might to change your aspx pages a bit so if you are thinking about moving to AJAX website you should do so as quickly as possible.

And to convert your website, all you have to do is change your web.config file. Generate one blank ASP.NET AJAX enabled website through VS and copy the content of web.config file to your current web.config file at appropriate places.

Hope it helps.

I'd start implementing the AJAX control now if you've decided that's the route you want to take. Thisdocumentation will help you get started.

Thanks guy, I really don't want to have to delve into ajax yet if at all avoidable. I will basically needed two or three controls thats all. 2 collapable panels and autocomplete (calendar I can live without). I'm putting together an advanced fine panel at the moment, with textboxes checkboxes etc. I will be wanting to move that from a regular panel to a collapable panel, thats all. Will even this be a pain in the neck to retrofit?

You'll still have to go through all of the conversion process regardless of how many controls you choose to use.

How come the toolkit is only available as server controls?

Am I missing something or is this by design? It would be really nice to programmaticly instantiate/dispose etc.. for creating a modal dialog and the other useful behaviors in the toolkit. Just for a laugh, I decided to copy over the JS files for the dropdown menu and got it working (minus some strange errors where dispose() is being called on undefined objects) but it was rather a cumbersome process having to include all the JS files and dependencies. Anyone else doing this sort of thing? Any chance there is a version of the toolkit that is not server control based?

function createDropDownMenu() { var panel = document.createElement("div"); panel.className ="ContextMenuPanel"; panel.style.display ="none"; panel.style.width ="100px"; panel.style.height ="100px"; panel.style.visibility ="hidden"; var target = $get('placeholderDiv').appendChild(panel); var dd_menu =new AjaxControlToolkit.DropDownBehavior($get('TextLabel')); dd_menu.set_dropDownControl(panel); dd_menu.set_dropDownControlID(TextLabel); dd_menu.set_dropArrowImageUrl("images/drop-arrow.gif"); dd_menu.initialize(); dd_menu.show(); }

anyone?

This has been requested, but it's a bit of work to create a process that will extract all the files and put them in the right dependency order, etc. It's something I'd like to do, but isn't super high-priority.

The trick to do this is as follows:

1) Get the scripts loaded by instantiating an extender and pointing it at a dummy control.

<asp:Label ID="dummy" style="display:none;"/>

<ajaxToolkit:SomeExtender TargetControlID="dummy"/>

2) Instantiate the behavior using the $create() helper, notnew

var behavior = $create(AjaxControlToolkit.SomeBehaior, {prop:value,prop2:value2}, null, null, $get('someElement'));

Excellent. This works great. Thanks for the tip!

I guess the ordering in which the scripts load has something to do with it. I modified my code to use your method and it runs cleanly now with no errors.

Good - yeah if you're okay with that little hand wave, then you don't have to worry about that stuff...

How can I use ASP.NET AJAX Toolkit Controls in an existing ASP.NET 2.0 website?

Hello All!

Trust you guys are doing well. I have a existing ASP.NET 2.0 website to which I would like to add some ASP.NET AJAX Toolkit Controls. How can I do this? I sincerely do appreciate your time and assistance. Thank you.

Regards,

Mohammed

Here's a video you can watch on this subject:

http://www.asp.net/learn/ajax-videos/video-81.aspx

and here's the documentation:

http://asp.net/ajax/documentation/live/InstallingASPNETAJAX.aspx

Hello ca8msm!

Thank you so very much for your assistance.

Take care,

Mohammed

how can i use AjaxControlToolkit.resources.dll to use ajax with arabic language?

Hello.

I'm using ajax control toolkit and I'm having some difficulties , the direction and the alignment of the text can't be changed.

and in arabic it is different from english.

So how can i use the AjaxControlToolkit.resources.dll to apply the arabic language?

thanks

Hi,

You may specify the culture for the application in web.config. In globalization section.

For instance:
<globalization culture="en-us"/>

And you can refer to following documentations for more information:

http://msdn2.microsoft.com/en-us/library/c6zyy3s9.aspx
http://msdn2.microsoft.com/en-us/library/hy4kkhe0(VS.71).aspx

Hope this helps.

How can i use AJAX Control Toolkit in legacy ASP?

Hello to all,

like many i am new to AJAX and i am willing to dig in because i need to modernize an existing web application with pages in both in ASP (80%) and ASP.NET (20%) pages. I know the straightforward answer should be migrate all your asp in asp.net but unfortunately it's not an option.

Basically, what i am trying to do is to display a dragable panel on top those existing pages. The panel should be able to display information about the page. The user could also add new content in this panel and save seamlessly with AJAX.

First of all, if i want to reuse the widget from the toolkit, how can load them in ASP pages ?

Also, i read you can use the Ajax client library in non ASP.net. What does it mean ? I've look at it and it does seem very friendly. Any help would be appreciated.

Lastly, is it possible to have widget load from ASP integrated with an ASP.NET back-end for server side processing?

Thanks in advance for helping me out. I really would like to use this technology.

Olivier.

Well i got a solution that worked perfect for me: I am using Dojo. It's much more flexible in non ASP world and the toolkit set much richer as of now.

How can I use a email regular expression in Ajax Toolkit

Hi I am developing an application using the validations of AJAX Toolkit. In one screen i make the user input the email address. I want to have a regular expression which will validate the input done by user. How can i add a regular expression in Ajax Toolkit.

Early response will be appreciated.

Praveen Mishra

drag a regularexpression validator on your form & set its controltovalidate property and regularexpression property. The client side validations will trigger before the partial postback.

Cheers

Vishal Khanna

(pls mark as answer if reply helps)

See the last bullet on this page:http://blogs.visoftinc.com/archive/2007/09/23/asp.net-ajax--updatepanel-not-working--common-problems.aspx about using validators with an UpdatePanel (assuming this is what you mean by the "Ajax Toolkit")

To use the the ValidatorCallout with your RegularExpressionValidator, seehttp://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

-Damien

You have to set ValidationExpression Property of RegularExpressionValidator.control

http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.regularexpressionvalidator.validationexpression.aspx

How can I optimize using ASP.NET with ajax control toolkit ?

-I have finish a web application. But when I launch it . It was running slowly. I can't understand what's happen in my web application.

-I'm using SQL Server 2000. My database have approximately 40,000 records. I used DataTable to store all records which I got information from database and using gridview , datalist control inside update panel.

-Especially my web application often use ModalPopupExtender to Insert or Update some informations.

-Could you show me how to optimize my web application with asp.net?

Thanks in advance !

There is no magic cure for making a website run fast. You will have to look at the page size, the objects you are storing in memory, enable tracing on the page to see where bottlenecks may occur and look at the speed of any database queries you are running (i.e. look at the execution plan of your stored procedures).

How can I implement the following component using Ajax/ATLAS/Ajax Control Toolkit??

Hi All,

I'd like to implement something a little bit simmilar to a TreeView (with 2 levels). The structure I'd like to present is a set of Groups where one of them can be selected and then it expands (and collapses any previouslly opened group) presenting the subgroups and clicking on one of them it also expands to show the elements (also closing the previouslly opened groups).

MAIN GROUP 1 (opened)

-- GROUP 1 (closed)

-- GROUP2 (opened)

--- ELEMENT 1

--- ELEMENT2

-- GROUP3 (closed)

MAIN GROUP 2 (closed)

MAIN GROUP 3 (closed)

For user experience purposes I think two Accordion controls nested would be a very nice solution ( The external one will have the panes containing a Accordion control containing the Groups as panes and within this one a table or grid containing the elements), but I have to get the internal elements (either groups or elements) from a business object when a item is selected and shall be expanded).

Please could anyone tell me if it is possible and, if so, how can I implement this?

Thanks in advance,

Sergio

HI All,

Still looking for an answer.. Could anyone help me? I'm thinking about using AJax directly through a javascript function, get a table according the layout I need and put it into a DIV using innerHtml instead of using the component (a worst using experince, but seems the reasonable solution right now)