RadCombo and Ajax 4 Template

[Scott]

I am trying to impliment the "RadComboBox and ASP.NET AJAX 4.0 Preview – using client-side templates and webservice load on demand" solution in the blogs. The issue is that the MicrosoftAjaxTemplates.js is no longer in the MS ajax code and now resides in the Ajax control toolkit code. I have a master page with a RadScriptManager and am using a ScriptManager proxy in the content area of the page. I have followed the blog post and added a script reference to the proxy. Also I have added the EnableScriptCombine="false" to the master page RadScriptManager, no luck.

Is it possible to update the blog post with current deployments of the AJAX Rad Controls and the MS Ajax code?

Thanks
Scott

[Simon]

Hello Scott,

What issues do you have when you use the ToolkitScriptManager? Are they similar to those discussed in this forum thread? If so, please see the solution in this sticky forum post.

As for the client-side Templates and the blog post we are thinking of publishing another one that will show how to achieve the same result with the recently released jQuery Templates. As an addition we will update the old blog post's example to work with the ASP.NET AJAX Toolkit.

I hope this helps.

Regards,
Simon
the Telerik team

[Scott]

Hi Simon.
I am not getting the error that is resolved in your post. I am getting an error in the MicrosoftAjaxTemplates.js.  This is the highlighted line from the file:
Sys.registerPlugin({name:"activateElements",dom:b,plugin:function(h,e){var f=this.get(),i=Sys.Application,c=i._context,j=eb(P);f=f||document.documentElement;c.dataItem=typeof h===g?a:h;c.components=c.components||[];c.nodes=[];e=e!==d;Sys.query(f).each(function(){c.nodes.push(this);i._activateElement(this,c,j,e)});c.initializeComponents();c._onInstantiated(a,b);return c}})

The error is "Object doesn't support this property or method".  MicrosoftAjaxTemplates.js is no longer included in the Ajax 4.0 release and has been moved to the Ajax Control Toolkit. I downloaded the js file and created a scriptreference for it.

<asp:Content ID="Content2" ContentPlaceHolderID="cplMain" runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/scripts/MicrosoftAjaxTemplates.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, args) {
                combo = $find('<%= rcbNewActivityCID.ClientID %>');
                combo.clearSelection();
                combo.set_text("Type a Name");
            }
            function OnClientItemsRequesting(sender, eventArgs) {
                var context = eventArgs.get_context();
                context["FilterString"] = eventArgs.get_text();
            }
            function onItemDataBound(sender, eventArgs) {
                //the combo item var item = eventArgs.get_item();
                //the data item of type Employee var dataItem = eventArgs.get_dataItem();
                //this will be used when selecting an item - its text attribute will go to the input area
                item.get_attributes().setAttribute("text", dataItem.CUSTNAME);
                item.set_value(dataItem.CUSTNMBR);

                //this is a custom property used in the template to alternate the css styles
                dataItem.Index = item.get_index();

                var template = new Sys.UI.Template($get("myTemplate"));
                template.instantiateIn(item.get_element(), dataItem);
            }
            function onSelectedIndexChanged(sender, eventArgs) {
                var item = eventArgs.get_item();
                sender.set_text(item.get_attributes().getAttribute("text"));
                sender.set_value(item.get_value());
            }
        </script>
    </telerik:RadScriptBlock>
    <div id="myTemplate" class="sys-template">
<!--* if (Index % 2 == 0) { *-->
<table class="employeeTableAlt"> <tr> <td class="employeeFirstName">
                {{ CUSTNAME }}
            </td> <td class="employeeLastName">
                {{ ADDRESS1 }}
            </td> <td>
                {{ CITY }}
            </td> </tr> </table>
<!--* } else { *-->
<table class="employeeTable"> <tr> <td class="employeeFirstName">
                {{ CUSTNAME }}
            </td> <td class="employeeLastName">
                {{ ADDRESS1 }}
            </td> <td>
                {{ CITY }}
            </td> </tr> </table>
<!--* } *-->
</div>

The ComboBox:

                 <telerik:RadComboBox ID="rcbNewActivityCID" runat="server" AppendDataBoundItems="true"
                     DataTextField="CUSTNAME" DataValueField="CUSTNMBR" EnableLoadOnDemand="true"
                     EnableItemCaching="true" Filter="Contains" Skin="Outlook" OnClientItemsRequesting="OnClientItemsRequesting"
OnClientItemDataBound="onItemDataBound"
OnClientSelectedIndexChanged="onSelectedIndexChanged"
                     Text="Type Partial Name" Width="96px" DropDownWidth="450px">
                     <ExpandAnimation Type="none" />
                     <CollapseAnimation Type="none" />
                     <WebServiceSettings Path="~/CustomerServiceCenter/CustomerLookup.asmx" Method="GetCustomers_ex" />
                 </telerik:RadComboBox>

The only item that is different than the demo is the webmethod is not an IList. I have it defined as:
    Public Function GetCustomers_ex(ByVal context As RadComboBoxContext) As RadComboBoxData

Thank You for your help.
Scott

[Simon]

Hello Scott,

Thank you for clarifying.

As I tested the code it turned out that the functionality had been seriously changed from the Preview 6, which the blog post example used.

For instance, the second parameter of the InsntantiateIn method was the whole data source and the data item came third. This was also the cause of the error you were experiencing.

Additionally the if-else construct controlling the Template conditional rendering did not work.

With the lack of documentation on the subject finding the correct syntax will be a cumbersome and time-consuming task - one needs to go through the code and find it out manually.

So to resolve both issues you could:

• Move the data item argument to the third place: template.instantiateIn(item.get_element(), null, dataItem);
• Remove the conditional rendering logic leaving only one Template definition and use jQuery to apply the correct styles to achieve alternating rows:

  <div id="myTemplate" class="sys-template">
      <table>
          <tr>
              <td class="employeeFirstName">
                  {{ FirstName }}
              </td>
              <td class="employeeLastName">
                  {{ LastName }}
              </td>
              <td>
                  {{ Address }}
              </td>
          </tr>
      </table>
  </div>

  $telerik.$("table", item.get_element()).attr("className", item.get_index() % 2 == 0 ? "employeeTableAlt" : "employeeTable");

Once again, we will be blogging about the jQuery Template mechanism and the changes in the AjaxControlTookit scripts in the near future.

I hope this helps.

Sincerely yours,
Simon
the Telerik team

[Scott]

Thanks for looking into this.

Scott