Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,701 questions
0 answers
293 views
Resizing of PANE of Splitter is Very Slow

While using iframe within splitter, is giving problem to resize splitter PANE by dragging. it is very slow. In my case I don’t need to resize the content of the splitter.

 1.   In My case I have spitted entire window into six PANES by kendo splitter. In every PANE we have one one iframe. Now while trying to drag, it is trying to resize the Iframe for that reason dragging of splitter is very slow.

 2.  We have tried contentURL which is refreshing entire page.
 For above two problems I can not use splitter in web page.

Can anyone tell me what I have to do to refresh particular PANE 
Is it possible to refresh particular splitter pane?
Followings are my code.

 

<%@ page session="true"%>
<%@page import="com.MATE.actions.DashBoard_MorC" %>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%@ page session="true"%>
<%@page import="java.io.*"%>
<%@page import="java.net.*"%>
<%@page import="javax.servlet.*"%>
<%@page import="com.MATE.connectionpool.*" %>

<%
            String clientcode = "DEMO001";//(String) session.getAttribute("CLIENTCODE");
            String sessionNo = "123456";//(String) session.getAttribute("SESSIONNO");
            session.setAttribute("CLIENTCODE", clientcode.toUpperCase());
            session.setAttribute("SESSIONNO", sessionNo);
            java.util.TreeMap ScriptPool = new java.util.TreeMap();
            java.util.Vector SeriesVector = new java.util.Vector();
            //out.print(clientcode);
%>
<%
            //if (request.getParameter("OrdCancelParam") != null) {
           // out.print(request.getAttribute("OrdCancelParam"));
            //out.print("ssz  " +(String) request.getParameter("msg"));
            DashBoard_MorC MCO = new DashBoard_MorC();
            //MCO.setSessionNo(sessionNo.toUpperCase());
            MCO.doPost(request, response);
           // }
%>

<html>
    <head>
        <title>DashBoard</title>

        <link href="./addi/styles/kendo.common.css" rel="stylesheet">
        <link href="./addi/styles/kendo.kendo.css" rel="stylesheet">
        <script src="./addi/js/jquery.js"></script>
        <script src="./addi/js/kendo.core.js"></script>
        <script src="./addi/js/kendo.data.odata.js"></script>
        <script src="./addi/js/kendo.data.js"></script>
        <script src="./addi/js/kendo.pageable.js"></script>
        <script src="./addi/js/kendo.sortable.js"></script>
        <script src="./addi/js/kendo.grid.js"></script>
        <!script src="./addi/js/kendo.splitter.js"><!/script>
        <script src="./addi/js/kendo.tabstrip.js"></script>
        <script src="./addi/js/kendo.fx.js"></script>
        <script src="./addi/js/kendo.window.js"></script>

    <!New added for splitter get resize automatically>
    <link href=".addi/styles/kendo.common.min.css" rel="stylesheet" />
    <link href=".addi/styles/kendo.kendo.min.css" rel="Stylesheet"/>
    <script src=".addi/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js" ></script>
<!script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"><!/script>
    <!New added end>

        <!import for button>
        <link href="http://cdn.kendostatic.com/2011.3.1007/styles/examples.min.css" rel="stylesheet"/>
        <link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css" rel="stylesheet"/>
        <!script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><!/script>

        <!end import>
    <script src="./js/date.format.js" ></script>

    <style>
        iframe{ height: 100%; width: 100%; margin: 0px; border: 0 ; }
        /*   body    { font-size: 11px; color: #000000; font-family: tahoma;     }
           select  { font-size: 11px; color: #333333; font-family: tahoma;   }
           td,th   { font-size: 11px; color: #000000; font-family: tahoma;     }
           html, body { overflow:hidden}  /* for horizontal scrollbar */
    </style>
    <style type="text/css">
        /* A:link { text-decoration: underline; color: aqua }
         A:visited { text-decoration: underline; color: aqua }*/
        /*  a.t-link.t-state-hover { background-color: #FCBA95}*/
    </style>

    <script language="javascript">
        document.onkeydown = keyhandler;
        function keyhandler(e)
        {
            document.onhelp = function() {return(false);}
            window.onhelp = function() {return(false);}
            var Key = (window.event) ? event.keyCode : e.keyCode;
            if (Key == 112 ||Key == 113 ||Key == 115 ||Key == 116 ||Key == 117 ||  Key == 123)
            {
                event.keyCode = 0;
                event.returnValue = false;
            }
            if (Key == 114)
            {
                document.onhelp = function() {return(false);}
                window.onhelp = function() {return(false);}
                event.keyCode = 0;
                window.open("pending_order.jsp",'','height=400,width='+screen.width+',left=0,top=180,location=no,menubar=no,status=no,scrollbars=no,resizable=yes,location=no');
                return false;
            }
            if (Key == 119)
            {
                document.onhelp = function() {return(false);}
                window.onhelp = function() {return(false);}
                //event.keyCode = 0;
                window.open("DashBoard_Tradelog.jsp",'','height=400,width='+screen.width+',left=0,top=180,location=no,menubar=no,status=no,scrollbars=no,resizable=yes,location=no');
                return false;
            }
            if (Key == 27)
            {
               //alert("zz");
               //document.getElementById("window").style.display="none";
               var wnd = $("#window").data("kendoWindow");
               // visible: false
               wnd.close;
               return false;
            }
        }

        function changeBg(){
                document.getElementById("cnfBtn").style.background="#f17946";
            }

            function changeBg1(){
                document.getElementById("cnfBtn").style.background="#B0B9C2";
            }
    </script>
<script>
    function send(){
        //if($("#cnfBtn").html()=="<b>Cancelled</b>")
        //{

            //alert("You have already cancelled order.");
            //$('#msg').html("");
        //}
        //else{
        //  alert("zz");
        //document.forms["DashBoardForm"].submit();
        //document.getElementById("OrdCancelParam").value = "ok";
        var rows = $("#Pending tr"); // skip the header row
        //alert(rows.length);
        rows.each(function() {
            // var rate_input = $("td:nth-child(2) input", this);
            //$(this).children("#Pending td").each(function() {
            var first  = $("#Pending td").eq(0).html();
            var second = $("#Pending td").eq(1).html();
            // alert(first+" "+second);
        });
        $("#cnfBtn").html("<b>Cancelled</b>");
        $("#cnfBtn").css('background-color','#F5F4EA');
        $("#cnfBtn").attr('disabled', 'disabled');
        // });

        //document.forms["DashBoardForm"].submit();
        $.post('DashBoard.jsp?msg="hi"', $("#DashBoardForm").serialize(), function(data) {
                $('#msg').html("Message successfuly sent to RMS");
                $('OrdCancelParam').value = "OrderCancel";
 });
        //alert("Message successfuly sent to RMS");
        //$("#window").data("kendoWindow").close();
       // }
    }
</script>
</head>

<body onload="clockTick();">
    <form id="DashBoardForm" name="DashBoardForm" action="DashBoard.jsp" method="post" style="margin: 0px;" border="0">
    <div>
        <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" cellpadding="0">
            <tr>
                <!td valign="top" width="8%" align="left">
                    <td valign="top" width="3%" align="left">
                    <!img id="" border="0" src="images/Wellknowmtech_logo2.jpg" width="251" height="70" alt="logo">
                <img id="" border="0"  src="images/WIPL_logo.jpg" width="80" height="70" alt="logo"></td>

                <td valign="bottom" width="15%">
                    <img src="images/IPad Icon/Letter-B-lg-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-S-red-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-P-grey-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-T-dg-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-N-violet-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-D-pink-icon.png" height="25" width="25">
                    <img src="images/IPad Icon/Letter-E-blue-icon.png" height="25" width="25">
                </td>
                <td width="20%">
                    <table>
                    Gross Exp
                    Gross Exp used
                    Available Exp
                    M2M
                    </table>
                </td>
                <td valign="top" width="31%">
                    <table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" cellpadding="0">
                        <tr>
                            <td height="28" align="right" style="color: blue;font-size: small">&nbsp;&nbsp;
                                <label id="clock1">CurrentTime</label>
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><span class="welcometext">Welcome &nbsp;</span><span class="greentext"><%=clientcode%></span></td>
                        </tr>
                        <tr>
                            <td colspan="100" >
                                <ul id="sddm">
                                    <li >View
                                        <ul><div style="z-index: 30">
                                                <li ><a href="#" onclick="OpenReport('DashBoard_Exposure.jsp')">Exposure</a></li>
                                                <li><a href="#" onclick="OpenReport('DashBoard_PO.jsp')">Order Book &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(F3)</a></li>
                                                <li><a href="#" onclick="OpenReport('DashBoard_Tradelog.jsp')">Trade Book &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(F8)</a></li>
                                                <li><a href="#" onclick="OpenReport('DashBoard_Netposition_new.jsp')">Net Position &nbsp;&nbsp;(ALT+F6)</a></li>
                                                <li><a href="#" onclick="OpenReport('clientactivity.jsp')">Client Activity</a></li>
                                                <li><a href="#" onclick="OpenReport('obligation.jsp')">Obligation</a></li>
                                                <li><a href="#" onclick="OpenReport('DeliveryReport.jsp')">Delivery Report</a></li>
                                                <li><a href="#" onclick="OpenReport('assetsreport.jsp')">ASSET Report</a></li>
                                            </div></ul>
                                    </li>
                                    <li>Risk Watch
                                        <ul>
                                            <li><a href="#" onclick="OpenReport('DashBoard_Exposure.jsp')">Exposure Details</a></li>
                                            <li><a href="#" onclick="OpenReport('spandetails.jsp')">Span Details</a></li>
                                            <li><a href="#" onclick="OpenReport('initialreport.jsp')">Initial Margin</a></li>
                                        </ul>
                                    </li>
                                    <li>Ex.
                                        <ul>
                                            <li><a href="#" onclick="OpenReport('exercise.jsp')">Excercise</a></li>
                                            <li><a href="#" onclick="OpenReport('excercisebook.jsp')">Exercise Book</a></li>
                                        </ul>
                                    </li>
                                    <li>Calculator
                                        <ul>
                                            <li><a href="#" onclick="OpenReport('calculator.jsp')">Normal Calculator</a></li>
                                            <li><a href="#" onclick="OpenReport('futurecalculator.jsp')">Future Calculator</a></li>
                                            <li><a href="#" onclick="OpenReport('optioncal.jsp')">Option Calculator</a></li>
                                        </ul>
                                    </li>
                                    <li>Tools
                                        <ul>
                                            <li><a href="#" onclick="OpenReport('preferences_1.jsp')">Preferences</a></li>
                                            <li><a href="#" onclick="OpenReport('BhavCopy.jsp')">Bhav Copy</a></li>
                                            <li><a href="#" onclick="OpenReport('login.jsp?msg=logout')">Log Out</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div id="tabstrip" style="height: 100%">
            <ul>
                <li>Market Watch</li>
                <li>M2M</li>
            </ul>
            <div>
                <div id="marketwatch">
                    <iframe src="DashBoard_MW.jsp" scrolling="yes" ></iframe>
                </div>
            </div>
            <div>
                <div id="vertical" style="height: 100%;">
                    <div>
                        <div id="horizontal1" style="height: 100%; width: 100%; border: 0;  vertical-align: top">
                            <div><iframe src="DashBoard_Tradelog.jsp"  style=" width: 100%" scrolling="no" ></iframe></div>
                            <div><iframe src="DashBoard_Tradelog.jsp"  style=" width: 100%" scrolling="no"></iframe></div>
                        </div>
                    </div>
                    <div>
                        <div id="horizontal2" style="height: 100%; width: 100%; border: 0; ">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
<div id="window"></div>
<div id="window1"></div>
<div id="window2"></div>
<div id="window3"></div>
<div id="window4"></div>
<div id="window5"></div>
<div id="window6"></div>
<div id="window7"></div>
<div id="window8"></div>
<div id="window9"></div>
<div id="window10"></div>
<div id="window11"></div>
<div id="window12"></div>
<div id="window13"></div>
<div id="window14"></div>
<div id="window15"></div>
<div id="window16"></div>
<div id="window17"></div>

        <script type="text/javascript">

                var ua = navigator.userAgent;
if(ua == "Mozilla/5.0 (Windows; U; en-US) AppleWebKit/533.19.4 (KHTML, like Gecko) AdobeAIR/3.0")
    //alert("true");
        heightValue= screen.height*1.5;
else
   // alert("false");
        heightValue= screen.height*.75;

            function onSelect(e) {
                setTimeout( function () {
                    $(e.contentElement).find(".t-splitter").each( function () {
                     //   $(this).data("kendoSplitter")._resize();
                    });
                }, 410 );
            }

            $(document).ready(function() {
                $("#tabstrip").kendoTabStrip();

                $("#marketwatch").css({
                    height: heightValue,
                    border: 1
                });

                $("#vertical").kendoSplitter({
                    orientation: "horizontal",
                    panes: [
                        { collapsible: true },
                        { collapsible: true },
                        { collapsible: true }
                  ]
                }).css({
                     height: heightValue,
                     //  height: device-height,
                    border: 1
                });

                $("#horizontal1").kendoSplitter({
                    orientation: "vertical",
                     panes: [
                         { collapsible: true , resizable: true},
                         { collapsible: true,resizable: true }
                     ]
                     //panes: [ {collapsible: true, size: "50%"}, {} ]

                    //panes: [
                      //  { collapsible: true },
                       // { collapsible: false },
                        //{ collapsible: true }
                    //]
                }).css({
                     height: '100%',
                    border: 0
                });

 

                $("#horizontal2").kendoSplitter({
                    orientation: "vertical",
                     //panes: [ {collapsible: true, size: "60%"}, {} ]
                     //panes: [ {collapsible: true, size: "50%"}, {} ]

                    panes: [
                        { collapsible: false,size: "30%"},
                        { collapsible: false,size: "30%" },
                        {contentUrl: 'TradeLog_test_control.jsp', collapsible: true ,resizable: true}
                    ]
                }).css({
                    // height: '100%',
                    border: 0
                });

                $("#sddm").kendoMenu({
                    animation: {
                        hoverDelay: 500
                    }
                }).css({
                    Zindex: 0

                });

                  $("#window").kendoWindow({
                    draggable: true,
                    resizable: false,
                    width: screen.width *.80,
                    height:"230px" ,
                    title: "Modal Window",
                    modal: true,
                    visible: false
                    //actions: ["Refresh", "Maximize", "Close"]
                });

                $("#window1,#window2,#window3,#window4,#window5,#window6,#window7,#window8,\n\
                   #window9,#window10,#window11,#window12,#window16,#window17").kendoWindow({
                    draggable: true,
                    resizable: true,
                    width: screen.width *.80,
                    height:"230px" ,
                    //setIcon: "http://www.fstoke.me/favicon.ico",
                    //title: "Window 1",
                    modal: false,
                    visible: false
                    //actions: ["Refresh", "Maximize", "Close"]
                });

                $("#window13,#window14,#window15").kendoWindow({
                    draggable: true,
                    resizable: true,
                    width: screen.width *.20,
                    height:"230px" ,
                    //title: "Window 1",
                    modal: false,
                    visible: false
                    //actions: ["Refresh", "Maximize", "Close"]
                });

            });

 

//var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
//var ss = /Mozila/i.test(ua);
 //alert(ua);

        </script>
        <script language="javascript">
            openWins = new Array();
            curWin = 0;
            function OpenReport(report)
            {

                if(report=='DashBoard_PO.jsp')
                {
                    var window1 = $("#window1").data("kendoWindow");
                    window1.center();
                    window1.title("PENDING ORDER");
                    window1.content('<iframe src="DashBoard_PO.jsp" scrolling="yes" ></iframe>');
                    window1.open();
                }
                else if(report=='DashBoard_Exposure.jsp')
                {
                    var window2 = $("#window2").data("kendoWindow");
                    window2.center();
                    window2.title("EXPOSURE");
                    window2.content('<iframe src="DashBoard_Exposure.jsp" scrolling="yes" ></iframe>');
                    window2.open();
                }
                else if(report=='DashBoard_Tradelog.jsp')
                {
                    var window3 = $("#window3").data("kendoWindow");
                    window3.center();
                    window3.title("TRADE LOG");
                    window3.content('<iframe src="DashBoard_Tradelog.jsp" scrolling="yes" ></iframe>');
                    window3.open();
                }
                else if(report=='DashBoard_Netposition_new.jsp')
                {
                    var window4 = $("#window4").data("kendoWindow");
                    window4.center();
                    window4.title("NET POSITION");
                    window4.content('<iframe src="DashBoard_Netposition_new.jsp" scrolling="no" ></iframe>');
                    window4.open();
                }
                else if(report=='clientactivity.jsp')
                {
                    var window5 = $("#window5").data("kendoWindow");
                    window5.center();
                    window5.title("CLIENT ACTIVITY");
                    window5.content('<iframe src="clientactivity.jsp" scrolling="yes" ></iframe>');
                    window5.open();
                }
                else if(report=='obligation.jsp')
                {
                    var window6 = $("#window6").data("kendoWindow");
                    window6.center();
                    window6.title("OBLIGATION REPORT");
                    window6.content('<iframe src="obligation.jsp" scrolling="yes" ></iframe>');
                    window6.open();
                }
                else if(report=='DeliveryReport.jsp')
                {
                    var window7 = $("#window7").data("kendoWindow");
                    window7.center();
                    window7.title("DELIVERY REPORT");

                    $("#window7").ready(function() {
                        window7.content('<iframe src="DeliveryReport.jsp" scrolling="yes" ></iframe>');
                        });
                   // window7.content('<iframe src="DeliveryReport.jsp" scrolling="yes" ></iframe>');
                    window7.open();
                }
                else if(report=='assetsreport.jsp')
                {
                    var window8 = $("#window8").data("kendoWindow");
                    window8.center();
                    window8.title("ALL ASSETS REPORT");
                    window8.content('<iframe src="assetsreport.jsp" scrolling="yes" ></iframe>');
                    window8.open();
                }
                else if(report=='spandetails.jsp')
                {
                    var window9 = $("#window9").data("kendoWindow");
                    window9.center();
                    window9.title("SPAN DETAILS");
                    window9.content('<iframe src="spandetails.jsp" scrolling="yes" ></iframe>');
                    window9.open();
                }
                else if(report=='initialreport.jsp')
                {
                    var window10 = $("#window10").data("kendoWindow");
                    window10.center();
                    window10.title("INITIAL REPORT");
                    window10.content('<iframe src="initialreport.jsp" scrolling="yes" ></iframe>');
                    window10.open();
                }
                else if(report=='exercise.jsp')
                {
                    var window11 = $("#window11").data("kendoWindow");
                    window11.center();
                    window11.content('<iframe src="exercise.jsp" scrolling="yes" ></iframe>');
                    window11.open();
                }
                else if(report=='excercisebook.jsp')
                {
                    var window12 = $("#window12").data("kendoWindow");
                    window12.center();
                    window12.content('<iframe src="excercisebook.jsp" scrolling="yes" ></iframe>');
                    window12.open();
                }
                else if(report=='calculator.jsp')
                {
                    var window13 = $("#window13").data("kendoWindow");
                    window13.center();
                    window13.content('<iframe src="calculator.jsp" scrolling="yes" ></iframe>');
                    window13.open();
                }
                else if(report=='futurecalculator.jsp')
                {
                    var window14 = $("#window14").data("kendoWindow");
                    window14.center();
                    window14.content('<iframe src="futurecalculator.jsp" scrolling="yes" ></iframe>');
                    window14.open();
                }
                else if(report=='optioncal.jsp')
                {
                    var window15 = $("#window15").data("kendoWindow");
                    window15.center();
                    window15.content('<iframe src="optioncal.jsp" scrolling="yes" ></iframe>');
                    window15.open();
                }
                else if(report=='preferences_1.jsp')
                {
                    var window16 = $("#window16").data("kendoWindow");
                    window16.center();
                    window16.content('<iframe src="preferences_1.jsp" scrolling="yes" ></iframe>');
                    window16.open();
                }
                else if(report=='BhavCopy.jsp')
                {
                    var window17 = $("#window17").data("kendoWindow");
                    window17.center();
                   // $("#window17").ready(function() {
                        window17.content('<iframe src="BhavCopy.jsp" scrolling="yes" ></iframe>');
                  //      });

                    window17.open();
                }

 

/*
                if(report=='preferences_1.jsp')
                {
                    openWins[curWin++] =window.open(report,'','height=590,width='+screen.width+',left=10,top=20,location=no,menubar=no,status=no,scrollbars=no,resizable=no,location=no');
                }
                else if(report=='login.jsp?msg=logout')
                {
                    openWins[curWin++] =window.open(report,'','height='+screen.height+',width='+screen.width+',left=0,top=0,location=no,menubar=no,status=no,scrollbars=no,resizable=no,location=no');window.close();
                }
                else if(report=='calculator.jsp')
                {
                    openWins[curWin++] =window.open(report,'','height=250,width=260,left=50,top=180,location=no,menubar=no,status=no,scrollbars=no,resizable=no,location=no');
                }
                else if(report=='futurecalculator.jsp')
                {
                    openWins[curWin++] =window.open(report,'','height=180,width=100,left=50,top=180,location=no,menubar=no,status=no,scrollbars=no,resizable=no,location=no');
                }
                else if(report=='optioncal.jsp')
                {
                    openWins[curWin++] =window.open(report,'','height=240,width=380,left=50,top=180,location=no,menubar=no,status=no,scrollbars=no,resizable=no,location=no');
                }
                else
                {
                    openWins[curWin++] =window.open(report,'','height=400,width='+screen.width+',left=0,top=180,location=no,menubar=no,status=no,scrollbars=yes,resizable=yes,location=no');
                }
*/

            }

            function clockTick()
            {
                currentTime = new Date();
                // document.getElementById('clock').value = " "+currentTime;
                // document.getElementById('clock').blur();
                var time = currentTime.getHours()+":" + currentTime.getMinutes() +":" +currentTime.getSeconds();
                var date = currentTime.getDate() +"/" + (currentTime.getMonth() +1)  +"/" +currentTime.getFullYear();
                //document.getElementById('clock1').innerHTML = currentTime.getTime();
                document.getElementById('clock1').innerHTML = date +" - " + time;
                //document.getElementById('clock1').innerHTML =  dateFormat(currentTime,"dd-MM-yyyy h:mm:ss tt");
                setTimeout("clockTick()", 1000);
            }
        </script>
    </div>
    </form>
</body>
</html>

Splitter
Nirmal
Top achievements
Rank 1
 asked on 06 Nov 2011
4 answers
1.2K+ views
language localization 
I am trying to localize the datePicker widget to show the date in Italian format and get 
the text shown on the popup in Italian as well.

here is what I load in the <head> section:

<script src="/os/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<!-- tried also jquery 1.6.2, but 1.6.4 fixes an issue with modal popup window -->

<link rel="stylesheet" href="/os/kendo/styles/kendo.common.min.css" type="text/css" />
<link rel="stylesheet" href="/os/kendo/styles/kendo.kendo.min.css" type="text/css" />
<script src="/os/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/os/kendo/js/cultures/kendo.culture.it-IT.js" type="text/javascript"></script>



<input id="dataInizio" name="dataInizio" value="31/10/2011" size="12" maxlength="10" />
<script type="text/javascript">
$(document).ready(function(){$("#dataInizio").kendoDatePicker();});
$("#dataInizio").kendoDatePicker({format: "dd/MM/yyyy"});
</script>
Actually, when the page loads you can see the date - properly formatted - for a while, then it
disappear, showing the field empty.
I am probably doing something wrong can you please give an example about how localize in
different 'cultures'?
Thanks!
DatePicker
Ugo
Top achievements
Rank 1
 answered on 06 Nov 2011
0 answers
47 views
When can we expect the next beta?

When can we expect the next beta?

General Discussions
علی اکبر
Top achievements
Rank 1
 asked on 05 Nov 2011
0 answers
103 views
trap the windows key event
I want to trap the windows key event in the window. How can I achive it in kendo window ? Please help me.
Window
Sourav
Top achievements
Rank 1
 asked on 04 Nov 2011
0 answers
38 views
Page not auto adjust in IPad
Hi,

    I have designed web page using kendo ui. My web page is adjustable in ipad width-wise, but height-wise it is not adjustable. It is showing blank space below the web page.  I am using Tab & splitter, so what is the process or the way i have to follow so that height also get adjusted automatically. Another problem i am facing during rotating of IPad horizantally & vertically, its not getting adjusted automatically. 

Please guide me.

General Discussions
Sourav
Top achievements
Rank 1
 asked on 03 Nov 2011
5 answers
452 views
[Solved] more tables on one page, "&nbsp;"
Hi there, 

i have a render problem with "&nbsp;"
is there a fix for this issue?

thanks a lot
cheers roland
Grid
Dimo
Telerik team
 answered on 03 Nov 2011
0 answers
135 views
write textbox in the grid cell
Can I write textbox in the grid cell?

Thanks & Regards
Sourav
Grid
Sourav
Top achievements
Rank 1
 asked on 02 Nov 2011
0 answers
163 views
Choppy Scrolling In Grid
Hello, 

I copied the code for the grid in the examples section of the BETA release into a Visual Studio .aspx page.   However, when I use the scroll bar on the right to scroll to the bottom of the grid, it stops me every few hundred rows or so, and I have to start scrolling again.

The funny thing is, when I create a blank .html page in a folder on my computer, it runs fine.  I only get this problem when I put the code into Visual Studio.

Any ideas?

Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Kendo2.aspx.cs" Inherits="VSKendo.Kendo2" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!doctype html>
<html>
<head>
    <!-- meta -->
    <!-- meta -->
    <title>Grid virtualization using remote data</title>
    <!-- css -->
    <link href="Styles/kendo.examples.css" rel="stylesheet" />
    <link href="Styles/kendo.common.css" rel="stylesheet" />
    <link href="Styles/kendo.kendo.css" rel="stylesheet" />
    <!-- css -->
    <!-- script -->
    <script src="Scripts/kendo.jquery.js" type="text/javascript"></script>
    <script src="Scripts/kendo.core.js" type="text/javascript"></script>
    <script src="Scripts/kendo.data.js" type="text/javascript"></script>
    <script src="Scripts/kendo.data.odata.js" type="text/javascript"></script>
    <script src="Scripts/kendo.draganddrop.js" type="text/javascript"></script>
    <script src="Scripts/kendo.grid.js" type="text/javascript"></script>
    <script src="Scripts/kendo.groupable.js" type="text/javascript"></script>
    <script src="Scripts/kendo.pageable.js" type="text/javascript"></script>
    <script src="Scripts/kendo.people.js" type="text/javascript"></script>
    <script src="Scripts/kendo.sortable.js" type="text/javascript"></script>
    <!-- script -->
</head>
<body>
    <form id="Mainform" runat="server">
    <!-- nav -->
    <!-- nav -->
    <!-- description -->
    <div class="description">
        Grid virtualization using remote data</div>
    <!-- description -->
    <div id="example" class="k-content">
            <script>
                $(document).ready(function ()
                {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverPaging: true,
                            serverSorting: true,
                            pageSize: 100,
                            transport: {
                                read: "http://services.odata.org/Northwind/Northwind.svc/Orders"
                            }
                        },
                        height: 280,
                        scrollable: {
                            virtual: true
                        },
                        sortable: true,
                        columns: ["OrderID", "CustomerID", "ShipName", "ShipCity"]
                    });
                });
            </script>
            <div id="grid">
            </div>
    </div>
    <!-- tools -->
    <!-- tools -->
    </form>
</body>
</html>
General Discussions
Adam
Top achievements
Rank 1
 asked on 01 Nov 2011
5 answers
226 views
[Solved] Formating a Date from WCF Service
Hi,

I have a WCF Service that returns a date like this: /Date(1305169200000-0300)/
I have used the template suggested in your demos like this:
template: '#= kendo.toString(MyDate,"dd MMMM yyyy") #'

But it did not worked.

How can I format my this field ??? Shoud I use a custom function ???

IN fact I have some other fields like money fields to format, Where can I find a tutorial or documentation

Thanks in advance
Grid
mvbaffa
Top achievements
Rank 1
 answered on 01 Nov 2011
0 answers
181 views
Display XML data in a chart
Hi, 

I'm new to Kendo. I'm trying to make a graph from xml data.
This is a sample of the xml file I have:
    <SustainabilityObservationSummaryData>
        <DateTime>1318204800</DateTime>
        <Value>11.5714283</Value>
    </SustainabilityObservationSummaryData>
    <SustainabilityObservationSummaryData>
        <DateTime>1318208400</DateTime>
        <Value>10.8461542</Value>
    </SustainabilityObservationSummaryData>
</ArrayOfSustainabilityObservationSummaryData>
And this is the js I wrote:
function createChart() {
    $("#chart_wrapper").kendoChart({
        theme: $(document).data("kendoSkin") || "kendo",
        dataSource: {
            transport: {
                read: {
                    url: "data.json",
                    dataType: "json"
                }
            }
        },
        title: {
            text: "Spain electricity production (GWh)"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "line"
        },
        series:
        [{
            field: "DateTime",
            name: "Date and Time"
        },
        {
            field: "Value",
            name: "Value"
        }
        ],
        categoryAxis: {
            field: "DateTime",
            labels: {
                rotation: -90
            }
        },
        valueAxis: {
            labels: {
                format: "{0:N0}"
            },
            majorUnit: 5
        },
        tooltip: {
            visible: true,
            format: "{0:N0}"
        }
    });
}
 
$(document).ready(function() {
    createChart();
 
    $(document).bind("kendo:skinChange", function(e) {
        createChart();
    });
});

I get this error from Firebug: f is undefined

What's the problem?

Thanks.
Charts
Maurizio
Top achievements
Rank 1
 asked on 01 Nov 2011
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Learn how
2853 2854
2855
2856 2857
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how