Kendo Tab is not visible while loading ajax

4 posts, 0 answers
  1. Sutanu Mandal
    Sutanu Mandal avatar
    2 posts
    Member since:
    Mar 2010

    Posted 03 Dec 2013 Link to this post

    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SCExcelReportDashboardView.aspx.cs" Inherits="Shell.SharePoint.SSP.SSC.Visualization.SCExcelReportDashboardView" %>
     
    <html>
        <head id="head1" runat="server">
            <title>Excel Report</title>     
    <style type="text/css">
        ul
        {
        list-style-type:none;
        margin:0;
        padding:0;
        }
        li
        {
        display:inline !important;
        }  
    </style>
        </head>
        <body>
    <div id="loadingDivExcelReport" style="display: none; z-index: 1000; position: absolute; padding-top: 130px; padding-left: 50%;text-align:center">
    <img id="" alt="loading.." src="/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/loading-image.gif"><br>Loading content, please wait..
    </div>
     <table>
        <tr>
        <td >
            <div id="excelReportTabstrip"
                   
            </div>      
        </td>
        </tr>
    </table>
     
     <script type="text/javascript">
         var exportToExcelUrl;  
         function onSelect(e) {
             //alert("onSelect");
             $('#loadingDivExcelReport').css('display', 'block');
             if (e.item.innerText == "Export") {
                 window.location.href = exportToExcelUrl + "/model?$format=workbook";
             }     
             //kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());
         }
     
         function onActivate(e) {
             //alert("onActivate");
             $('#loadingDivExcelReport').css('display', 'none');
             //kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());
         }
     
         function onContentLoad(e) {
             //alert("onContentLoad");
             //kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
         }
     
         function onError(e) {
             alert("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
             //alert("Error Occured While Loading...!");
             //kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
         }
         $(function () {
             //debugger;
             function GetQueryParameters() {
                 var vars = [], hash;
                 var hrefValue = window.location.href;
                 hashes = hrefValue.slice(hrefValue.indexOf('?') + 1).split('&');
                 for (var i = 0; i < hashes.length; i++) {
                     hash = hashes[i].split('=');
                     vars.push(hash[0]);
                     vars[hash[0]] = hash[1];
                 }
                 return vars;
             }
             var tabStrip = $("#excelReportTabstrip").kendoTabStrip({ animation: false, collapsible: false, select: onSelect, activate: onActivate, contentLoad: onContentLoad, error: onError }).data('kendoTabStrip');
             var fileName = GetQueryParameters()["ExcelFileName"];
             var excelSheetInfo = GetQueryParameters()["SheetNames"].split('|');
             var startDateTime = GetQueryParameters()["StartDate"];
             var endDateTime = GetQueryParameters()["EndDate"];
             var analysisMode = GetQueryParameters()["AnalisysMode"];
             var currentWebUrl = window.location.pathname;
             currentWebUrl = currentWebUrl.substring(0, currentWebUrl.lastIndexOf('/') - 7);
             exportToExcelUrl = window.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName;
             for (var i = 0; i < excelSheetInfo.length; i++) {
                 var excelReportUrl =window.location.protocol+"//" + window.location.host + currentWebUrl + "_vti_bin/ExcelRest.aspx/Lists/SCExcelReports/" + fileName + "/model/Ranges('" + excelSheetInfo[i] + "')?Ranges('AnalysisPeriod')=" +
                                                "%22" + startDateTime + ";" + endDateTime + ";" + analysisMode + "%22";
                 tabStrip.append({
                     text: excelSheetInfo[i],
                     contentUrl: excelReportUrl
                 });
             }
             tabStrip.append({
                 text: 'Export',
                 imageUrl: "/_layouts/images/Shell.SharePoint.SP.SSC/KendoUI/ExportToExcel.png",
                 content: "Export to Microsoft Excel"
             });
             tabStrip.select(tabStrip.tabGroup.children('li').eq(0));
         });
     </script>
        </body>
    </html>
    using System;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using System.Web.UI;
    using Microsoft.SharePoint.Utilities;
    using Shell.SharePoint.SSP.SSC.Common;
    using System.Web.UI.HtmlControls;
     
    namespace Shell.SharePoint.SSP.SSC.Visualization
    {
        public partial class SCExcelReportDashboardView :Page
        {
            protected void Page_Init(object sender, EventArgs e)
            {  
                string[] jsArray = new string[] { "/SCJquery/jquery.min.js", "/SCJquery/kendo.all.min.js"};
     
                string[] cssArray = new string[] { "/SCCss/kendo.common.min.css", "/SCCss/kendo.default.min.css"};
     
                for (int jsIndex = 0; jsIndex < jsArray.Length; jsIndex++)
                {
                    HtmlGenericControl jScript = new HtmlGenericControl("script");
                    jScript.Attributes.Add("type", "text/javascript");
                    jScript.Attributes.Add("src", SPContext.Current.Site.Url + jsArray[jsIndex]);
                    Page.Header.Controls.Add(jScript);
                }
                for (int cssIndex = 0; cssIndex < cssArray.Length; cssIndex++)
                {
                    HtmlLink cssLink = new HtmlLink();
                    cssLink.Href = SPContext.Current.Site.Url + cssArray[cssIndex];
                    cssLink.Attributes.Add("rel", "stylesheet");
                    cssLink.Attributes.Add("type", "text/css");
                    Page.Header.Controls.Add(cssLink);
                }
                 
            }
            
            protected void Page_Load(object sender, EventArgs e)
            {
                     
                 
            }
        }
    }
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Dec 2013 Link to this post

    Hi Sutanu,

    Please avoid posting duplicate forum threads and support tickets.

    The observed problem may be related to custom CSS styles on the page. For example, enforcing an inline display to all <li> elements on the page will almost surely break something.

    In addition, quirks mode (no DOCTYPE on the page) triggers legacy browser rendering and various browser bugs. Quirks mode must not be used.

    http://docs.kendoui.com/getting-started/technical-requirements#supported-desktop-browsers

    http://www.quirksmode.org/css/quirksmode.html

    You can refer to the following demo and compare it with your implementation.

    http://demos.kendoui.com/web/tabstrip/ajax.html

    If the problem persists, please provide a standalone fully runnable example.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Sutanu Mandal
    Sutanu Mandal avatar
    2 posts
    Member since:
    Mar 2010

    Posted 04 Dec 2013 Link to this post

    I have Tried putting  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    & removed the Style part

    <style type="text/css">
        ul
        {
        list-style-type:none;
        margin:0;
        padding:0;
        }
        li
        {
        display:inline !important;
        }   
    </style>

    But i am getting same issue in IE 8.. in Chrome its working perfectly. I have attached the CSS & JS file please check whether i am using the correct CSS & JS

    Thanks
    Sutanu
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Dec 2013 Link to this post

    Hello Sutanu,

    Since I am not able to reproduce the described problem, please send a runnable demo, as requested. Alternatively, you can create a jsFiddle / jsBin online example.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready