RadCombo and Ajax 4 Template

5 posts, 1 answers
  1. Scott
    Scott avatar
    9 posts
    Member since:
    May 2008

    Posted 12 Oct 2010 Link to this post

    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
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 19 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Scott
    Scott avatar
    9 posts
    Member since:
    May 2008

    Posted 19 Oct 2010 Link to this post

    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
  4. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 25 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Scott
    Scott avatar
    9 posts
    Member since:
    May 2008

    Posted 01 Nov 2010 Link to this post

    Thanks for looking into this.

    Scott
Back to Top