[SiteFinity 5.0.2500] JQuery Accordion doesn't work

7 posts, 0 answers
  1. diego
    diego avatar
    17 posts
    Member since:
    Jul 2011

    Posted 14 Mar 2013 Link to this post

    Hello 
    i have the following problem: i would like to build an accordion in a RadTabStrip/RadPageView control
    Here you can find the sample page (DON'T PUSH THE SUBMIT BUTTON IN THE FINAL STEP TAB)
    The web mthod correctly returns the data, but when i try to depict in the latest tab, using the jquery accordion function, an error occurs: 
    Uncaught TypeError: Object [object Object] has no method 'accordion'

    Following, the page code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="richieste.aspx.cs" Inherits="SitefinityWebApp.richieste" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="ScriptManager1">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" EnableAJAX="true" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <script type="text/javascript">
            function onTabSelected(sender, args) {
                var tab = args.get_tab().get_text();
                var nSites = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_selectedItems().length;
                var nVars = $find("<%= RadGrid2.MasterTableView.ClientID %>").get_selectedItems().length;
                var from = $get("<%= dateFrom.ClientID %>").value;
                var to = $get("<%= dateTo.ClientID %>").value;
                if (tab == "Check your selection") {
                    $get("<%= TextBox2.ClientID %>").value = "gotcha";
                    if (nSites == 0) {
                        alert("Please select site(s)");
                        $find("<%= RadTabStrip1.ClientID %>").findTabByText("Select sites").set_selected(true);
                        return false;
                    }
                    if (nVars == 0) {
                        if ($get("<%= chAnc.ClientID %>").checked == false) {
                            alert("Please select variable(s)");
                            $find("<%= RadTabStrip1.ClientID %>").findTabByText("Select variables").set_selected(true);
                            return false;
                        }
                    }
                    if (from == "" && to == "") {
                        alert("Please select date range");
                        $find("<%= RadTabStrip1.ClientID %>").findTabByText("Final Step").set_selected(true);
                        return false;
                    }
     
                    //alert($get("<%= dateFrom.ClientID %>").value + " " + $get("<%= dateTo.ClientID %>").value);
                    var radgrid = $find('<%= RadGrid1.ClientID %>');
                    var idSiteList = new Array();
                    for (i = 0; i < radgrid.get_masterTableView().get_selectedItems().length; i++) {
                        idSiteList.push(radgrid.get_masterTableView().get_selectedItems()[i].getDataKeyValue("siteID"));
                    }
                    radgrid = $find('<%= RadGrid2.ClientID %>');
                    var varList = new Array();
                    for (i = 0; i < radgrid.get_masterTableView().get_selectedItems().length; i++) {
                        varList.push(radgrid.get_masterTableView().get_selectedItems()[i].getDataKeyValue("ID"));
                    }
                    var parsList = new Array();
                    if ($get("<%= chLev3.ClientID %>").checked) {
                        parsList.push(8);
                    }
                    if ($get("<%= chLev4.ClientID %>").checked) {
                        parsList.push(9);
                    }
                    if ($get("<%= chAnc.ClientID %>").checked) {
                        parsList.push(13);
                    }
                    var open = $get("<%= CheckBoxopen.ClientID %>").checked;
                    var _public = $get("<%= CheckBoxpub.ClientID %>").checked;
                    jsonData = '{ "Sites":"' + idSiteList.toString() + '", "Vars": "' + varList.toString() + '", "DataType":"' + parsList.toString() + '","Open":"'+open+'","Public":"'+_public+'" }';
                    $('#myDiv').html("Processing...");
                    //alert(obj);
                    $.ajax({
                        type: "POST",
                        url: "GService.asmx/ServerSideMethod",
                        data: "{'jreq':" + jsonData + "}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            $('#myDiv').html(msg.d);
                            $('#myDiv').accordion();
                        },
                        error: function (xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    
                }
                 
            }
        </script>
        <div style="width:990px; margin:auto;">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="990px"
                Skin="Office2010Silver" MultiPageID="RadMultiPag1" SelectedIndex="3" OnClientTabSelected="onTabSelected">
                <Tabs>
                    <telerik:RadTab Text="Select sites" Selected="True"></telerik:RadTab>
                    <telerik:RadTab Text="Select variables"></telerik:RadTab>
                    <telerik:RadTab Text="Additional parameters"></telerik:RadTab>
                    <telerik:RadTab Text="Final Step"></telerik:RadTab>
                    <telerik:RadTab Text="Check your selection"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPag1" runat="server" SelectedIndex="0"
                Width="990px">
            <telerik:RadPageView ID="RadPageView1" runat="server"  Style="overflow: hidden">
                <telerik:RadGrid id="RadGrid1" DataSourceID="SqlDataSource1" ShowStatusBar="true" runat="server" AllowPaging="false" AllowSorting="True"
                    AllowMultiRowSelection="True" AutoGenerateColumns="false" Width="100%" Height="400px" EnableViewState="true">
                    <ClientSettings EnableRowHoverStyle="true">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <MasterTableView ClientDataKeyNames="siteID">
                        <Columns>
                            <telerik:GridClientSelectColumn>
                            </telerik:GridClientSelectColumn>
                            <telerik:GridBoundColumn UniqueName="site"  DataField="site" HeaderText="Site"
                        SortExpression="site" />
                    <telerik:GridBoundColumn UniqueName="NAME" DataField="NAME" HeaderText="Site Name"
                        SortExpression="NAME" />
                    <telerik:GridBoundColumn UniqueName="resp" DataField="resp" HeaderText="Site Responsible"
                        SortExpression="resp" />
                    <telerik:GridBoundColumn UniqueName="Ecosystem" DataField="Ecosystem"
                        HeaderText="Ecosystem" SortExpression="Ecosystem"  />
                    <telerik:GridBoundColumn UniqueName="Nlat" DataField="Nlat" HeaderText="Latitude"
                        DataType="System.Double" ReadOnly="True" SortExpression="Nlat" />
                    <telerik:GridBoundColumn UniqueName="Nlon" DataField="Nlon" HeaderText="Longitude"
                        DataType="System.Double" ReadOnly="True" SortExpression="Nlon" />
                    <telerik:GridBoundColumn DataField="siteID" DataType="System.Int32"
                        FilterControlAltText="Filter siteID column" HeaderText="siteID" ReadOnly="True"
                        SortExpression="siteID" UniqueName="siteID" Visible="false">
                    </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings EnableRowHoverStyle="true">
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
                    </ClientSettings>
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                </telerik:RadGrid>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" Style="overflow: hidden">
                <telerik:RadGrid id="RadGrid2" DataSourceID="SqlDataSource2"
                 ShowStatusBar="true" runat="server" AllowPaging="false" AllowSorting="True"
                    AllowMultiRowSelection="True" AutoGenerateColumns="false" Width="100%" Height="400px">
                    <ClientSettings EnableRowHoverStyle="true">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <MasterTableView ClientDataKeyNames="ID">
                        <Columns>
                      <telerik:GridClientSelectColumn>
                      </telerik:GridClientSelectColumn>      
                    <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Variable Name"  />
                    <telerik:GridBoundColumn UniqueName="Description" DataField="Description" HeaderText="Description" SortExpression="Description" />
                    <telerik:GridBoundColumn UniqueName="Measurement_Unit" DataField="Measurement_Unit" HeaderText="Measurement Unit" SortExpression="Measurement_Unit" />
                    <telerik:GridBoundColumn UniqueName="mind" DataField="mind" HeaderText="Min. Date" SortExpression="mind" DataFormatString="{0:dd/MM/yyyy}" />
                    <telerik:GridBoundColumn UniqueName="maxd" DataField="maxd" HeaderText="Max. Date" SortExpression="maxd" DataFormatString="{0:dd/MM/yyyy}"/>
                    <telerik:GridBoundColumn DataField="ID" DataType="System.Int32"
                        FilterControlAltText="Filter ID column" HeaderText="ID" ReadOnly="True"
                        SortExpression="ID" UniqueName="ID" Visible="false">
                    </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings EnableRowHoverStyle="true">
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
                    </ClientSettings>
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                </telerik:RadGrid>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" Style="overflow: hidden">
               <table>
                <tr>
                    <td>
                        <asp:CheckBox ID="chLev3" runat="server" Text="Level 3 data files" /></td>
                </tr>
                <tr>
                    <td><asp:CheckBox ID="chLev4" runat="server" Text="Level 4 data files" /></td>
                </tr>
                <tr>
                    <td><asp:CheckBox ID="chAnc" runat="server" Text="Ancillary data files" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBoxopen" runat="server" AutoPostBack="False" OnCheckedChanged="CheckBoxopen_CheckedChanged"
                            Text="Only Open Data" ViewStateMode="Enabled" />
                    </td>
                    </tr>
                     <tr>
                    <td>
                        <asp:CheckBox ID="CheckBoxpub" runat="server" AutoPostBack="false" OnCheckedChanged="CheckBoxpub_CheckedChanged"
                            Text="Only Public Data" />
                    </td>
                </tr>
            </table>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server" Style="overflow: hidden">
                <telerik:RadDatePicker ID="dateFrom" runat="server" ShowPopupOnFocus="true">
                    <Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>
                    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                    <DateInput ID="DateInput1" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" runat="server"></DateInput>
                </telerik:RadDatePicker>
                To
                <telerik:RadDatePicker ID="dateTo" runat="server" ShowPopupOnFocus="true">
                    <Calendar ID="Calendar2" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>
                    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                    <DateInput ID="DateInput2" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy" runat="server"></DateInput>
                </telerik:RadDatePicker><br />
                Description<br /><asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="3"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click"  />  <br /><br /><asp:TextBox ID="Textmail" runat="server" Width="250px"></asp:TextBox>   
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView5" runat="server" Style="overflow: hidden">
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /><div id="myDiv"></div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:tcdcConnectionString %>" SelectCommand="SELECT distinct site,NAME,[site responsible] as resp, Ecosystem, Nlat, Nlon, ID as siteID FROM [projsites] where idp>0 order by site"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:tcdcConnectionString %>" SelectCommand="SELECT ID, Name,Description,Measurement_Unit, (select min(date) from tcdc.dbo.stats st where st.varid=vc.ID and st.value!=0) as mind,(select max(date) from tcdc.dbo.stats st where st.varid=vc.ID and st.value!=0) as maxd FROM tcdc.dbo.[varscomplete] vc where xque=1 order by name"></asp:SqlDataSource>
        </form>
    </body>
    </html>
     
    The we method result:
    [WebMethod]
            public string ServerSideMethod(JRequest jreq)
            {
                //return jreq.Sites.ToString();   
                return jreq.HtmlContent;
            }
     
    And, finally, the JRequest class I used to manage the ajax request:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace SitefinityWebApp
    {
         
        public class JRequest
        {
            private string sites = "";
            private string vars = "";
            private string dataType = "";
            private string initDate;
            private string endDate;
            private DateTime initDateTime;
            private DateTime endDateTime;
            private bool open = false;
            private bool _public = false;
            private char[] splits = { ','};
            public JRequest()
            {
            }
     
            public string Sites
            {
                set { sites = value; }
                get { return sites; }
            }
     
            public string Vars
            {
                set { vars = value; }
                get { return vars; }
            }
     
            public string DataType
            {
                set { dataType = value; }
                get { return dataType; }
            }
     
            public bool Open
            {
                set { open = value; }
                get { return open; }
            }
     
            public bool Public
            {
                set { _public = value; }
                get { return _public; }
            }
     
            public List<int> SitesList
            {
                get
                {
                    string[] sString = vars.Split(splits);
                    List<int> sList = new List<int>();
                    for (int i = 0; i < sString.Length; i++)
                    {
                        sList.Add(int.Parse(sString[i]));
                    }
                    return sList;
                }
            }
     
            public List<int> VarsList
            {
                get
                {
                    string[] vString = vars.Split(splits);
                    List<int> vList = new List<int>();
                    for (int i = 0; i < vString.Length; i++)
                    {
                        vList.Add(int.Parse(vString[i]));
                    }
                    return vList;
                }
            }
     
            public string HtmlContent
            {
                get
                {
                    string html = "";
                    html += "<h3>SELECTED SITES</h3>";
                    html += "<div>"+this.Sites+"</div>";
                    html += "<h3>SELECTED VARS</h3>";
                    html += "<div>" + this.Vars + "</div>";
                    html += "<h3>PARAMETERS</h3>";
                    html += "<div>" + this.DataType + "</div>";
                    html += "<h3>OPEN / PUBLIC</h3>";
                    html += "<div>" + this.Open + " / " + this.Public + "</div>";
                    return html;
                }
            }
     
        }
    }

    Thanks in advance for your help
    Regards
    Diego
  2. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 19 Mar 2013 Link to this post

    Hello Diego,

    The provided sample is inaccessible as there is an exception thrown when trying to navigate. Here is an screenshot of the exception. I can suggest you to use the RadPanelBar control, which provides similar functionality. Please refer to our online demo, demonstrating the behavior and the usage of the RadPanelBar.

    Kind regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. diego
    diego avatar
    17 posts
    Member since:
    Jul 2011

    Posted 19 Mar 2013 Link to this post

    hello nencho
    i was going on with the sample page and effectively i decided to use the RadPanel
    Thanx for your reply
    Diego
  4. diego
    diego avatar
    17 posts
    Member since:
    Jul 2011

    Posted 19 Mar 2013 Link to this post

    Hello
    I have another question to submit
    Here is the page 
    I have used the RadPanelBar control to summarize the choices of the user in the panels
    I woul like to know if it's possible to disable the rollover effect above the content of every panel item
    Thanx in advance
    Diego 
  5. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 21 Mar 2013 Link to this post

    Hello Diego,

    Could you specify what do you mean by rollover effect. In addition, if you could provide us with a screenshot or a video, it would be greatly appreciated.

    Greetings,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. diego
    diego avatar
    17 posts
    Member since:
    Jul 2011

    Posted 25 Mar 2013 Link to this post

    Hello Nencho
    What I mean is that the content of each item in the RadPanelBar seems to be a 'href'; in fact the mouse pointer -> hand pointer
    I would like to have pure text and, in case, to add custom link
    Is it possible with this component?
    Thanks and regards
    Diego
     
  7. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 28 Mar 2013 Link to this post

    Hello Diego,

    I can suggest you to use the ContentTemplate, in order to render each RadPanelItem, like demonstrated in our online demo here. In addition, please refer to our documentation article, demonstrating the usage of the Templates.

    Kind regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top