Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[SiteFinity 5.0.2500] JQuery Accordion doesn't work

6 Answers 65 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
diego
Top achievements
Rank 1
diego asked on 14 Mar 2013, 09:53 AM
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

6 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 19 Mar 2013, 09:20 AM
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.
0
diego
Top achievements
Rank 1
answered on 19 Mar 2013, 11:36 AM
hello nencho
i was going on with the sample page and effectively i decided to use the RadPanel
Thanx for your reply
Diego
0
diego
Top achievements
Rank 1
answered on 19 Mar 2013, 04:30 PM
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 
0
Nencho
Telerik team
answered on 21 Mar 2013, 01:24 PM
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.
0
diego
Top achievements
Rank 1
answered on 25 Mar 2013, 09:59 AM
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
 
0
Nencho
Telerik team
answered on 28 Mar 2013, 09:04 AM
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.
Tags
General Discussions
Asked by
diego
Top achievements
Rank 1
Answers by
Nencho
Telerik team
diego
Top achievements
Rank 1
Share this question
or