Tuesday, May 20, 2008

Telerik RadComboBox Auto Complete Example

Ok, I found a few blog post and some documentation from Telerik on how to create a web service to populate a RadComboBox. None of the examples where complete, so here is a very basic example to get you going.

First, in design mode drag a RadScriptManager to your page. Switch to design mode, and click on the smart tag. Add the whatever it is called to your web config. Then drag a RadComboBox to your page. Then add the the Javascript so you have something that looks like below. Some of the code is obscured by the right side bar, just select the code and copy paste into a text viewer and it should all be there. I need to find sometime to either find a new blogging platform or widen out my blog a bit.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik_Error._Default" %>
<%
@ 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>Untitled Page</title>
</
head>
<
body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function OnClientItemsRequesting(sender, eventArgs)
{
var context = eventArgs.get_context();
context[
"FilterString"] = eventArgs.get_text();
context[
"test"] = "2";
}
</script>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadComboBox runat="server" ID="RadComboBox1" Width="300px"
EnableLoadOnDemand="true"
OnClientItemsRequesting="OnClientItemsRequesting">
<WebServiceSettings Method="GetProducts" Path="Test.asmx" />
</telerik:RadComboBox>
</div>
</form>
</
body>
</
html>


Ok, half way done. Now create the webservice. I called mine GetProducts. In order for it to work you have to use the RadComboItemData object as well as Generic list. Here is a sample webservice.

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using Telerik.Web.UI;
using System.Collections.Generic;

namespace Telerik_Error
{
/// <summary>
/// Summary description for Test
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(
false)]
// To allow this Web Service to be called from script,
//using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Test : System.Web.Services.WebService
{

[WebMethod(EnableSession=
true)]
public RadComboBoxItemData[] GetProducts(object context)
{
IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
List<RadComboBoxItemData> result = new List<RadComboBoxItemData>();
for (int i = 0; i <= 5; i++)
{
RadComboBoxItemData itemData =
new RadComboBoxItemData();
itemData.Text = contextDictionary[
"test"].ToString() +
contextDictionary[
"FilterString"].ToString() + i.ToString();
itemData.Value =
"value" + i;
result.Add(itemData);
}
return result.ToArray();
}

}
}


This came from a sample project that I was working on called Telerik_Error, thus the weird namespace reference. You can ignore that. Also not that in the javascript you can add additional variables to the context object, like I did with the variable test. Hope this code helps. The next step would be to include data. You should be able to pull in a datatable from a database and loop through it add items once you get the base webservice up and running.

2 comments:

Craig Hinkel said...

Thanks. I just moved from the ajax toolkit to this control and your snippet helped the transition.
Regards.

infocyde said...

Glad my code could help.