As per your tutorials u have used kendo.all.js
but i had downloaded kendo web components and i used following JS files
<script src="jquery-1.7.1.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
but i did not got the result ?
May I know the reason and what is alternate solution for this please respond soon.
Thanks in advance
this is my jsp code
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>
<script src=""></script>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="example" class="k-content">
<div id="vertical">
<div id="top-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div class="pane-content">
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
<div id="middle-pane">
<div class="pane-content">
<h3>Outer splitter / middle pane</h3>
<p>Resizable only.</p>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes:
[
{ collapsible: false },
{ collapsible: false, size: "100px" },
{ collapsible: false, resizable: false, size: "100px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "220px" },
{ collapsible: false },
{ collapsible: true, size: "220px" }
]
});
});
</script>
<style scoped="scoped">
#vertical {
height: 380px;
width: 700px;
margin: 0 auto;
}
#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}
#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}
#left-pane {
background-color: rgba(60, 70, 80, 0.05);
}
#center-pane {
background-color: rgba(60, 70, 80, 0.05);
}
#right-pane {
background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>
but i had downloaded kendo web components and i used following JS files
<script src="jquery-1.7.1.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
but i did not got the result ?
May I know the reason and what is alternate solution for this please respond soon.
Thanks in advance
this is my jsp code
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<html>
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.web.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.core.js"></script>
<script type="text/javascript" src="/kendoui.web.2012.2.710.open-source/source/js/kendo.fx.js"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.draganddrop.js" type="text/javascript"></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.resizable.js" type="text/javascript" ></script>
<script src="/kendoui.web.2012.2.710.open-source/source/js/kendo.splitter.js" type="text/javascript" ></script>
<script src=""></script>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2012.2.710.open-source/source/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="example" class="k-content">
<div id="vertical">
<div id="top-pane">
<div id="horizontal" style="height: 100%; width: 100%;">
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
<div id="center-pane">
<div class="pane-content">
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>
<div id="middle-pane">
<div class="pane-content">
<h3>Outer splitter / middle pane</h3>
<p>Resizable only.</p>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes:
[
{ collapsible: false },
{ collapsible: false, size: "100px" },
{ collapsible: false, resizable: false, size: "100px" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "220px" },
{ collapsible: false },
{ collapsible: true, size: "220px" }
]
});
});
</script>
<style scoped="scoped">
#vertical {
height: 380px;
width: 700px;
margin: 0 auto;
}
#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}
#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}
#left-pane {
background-color: rgba(60, 70, 80, 0.05);
}
#center-pane {
background-color: rgba(60, 70, 80, 0.05);
}
#right-pane {
background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>
</html>