This is a migrated thread and some comments may be shown as answers.

Kendo Tab is not visible while loading ajax

3 Answers 45 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
sutanu
Top achievements
Rank 1
sutanu asked on 03 Dec 2013, 01:21 PM
<%@ 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)
        {
                 
             
        }
    }
}

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 04 Dec 2013, 09:14 AM
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!
0
sutanu
Top achievements
Rank 1
answered on 04 Dec 2013, 09:53 AM
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
0
Dimo
Telerik team
answered on 06 Dec 2013, 08:34 AM
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!
Tags
TabStrip
Asked by
sutanu
Top achievements
Rank 1
Answers by
Dimo
Telerik team
sutanu
Top achievements
Rank 1
Share this question
or