The time when our boss asked why we are using Client Side AJAX call method to create searchable Rad ComboBox, we got an idea to explain this to rest of the asp.net development community. After responding to his query, we are here to share our experience with which we created searchable Rad ComboBox with the help of AJAX Call. You can read and learn how we did it.
Abstract:- This article is describing how to make Searchable Rad ComboBox using the Client side AJAX Call.
At the time working with Telerik Rad ComboBox, we may find out different methods to populate Rad ComboBox. From various methods, I am going to explain how we can make Rad ComboBox searchable using client side AJAX Call. The Main benefit of this method is, the page will not post back while we are retrieving data using AJAX call from the server side methods. In this way we can get the data very quickly without refreshing page.
Here in my example, I am explaining the whole feature step by step. E.g like Viewer will see the Rad ComboBox on his web page and he will type some text in the Rad ComboBox and hit enter key. On this action, there is one client side event will fire and within this event one AJAX request will execute on code behind to get the result relevant to searched text.
I am explaining these things by the sample of code as how we can do it with the help of AJAX Call.
In the below mention piece of html code developer need to set the following property and settings for telerik Rad ComboBox:
<telerik:RadComboBox ID="rcbTeamMembers" runat="server" DataMember="DefaultView"
CheckBoxes="True" CloseDropDownOnBlur="true" DataTextField="TeamMember_Name"
DataValueField="TeamMember_ID" Height="160px" Width="369px" AllowCustomText="true"
EmptyMessage="Enter Team Member Name and Press Enter" DropDownWidth="369px"
OnClientKeyPressing="onTeamMemberClientKeyPress"
OnClientDropDownClosing="TMonClientClosing"
OnClientBlur="TMonClientBlur"LoadingMessage="Loading.." MarkFirstMatch="true">
</telerik:RadComboBox>
When viewer types some text in to Rad ComboBox and hit Enter key then that time Client side request will be sent. This request will retrieve data via AJAX Call on the basis of searched text. There are some Java scripts events are required to manage whole the things on the same .aspx page which are mention as below:
<script type="text/javascript">
function onTeamMemberClientKeyPress(sender, args) {
if (args.get_domEvent().keyCode == 13) {
sender.isSearch = true
sender.searchText = sender.get_text();
$.ajax({
url: '<%= Me.ResolveClientUrl("~/Views/Activity.aspx") %>/GetTeamMembers',
type: "POST",
data: JSON.stringify({ searchText: sender.get_text(), discussion_ID: '<%= WebObjects.CurrentDiscussionID %>' }),
contentType: "application/json; charset=utf-8",
dataType: "JSON", // type of data is JSON (must be upper case!)
timeout: 100000,
// callback handler that will be called on success
success: function (response, textStatus, jqXHR) {
// log a message to the console
fillCombo(sender, response);
sender.highlightAllMatches(sender.searchText);
},
// callback handler that will be called on error
error: function (jqXHR, textStatus, errorThrown) {
alert("The following error occured: " + errorThrown);
},
// callback handler that will be called on completion
// which means, either on success or error
complete: function () {
sender.set_text(sender.searchText);
}
});
}
else { sender.isSearch = false; }
}
function fillCombo(combo, result) {
combo.trackChanges();
combo.clearItems();
var items = result.d || result;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(item.Text);
comboItem.set_value(item.Value);
combo.get_items().add(comboItem);
}
combo.set_text(combo.searchText);
combo.commitChanges();
}
function TMonClientClosing(sender, args) {
if (sender.isSearch) {
args.set_cancel(true);
}
}
function TMonClientBlur(sender, args) {
sender.isSearch = false;
sender.searchText = "";
if (sender.get_text() != sender.get_emptyMessage()) {
}
sender.set_text("");
sender.hideDropDown();
}
</script>
Server side web method as below:-
<WebMethod()> _
Public Shared Function GetTeamMembers(ByVal searchText As String, ByVal discussion_ID As Object) As List(Of ComboInfo)
Dim db As New TeamMemberDataContext()
Dim result As New List(Of ComboInfo)()
Dim words As String() = searchText.Split(" ")
If Not String.IsNullOrEmpty(searchText) Then
Dim resultList As New Discussions
searchText = "%" & searchText & "%"
resultList = DiscussionController.GetTeamMemberBySearchText(searchText)
If resultList.TeamMemberSearchByText.Count > 0 Then
result = (From d In resultList.TeamMemberSearchByText.AsEnumerable() Where (words.All(Function(text) d.TeamMember_Name.Split(" ").Any(Function(s) s.ToLower.Contains(text.ToLower))))
Order By d.TeamMember_Name Select New ComboInfo() With {.Text = d.TeamMember_Name, .Value = d.TeamMember_ID}).ToList()
End If
End If
Return result
End Function
Above mention method “GetTeamMembers” is server side method, in to that method we are getting the List of data (Team members in my example). We are retrieving the data from the database by executing stored procedures and getting the result from the database within this method. Then after we are filtering the result as per our requirement from the result set by using the query and then final result set return in form of Combo Info.
After finding result from the sever side web method final result will be added in to the Rad combobox. At the end of process you can see the result as per searched text.
The Output screen looks like as below:
Asp.net MVC development team of Aegis Soft Tech has shared this article to let the developers know how to create searchable Rad ComboBox with AJAX Call. For any doubts or assistance, you can contact experts anytime from anywhere.
Get More Information About: mobile AMOLED screen repair machine
0 comments:
Post a Comment