Load on Demand using WCF and ItemTemplate

[Steele]

In this thread it shows how to bind to WCF which works, but only if you do NOT use an ItemTemplate...

It assumes you are binding with a SINGLE column in the dropdown.

Here is my ASPX:

<telerik:RadComboBox ID="rcbEnteredBy" runat="server"
    EnableLoadOnDemand="true"
    AllowCustomText="true"
    ChangeTextOnKeyBoardNavigation="True"
    IsCaseSensitive="False"
    EnableEmbeddedSkins="False"
    Skin="Moneta"
    MarkFirstMatch="True"
    ShowDropDownOnTextboxClick="true"
    Height="200" Width="150"
    HighlightTemplatedItems="true"
    OnClientItemsRequesting="OnUserItemsRequesting"
    TabIndex="4">
    <WebServiceSettings Method="GetUsers" Path="~/Services/Facility.svc" />
    <ItemTemplate>
        <ul>
             <li><%#DataBinder.Eval(Container.DataItem, "UserName")%></li>
             <li><%#DataBinder.Eval(Container.DataItem, "FullName")%></li>
        </ul>
    </ItemTemplate>
</telerik:RadComboBox>

If I populate the control with the demo provided, it loses all the info for the 2 columns in the ItemTemplate.

I have tried binding to a different class that returns a proper Json Array of my data and get nothing but errors.

A demo of how to accomplish this would be greatly appreciated.

Steele

[Atanas Korchev]

Hi Steele,

At the time being web service load on demand does not support templates. The template may contain arbitrary server controls which cannot be created entirely on the client-side. In case of simple HTML this could probably be achieved using ASP.NET Ajax 4 client-side templates. Unfortunately RadComboBox does not have a client-side databound event. Let me know if you are willing to try the ASP.NET Ajax 4 templates - I will prepare a new build of RadComboBox

Regards,
Atanas Korchev,
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steele]

Atanas:

Yes, I would be willing to use Asp.Net Ajax v4
I do have my own templating engine (created with WCF, XML Literals and Linq)
But I am willing to forgo that to use 2 features in Asp.Net Ajax 4, the Templating and Ado.Net Data Services.

The binding for Client Templates looks very good in Asp.Net Ajax 4 so lets give this a go and I will help you work out the quirks of getting it running well for the next official release.

Steele

[Simon]

Hi Steele,

I am writing regarding the the OnClientItemDataBound client-side event of RadComboBox.

We implemented it as a part of the control and is currently available in the version in the attached project.

The project illustrates how the event could be used alongside with ASP.NET AJAX 4.0 to achieve client-side templates with Load on Demand via a Web Service.

If you need the dev version of the Telerik.Web.UI assembly, please open a formal support ticket and request it there.

As a gratitude for your involvement in the matter your Telerik points have been updated.

Kind regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steele]

I don't see an attachment, is there a link for it?

Thanks

[Simon]

Hello Steele,

I am posting the attachment now.

Please excuse me for the omission.

Kind regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steele]

Thanks,

You guys are awesome.
This looks like it will do exactly what we need.

[Yaron]

First and foremost - great stuff on adding that capability (and adding ItemDataBound on the client-side).
Quick question - would it be possible to expand the WebServiceSetting tag to include:
1. The template?
2. The Text and Value attributes (associated with object's attributes)

For example:

<WebServiceSettings Method="GetItems" Path="TestWebService.asmx" TextAttribute="{{FirstName}} {{LastName}}" ValueAttribute="{{Id}}">
  <ItemTemplate>
    <table>
      <tr>
         <td style='width:150px'>{{FirstName}}</td>
         <td style='width:150px'>{{LastName}}</td>
      </tr>
    </table>
  </ItemTemplate>
</WebServiceSettings>

Thanks!

[Yaron]

As a side note, before noticing this, I implemented as follows:

1. Created a new RadComboBox extension class (MyRadComboBox)
2. Created a new WebServiceItemTemplate class (which contains the HTML tag) and added as property to MyRadComboBox
3. Added 2 new properties to MyRadComboBox - WebServiceValueAttribute and WebServiceTextAttribute (which then use the data retrieved from the web service to populate the item's value and text according to user specifications)
4. Overrode client-side _onWebServiceResponse

• Attach each data object to its appropriate item (which is now resolved by using the new DataBound event)
• Templatized by retrieving WebServiceItemTemplate (string-replace on each {{<attribute>}}, then item.innerHTML = ...) 
• Associated Value and Text by using same templating mechanism only with WebServiceValueAttribute and WebServiceTextAttribute.

The hitch I hit was with the following lines which I had to re-call after completing the templatization since the height calculation had to be done again after the item's templates were set (I fixed this by overriding raise_itemsRequested so it doesn't fire the event during the OnWebServiceResponse)

if (this._virtualScroll) {
  this._setUpScroll(this._endOfItems, this.get_childListElement());
}

if (this.get_dropDownVisible()) {
  if (this._slide) {
    this._slide.updateSize();
  }
  this._positionDropDown();
}

this.raise_itemsRequested(_122.get_context());

I'd be happy to elaborate upon demand.
Yaron Golan