Telerik RadComboBox with angularjs - asp.net

I have this Telerik RadComboBox and i want to bind it to angular js. I tried this
<telerik:RadComboBox
Width="100%"
ID="rcbPosition"
EmptyMessage="Please select position"
EnableLoadOnDemand="True"
ShowMoreResultsBox="True"
ng-model="Employee.PositionID"
EnableVirtualScrolling="True"
runat="server">
<WebServiceSettings
Path="~/WebService/wsPosition.asmx"
Method="GetPositions"></WebServiceSettings>
</telerik:RadComboBox>
but no luck.. any help please.

At the moment Telerik's Ajax controls do not support Angular directives. That's why your code is not working. Perhaps this will work for you.<telerik:RadComboBox
Width="100%"
ID="rcbPosition"
EmptyMessage="Please select position"
EnableLoadOnDemand="True"
ShowMoreResultsBox="True"
SelectedValue="Employee.PositionID"
EnableVirtualScrolling="True"
runat="server">
<WebServiceSettings
Path="~/WebService/wsPosition.asmx"
Method="GetPositions"></WebServiceSettings>
</telerik:RadComboBox>

Related

how to use Autocompleteextender in modal popupextender

I am using autocompleteextender in a modalpopupextender....the dropdown in auto complete is shown in background....this problem occured in chrome....in firefox give expected output......
My code is....
<asp:TextBox ID="txtpincode" runat="server" TabIndex="1"
CssClass="autotxtbx" AutoPostBack="True" OnTextChanged="txtpincode_TextChanged"
onchange="AutoClear()" Width="100"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1"
TargetControlID="txtpincode" ServiceMethod="getpincode"
MinimumPrefixLength="1" OnClientItemSelected="ItemSelected"
FirstRowSelected="true" runat="server" CompletionListItemCssClass="autocmpl"
CompletionListHighlightedItemCssClass="autotxt" UseContextKey="True" />
<asp:HiddenField ID="hdnUserField" runat="server" />
I use this in a modal popup extender....the resul in chrome is....!
Yes the only issue was with the AutoCompleteType. You can do it like this.
`AutoCompleteType="Disabled"`

Telerik controls : Combobox and RadDatePicker not inline on IE 11

My code design :
Keyword:<telerik:RadTextBox ID="rtbSearch" runat="server" Skin="Web20" Width="150px" EmptyMessage="Enter customer name..."></telerik:RadTextBox>
<telerik:RadComboBox ID="rcbProvince" Skin="Web20" runat="server"></telerik:RadComboBox>
Start <telerik:RadDatePicker ID="rdpStartDay" Skin="Web20" runat="server">
</telerik:RadDatePicker>
End <telerik:RadDatePicker ID="rdpEndDay" Skin="Web20" runat="server">
</telerik:RadDatePicker>
<telerik:RadButton ID="rbSearch" Text="Search" runat="server" Skin="Web20"></telerik:RadButton>
how to fix it, please help me, thanks.
p/s: it display perfect on other browsers
chrome :
after search and ask, i know the reason. I used Q3 2012 of controls telerik, so it not support for IE 11

force user select from autocomplete

i am beginner for asp.net . I now facing a problem . How can i force a user to select option from ajax control toolkit autocomplete?
Here is my sample code
<cus:cusTextBox ID="txtCMemberID" runat="server" Action="Edit"
CssClass="inputTextM" OnTextChanged="txtCMemberID_TextChanged"
AutoPostBack="True"></cus:cusTextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
ServicePath="~/Module/Common/autoComplete/acLewreMember.asmx"
MinimumPrefixLength="1" ServiceMethod="GetSuggestedStrings"
TargetControlID="txtCMemberID" CompletionInterval="10"
CompletionSetCount="3" EnableCaching="true"
CompletionListCssClass="completionListElement"
CompletionListItemCssClass="listItem"
CompletionListHighlightedItemCssClass="highlightedListItem"
FirstRowSelected="True"
ShowOnlyCurrentWordInCompletionListItem="True">
</asp:AutoCompleteExtender>
As you see the textbox is a custom control. Is that any way to force user to select option from autocomplete?Please provide me a sample code also. thanks
ASP.NET includes a useful feature called a validator.
<asp:TextBox ID="TextBox2" ValidationGroup="Group2" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="*Required" ValidationGroup="Group2"
ControlToValidate="TextBox2" runat="server" />
<asp:Button ID="Button2" Text="Validate Group2"
ValidationGroup="Group2" runat="server" />
Here is the resource link for msdn: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.requiredfieldvalidator.aspx
I'm not sure how these work with custom controls as I'm relatively new at asp. They also have a custom validator which might be more suited for your purposes, but like I said. I don't know exactly.
Note: If the client is using an old browser this won't work, so you also want to check on the server that this field isn't empty by using:
if (Page.IsValid)
{
//stuff to do in your event handler
}

RadioButtonList inside UpdatePanel inside Repeater, Can I?

I have a repeater with a RadioButtonList inside the ItemTemplate, but when the RadioButtonList.OnSelectedIndexChanged event fires it generates a full postback. What have I done wrong in my code below? How can I get the OnSelectedIndexChanged to generate an Async Postback?
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="sqlOptions">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="pnlA">
<ContentTemplate>
<strong>
<%# Eval("Name") %></strong><br />
<asp:RadioButtonList ID="RadioButtonList1"
DataSourceID="sqlOptionValues" runat="server"
DataTextField="id" DataValueField="Id" AutoPostBack="true"
OnSelectedIndexChanged="LoadPrice"
ValidationGroup="options" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ForeColor="Red" runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="Required Field"
ValidationGroup="options" />
<asp:SqlDataSource ID="sqlOptionValues" runat="server"
ConnectionString="<%$ ConnectionStrings:
ConnectionString6 %>"
SelectCommand='<%# "SELECT DISTINCT OptionValue.Name,
OptionValue.Id FROM CombinationDetail
INNER JOIN OptionValue
ON CombinationDetail.OptionValueId = OptionValue.Id
WHERE (OptionValue.OptionId =" +
Eval("Id") + ")" %>'>
</asp:SqlDataSource>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Many thanks for any help :)
This is a real-world use case. I have a page with Repeaters, Ajax Accordions inside of other Accordions, Update Panels inside other Update panels, you name it. The page works great, except when I want to update one of the Accordion panels with my RadioButtonList (RBL). Even with the RBL inside an update panel, it causes a postback of the entire page. I tried everything. I finally realized it wasn't me when I noticed my buttons would work just fine. I figure it must be a bug in either the framework or the Ajax Control Toolkit. I did find people reference this link all over the web (http://blog.smarx.com/posts/the-case-of-the-radiobuttonlist-half-trigger.aspx), but this link from 2007 is dead now and probably no longer applicable, so that's no help.
What I ended up doing was going with what works - that submit button. All I did was add an onclick attribute to the RBL to call a hidden button. Now you don't want to set the button to Visible=false because then the button won't appear in the generated markup. Instead, set the button's style to display:none; so that no one will see this hack, because yes, that's what this workaround is - it's a hack, but simple and just as effective as what you'd expect. Don't forget to remove the Autopostback="True" from your RBL.
CAVEAT: Because I'm using a hacked button for the onclick event, it's possible for the user to click in the area of the RBL, but not actually select an item. When this happens, our onclick triggers an AsyncPostBack and the codebehind logic will be processed, so please keep that in mind. To give you an idea of what I mean: all the Page_Load() events will be called, but rbl_Questions_SelectedIndexChanged() won't be if they happen to click in the area of the RBL without actually selecting an item. For my purposes this causes no issues in my logic and has no effect on the user.
Here's the Code:
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Button ID="btn_rbl_Questions" runat="server" style="display:none;"/>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
In the Page_Load() event:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
//Instead of using the AutoPostback of the RBL, use this instead.
rbl_Questions.Attributes.Add("onclick",
"document.getElementById('"
+ btn_rbl_Questions.ClientID
+ "').click();");
//Bind your RBL to a DataSource, add items programmatically,
// or add them in the aspx markup.
}
}
In the rbl_Questions_SelectedIndexChanged() event:
protected void rbl_Questions_SelectedIndexChanged(object sender, EventArgs e)
{
//Your code here.
//My code unhid the lbl_Result control and set its text value.
}
Update 05/24/2011
The above "hack" is no longer necessary (I am leaving it above since this was marked as the answer by the author). I have found the best way to do this, thanks to this SO Answer:
Updatepanel gives full postback instead of asyncpostback
The code is much simpler now, just remove what I put in the Page_Load() method and remove the Button I used in the Aspx page and add ClientIDMode="AutoID" and AutoPostBack="True" to the control you want the UpdatePanel to capture.
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
ClientIDMode="AutoID" AutoPostBack="true"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
MS changed how ClientID's are generated in .net 4.0 from "AutoID" to "Predictable" and I guess the ScriptManager or UpdatePanel's weren't updated correctly to use it. I can't find documentation on why that is anywhere or if it was left that way by design.
I seriously don't miss winforms.
Try this:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="pnlA">
You'll also need to setup
<Triggers>
//radio buttons
</Triggers>
Not sure how you'll do that since it's a dynamically built list.

ajax collaps panel not working in my application?

i am going to implement the collapsiblepane in my application but it is not getting any thing just two link buttons
this is my code
CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
AutoCollapse ="False" AutoExpand ="false" ScrollContents ="true" TargetControlID ="mypanel"
Collapsed ="true" CollapsedSize ="0" ExpandedSize ="300"
ExpandControlID ="mylink" CollapseControlID ="mylink2"
CollapsedText ="Show Details..." ExpandedText ="Hide Details..." runat="server">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID ="mypanel" runat ="Server" Visible ="False" >
<asp:TextBox ID="txt" runat ="server" ></asp:TextBox><br />
<asp:Button ID="btn" runat ="Server" Text ="Click" />
</asp:Panel>
<asp:LinkButton ID="mylink" runat ="Server" Text ="Mydetaails" OnClick="mylink_Click" ></asp:LinkButton>
<asp:LinkButton ID="mylink2" runat ="Server" Text ="HideMydetails" OnClick="mylink2_Click" ></asp:LinkButton>
I'm not sure but can see at least 2 problems:
You server tag of CollapsiblePanelExtender must be closed, so you have:
runat="server">
but it must be:
runat="server"/>
Did you recreate CSS classes? CollapsiblePanelExtender works by manipulating styles, so these styles must be present. Also look at note from ( http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx ) "Note: CollapsiblePanel assumes that the standard CSS box model is being used ... so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE's standards-compliant mode."

Resources