Questions on Kendo UI for jQuery Forum

1 answer

167 views

To use at Visual Studio 2012

Dear Support Team,

My Company bought Kendo UI Complete version. What I would like to do is, I want to create as Kendo UI Mobile Project and want to have default template for mobile from Kendo UI at the Visual Studio 2012 new Project Dialog. How can I install Kendo UI to Visual Studio 2012?

I also install ICENIUM demo version. With this, I can see project Template at the Visual Studio. Please let me know without using ICENIUM, is there a way to get project template if I only have kendo UI complete.

Thanks & Regards,
UFIS

General Discussions

answered on 28 Mar 2014

5 answers

698 views

Check the Selected TreeView Node is having childs or not

Hi,

How can we know that the selected TreeView Node is having the Child Nodes or Not.

Help is required on this.

Regards,
Satish.N

TreeView

answered on 28 Mar 2014

1 answer

78 views

Is there a way to limit the amount a stock chart can be zoomed?

I have a stock chart, and when zoomed with the mouse wheel it goes deeper and deeper, all the way to hours and minutes.

I want to have the zoom limited to seven days.

Is this possible?

Charts

answered on 28 Mar 2014

1 answer

166 views

How can i disable loading animation while remote view is loading?

Hi

How can i disable the loading animation while remote view is loading? Why?

because some times the loading animation is frozen. I think that is because HTML apps are single thread.

Also i've used the app.showLoading while i use ajax to get data for a chart but the animation always is frozen.

I love Kendo UI! but i want to use spin.js instead. Sorry but when i use ajax with spin.js, the spinner animation run very smooth

please advise.

Irina

General Discussions

answered on 28 Mar 2014

1 answer

131 views

Notifications overlapping in IE11

Notifications are overlapping in IE11. This can be repoduced with the Kendo demo: http://demos.telerik.com/kendo-ui/web/notification/index.html

Latest Chrome and Firefox are OK.

Thanks
Holger

Notification

answered on 28 Mar 2014

1 answer

105 views

click template column in grid to populate another grid and html table-not working

Hello,

I have a kendo grid that has template columns with "select" button. All this works fine. now when the user clicks that select I want the id to be passed into another page that has 2 controls : a kendo grid(populated from the database according to the id supplied) and another say listbox(with 4 fields also populated from the database according to the id supplied )

How do I get both controls populated with data?
click "select"--> populate grid and list/table

Can you give me a sample for what I am trying to do?

Grid

answered on 28 Mar 2014

2 answers

71 views

Close event

I have a modelview made with this code:
<div data-role="modalview" id="windowPopup" data-modal="false" data-close="closeFunction">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
.....
</li>
</ul>
</div>

The function closeFunction () is never started.
This is because data-modal false? Is there a solution?

I've tried using the data event-open and it works well.

I tried with 2014.1 318 and 2013 versions.

ModalView

answered on 28 Mar 2014

6 answers

258 views

Kendo ASP NET MVC grid fails to load on Tablet (ipad safari or android tablet IE broser)

Hello,

i have a ASP .NET MVC app for Desktop and mobile devices. I have downloaded Kendo ui for asp net MVC and included folowing code in my _Layout.cshtml and _Layout.Tablet.cshtml.
@Styles.Render("~/Content/kendo/css")
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324.440/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324.440/styles/kendo.default.min.css" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
<script src="http://cdn.kendostatic.com/2013.3.1324.440/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324.440/js/kendo.aspnetmvc.min.js"></script>
The Desktop browser can run the grid and Display data invoking read.action method in Controller. But when i run app on tablet (ipad or android) does not matter which browser it cannot load the grid and just see wait Cursor. When i debug seems it calls Index method in Controller but no read Action method.

Grid

answered on 28 Mar 2014

3 answers

333 views

MVVM, remote templates and numeric textbox

Hello!

I'm having a problem considering binding min-max values of numeric textbox using kendo.data.ObservableObject or any attributes, etc.

But before we dwell further on the problem here is my code:

javascript:

001.var tab;

002.var layout;

003.var currnetInstances = 0;

004.var mainWin = { "showTabs": true };

005.

006.$(document).ready(function () {

007. tab = $("#tabstrip").kendoTabStrip({

008. animation: false

009. }).data("kendoTabStrip");

010.

011. $("#butt").kendoButton({

012. icon: "add",

013. click: function (e) {

014. openForm("myForm", "form-template-one", "Form: Ime in Priimek")

015. }

016. });

017.

018. $("#butt2").kendoButton({

019. icon: "add",

020. click: function (e) {

021. if (mainWin.showTabs == true) {

022. mainWin.showTabs = false;

023. $("#butt").val("Odpri v oknu");

024.

025. }

026. else if (mainWin.showTabs == false) {

027. mainWin.showTabs = true;

028. $("#butt").val("Dodaj tab");

029. }

030.

031. }

032. });

033.});

034.

035.templateLoader.loadExtTemplate("views/templates.html");

036.

037.

038.

039.function openForm(formId, formTemplateId, formName) {

040. var template = kendo.template($("#" + formTemplateId).html(), { useWithBlock: false });

041.

042. displayForm(formId, formTemplateId, formName, template);

043.}

044.

045.function displayForm(formId, formTemplateId, formName) {

046. ++currnetInstances;

047.

048. formId = formId + "_" + currnetInstances;

049.

050. if (mainWin.showTabs == true) {

051. tab.append(

052. {

053. text: formName,

054. encoded: false, // Allows use of HTML for item text

055. content: "<div id='" + formId + "'></div>"

056. }

057. );

058.

059. tab.activateTab($("#tabstrip .k-last"));

060. }

061. else if (mainWin.showTabs == false) {

062. $(document.body).prepend("<div id='" + formId + "'></div>");

063. var win = $("#" + formId).kendoWindow({

064. animation: false,

065. width: 400,

066. height:400,

067. title: formName,

068. visible: false

069. }).data("kendoWindow");

070.

071. win.center();

072. win.open();

073. }

074.

075. if (typeof(layout == "undefined")) {

076. layout = new kendo.Layout(formTemplateId);

077. }

078.

079. var formModel = new kendo.data.ObservableObject({

080. id1: "k-textbox",

081. id2: "k-textbox",

082. id3: "k-textbox",

083. labelValue1: "ime",

084. labelValue2: "priimek",

085. labelValue3: "ime in priimek",

086. value1: "",

087. value2: "",

088. combined: function (e) {

089. return this.get("value1") + " " + this.get("value2");

090. },

091. numericBG: function (e) {

092. return "green";

093. },

094. numericVal: -2,

095. knumeric_class: function (e) {

096. if (parseInt(this.get("numericVal")) < 0) {

097. return "numeric_negative"

098. }

099. else {

100. return "numeric_positive"

101. }

102. },

103. numChange: function (e) {

104. this.knumeric_class();

105. },

106. num: function () { return 15;}

107. })

108.

109. formModel.bind("change", function (e) {

110. var varia = formModel.toJSON();

111. console.log(varia);

112. });

113.

114. layout.render("#" + formId);

115.

116. kendo.bind($("#" + formId), formModel);

117.}

templates html:

01.<script type="text/x-kendoui-template" id="form-template-one" data-use-with-blocks="false">

02. <div class='form'>

03. <label style='display:inline-block;width:160px;line-height:30px;' data-bind='attr: {for: id1}, text: labelValue1'"></label><br />

04. <input class='' data-bind="attr: {class: id1}, value: value1">

05. <br /><br />

06.

07. <label style='display:inline-block;width:160px;line-height:30px;' data-bind='attr: {for: id2}, text: labelValue2'"></label><br />

08. <input class='' data-bind="attr: {class: id2}, value: value2">

09. <br /><br />

10.

11. <label style='display:inline-block;width:160px;line-height:30px;' data-bind='attr: {for: id3}, text: labelValue3'"></label><br />

12. <input class='' data-bind="attr: {class: id3}, value: combined" ><br />

13.

14. <div data-bind="attr: {class: knumeric_class}">

15. <label style='display:inline-block;width:160px;line-height:30px;' data-bind='attr: {for: id3}, text: labelValue3'"></label><br />

16.

17. <input data-role="numerictextbox" data-bind="value: numericVal" data-spinners="false" style='text-indent:-5px;'>

18.

19. </div>

20. </div>

21.</script>

As seen from the examples I load my template from a remote file, then I use layout to write it to DOM in its proper place.
Now the problem is that I cant use the # based syntax in the template as it's simply not executing (not event the alerts, console log or anything else) and I would need to use the kendo.data.observableobject to bind the appropriate data into widgets since the templates should be reusable, everything else is of course set through the observable which in turn is generated on per case basis.

So to clarify my question again: how to bind numeric textbox values for min and max (and possibly attr which it actively refuses to do so) using remote templates and the observableobject.

MVVM

answered on 28 Mar 2014

1 answer

552 views

How to fetch the values of selected check box items inside PanelBar

Hi ,
I am trying to create a panelbar which will have children containing checkboxes along with a text .
I have been able create such a structure where the page is rendering the checkboxes propely .
Below is the code snippet for the panelbar with dummy data .

<body ng-app="connectUIApp">

<div ng-controller="BrowseContentController">

<button class="k-button" id="applyFilter" ng-click="handleApplyClick(message);">Apply</button>

<div id="creatorSelect" ></div>

</div>

<script>

var app = angular.module('connectUIApp', ['kendo.directives']);

$(document).ready(function()

{

$("#creatorSelect").kendoPanelBar(

{

dataSource:

[

{

text:"Item1",

value:"Item1 Value",

items:[

{

text:"<input type='checkbox' value='type'> Child1</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child2</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child3</input>",

encoded:false

}

]},

{

text:"Item2",

value:"Item2 Value",

items:[

{

text:"<input type='checkbox' value='type'> Child1</input>",

encoded:false

},

{

text:"<input type='checkbox' value='type'> Child2</input>",

encoded:false

}

]}

]

});

});

</script>

The requirement is that different checkboxes will be selected and once a button is clicked (the apply button in this case ) ,all the selected values (Child1,Child2 etc) needs to be passed to the backend.

I have written a java script method to iterate over the chil items of the panelbar ,but I have not been able to select the checkbox values (true,false etc).

Below is the javascript method for your reference .

function BrowseContentController($scope)

{

$scope.handleApplyClick = function()

{

var panelBar = $("#creatorSelect").kendoPanelBar().data("kendoPanelBar");

var children = panelBar.element.children();

for (var i = 0; i < children.length; i++)

{

var child = children[i];

var textContent=child.textContent;

//var item=child.item();

alert('textContent:'+textContent);

}

};

}

Please note ,I am using angular and kendo together and the code is to some extent mixed a bit .
I have attached all the required files in the attachment .Please unzip the attached file and run the PanelBar.html file .

I have checked the existing Kendo UI documentation ,but have not found something useful till now in this regard .
I need some help to get the values of the selected checkboxes .
Please help me if any one has some idea on how to proceed in this case .

Regards,
Ayan

PanelBar

answered on 28 Mar 2014