Hi All,
I am trying to render a Kendo Window from within a Template. And I am facing issues while doing so. When I use any kendo widget inside the window it’s not rendered (only the base html element is displayed) when placed in the kendo template and also only first time window gets rendered, once the window is closed next subsequent button clicks produces only the base html elements
If you place the same widgets outside the kendo window in the template they are rendered properly.
The scenario that I am working on is something like:
I have created a JSFiddle for show casing the problem I am facing. Refer URL http://jsfiddle.net/ganeshgupta/xRTbw/12/. Attached are the snap shots of the UI when I click on the “Select” button the first & second time, displaying only the Kendo Window in the first place (Without tab controls) and next time just the base controls only (No Window & Tab controls).
Kindly have a look at the same & let me know if I have a work around that can address the same.
Manoj Kapoor
This shows how navigatable doesn’t work when the user navigates using the right arrow key…
Run the fiddle – then select the first column of the second row. Hit your right arrow key two times… the grid doesn’t scroll to the right to show the City column as it should:
Check it out: http://jsfiddle.net/NqSuS/22/html, body
{
height
:
100%
;
margin
:
0
;
padding
:
0
;
font-size
:
13px
;
}
html
{
overflow
:
hidden
;
}
<
div
id
=
"splitter1"
style
=
"height: 100%; border: 0"
>
<
div
id
=
"top_pane"
></
div
>
<
div
id
=
"middle_pane"
>
<
div
id
=
"splitter2"
style
=
"height: 100%; width: 100%;"
>
<
div
id
=
"nav_pane"
style
=
"padding: 5px"
> //padding works well
<
div
id
=
"nav"
style
=
"border:1px solid red;"
> </
div
>
</
div
>
<
div
id
=
"content_pane"
style
=
"padding:5px"
> //padding right works not well !!! why?
<
div
id
=
"content"
style
=
"border:1px solid red;"
></
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"bottom_pane"
></
div
>
</
div
>
$(document).ready(
function
() {
var
splitter1 = $(
"#splitter1"
).kendoSplitter({
orientation:
"vertical"
,
panes: [{ size:
"30px"
, resizable:
false
}, {}, { size:
"20px"
, resizable:
false
}]
}).data(
"kendoSplitter"
);
var
splitter2 = $(
"#splitter2"
).kendoSplitter({
orientation:
"horizontal"
,
panes: [{ collapsible:
true
, size:
"200px"
}, {}]
}).data(
"kendoSplitter"
);
var
triggerResize =
function
() {
splitter1.trigger(
"resize"
);
splitter2.trigger(
"resize"
);
}
$(window).resize(triggerResize);
}
);
var splitter = $("#mainArea").data("kendoSplitter");
where #mainArea is the ID of the div where I attached the splitter. When I try this, I see an error in the firebug console indicating that "splitter is undefined".<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=600, initial-scale=1, maximum-scale=1"
>
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery-1.7.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery.json-2.3.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/knockout-2.0.0.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/kendo/kendo.mobile.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/kendo/plugins/console.js"
></
script
>
<
link
href
=
"Styles/kendo/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
</
head
>
<
body
>
<
div
data-role
=
"view"
data-layout
=
"login"
data-title
=
"Login"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
data-icon
=
"globe"
href
=
"#overview-cities"
>Login</
a
>
<
a
data-icon
=
"contacts"
href
=
"#overview-contacts"
>Contacts</
a
>
</
div
>
</
div
>
<
div
id
=
"container"
>
<
span
>Main header</
span
>
<
div
>
<
label
for
=
"Username"
>Username</
label
>
<
input
id
=
"Username"
name
=
"Username"
type
=
"text"
/>
</
div
>
<
div
>
<
label
for
=
"Password"
>Password</
label
>
<
input
id
=
"Password"
name
=
"Password"
type
=
"password"
/>
</
div
>
<
div
class
=
"clear"
>
</
div
>
<
div
>
<
label
for
=
"SelectedLanguage"
>SelectedLanguage</
label
>
<
select
id
=
"SelectedLanguage"
name
=
"SelectedLanguage"
>
<
option
value
=
"da-DK"
>dansk (Danmark)</
option
>
<
option
value
=
"en-GB"
>English (United Kingdom)</
option
>
<
option
value
=
"fi-FI"
>suomi (Suomi)</
option
>
<
option
value
=
"de-DE"
>Deutsch (Deutschland)</
option
>
<
option
value
=
"nb-NO"
>norsk, bokmål (Norge)</
option
>
<
option
selected
=
"selected"
value
=
"ru-RU"
>русский (Россия)</
option
>
<
option
value
=
"sv-SE"
>svenska (Sverige)</
option
>
</
select
>
</
div
>
<
div
>
<
a
input
=
"button"
data-role
=
"button"
>Login</
a
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
window.kendoMobileApplication = new kendo.mobile.Application();
</
script
>
</
body
>
</
html
>