Questions on Kendo UI for jQuery Forum

1 answer

187 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

152 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

123 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

86 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

290 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

393 views

[Solved] 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

586 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

3 answers

137 views

[Solved] Filterable ListView Clears Checkboxs

Hello,

I have a ListView and template defined as follows:

<ul data-role="listview"
id="multiactivity-listview"
data-bind="source: activityTypeDataSource"
data-template="multiactivity-template"
data-filterable="{field: 'name', operator: 'contains', placeholder: 'Search Activity'}">
</ul>

<script type="text/x-kendo-template" id="multiactivity-template">
<label>
<input data-id="${data.id}" type="checkbox" />
${data.name}
</label>
</script>

This works great until the user enters any filter text, and then all the checkboxes get cleared. Is there a recommended approach to solve this? I have tried to data-bind to either the checked binding or doing something within the template using #= # scripts but cannot seem to solve it.

Thanks,

Ben.

ListView (Mobile)

answered on 28 Mar 2014

3 answers

321 views

<button> Disabled from boolean in observable

How do I set enable/disable based on a value in the observable?

I tried everything I can think of.

Thanks!

MVVM

answered on 28 Mar 2014

2 answers

524 views

Kendo grid filtering on field as object property

Some of the columns in my grid are bound to properties of nullable objects. When there exists a nullable object, filtering stops working because the property's owner is null. Is this not supported OOTB? If so, can anyone suggest some alternate solutions for this? Are the only options to flatten my JSON or to modify the received JSON in requestEnd?

Below is a plnkr that demonstrates the issue. Btw, not sure why the live preview isn't working. Click the 'Launch preview in separate window' to view the code in action. To reproduce, 1. filter the 'foo value' column with any value. 2. you will see the grid display a timer. the console will also display an error.

https://plnkr.co/edit/wCrMZM5ieDHVpjLJpHhP?p=preview

Grid

answered on 28 Mar 2014