Questions on Kendo UI for jQuery Forum

1 answer

147 views

How to make the background-color of the scheduler's tiltle transparent ?

I have set the color of the title in the scheduler,and do not want the background-color.But it show me the default background-color 'blue'.How to make the background-color transparent ?

Scheduler

answered on 29 Apr 2014

1 answer

154 views

Ajax call while dragging an event

Hi
I was wandering if anyone has a working example of how to make a async ajax call while dragging an scheduler event. I have a horizontal grouping on different locations (resources in the scheduler) and want to update disabled timeslots on every location while using drag and drop. I have tried a few approaches with moveStart, but none of which made any progress.

Scheduler

answered on 29 Apr 2014

4 answers

1.6K+ views

[Solved] Bind a checkbox in an item template of a ListView to a datasource property

Is it possible to bind a checkbox in an item template of a ListView to a datasource property without using a edit template.

For example:

<script type="text/x-kendo-tmpl" id="template">

<div>

<dl>

<dt>Name</dt> <dd>${Name}</dd>

<dt>Age</dt> <dd>${Age}</dd>

<dt>Checked</dt> <dd><input type="checkbox" data-bind="checked:DataSourceBooleasProperty" /></dd>

</dl>

</div>

</script>

$("#listView").kendoListView({

dataSource: {

data: createRandomData(50)

},

template: kendo.template($("#template").html())

});

ListView

answered on 29 Apr 2014

5 answers

948 views

reload Item content from partial view

Hello!

I'm developing a MVC4 application and having some trouble with the panel bar. Every time an item is expanded, i need that it's contents get reload from a partial view.

When the panel bar is initialized I set its datasource to the result of an AJAX call that returns JSON with the need properties to populate the panelbar dynamically, and it it's working nicely. The content url comes already prepared in this datasource.

Then I hook up to the select (or expand) event of the panel bar so that I call the reload method. The thing happening is that when the reload method is invoked, partial view get's loaded to the request. The images help to understand this.

Some code:

To get datasource and populate the panelbar

$.getJSON('@Url.Action("GetGrupos", "RegistoFCPlano")/?tipoGrupo=2&data=' + $("#datepicker").val() + '&cg1=' + codGrupo)

.done(function (json) {

var panelItems = $.map(json, function (obj) {

return {

text: obj.Codigo,

expand: true,

contentUrl: obj.Conteudo

};

});

$("#panelbar").kendoPanelBar({

dataSource: panelItems,

expandMode: "single",

id: "Codigo",

select: refreshContent

}).data("kendoPanelBar");

})

.fail(function (jqxhr, textStatus, error) {

var err = textStatus + ", " + error;

console.log("Request Failed: " + err);

});

To refresh the contents

var refreshContent = function () {

var panelBar = $("#panelbar");

var item = panelBar.select();

panelBar.reload(item[0]);

};

Am I missing something here??

PanelBar

answered on 29 Apr 2014

1 answer

874 views

Sortable panel with scrollbar doesn't scroll

Hi,
I'm designing a dashboard using Sortable panels using your example as a reference. I have a news widget where I don't have control over the height of the content which comes over rss. Hence I've added a scrollbar.
This works fine, except that when I try to scroll using the slider, it has a drag & drop effect on the whole widget. The arrows at the top & bottom are however working.

You can see the effect by adding the height & overflow properties to the css ~line 237 as

/* BLOGS & NEWS */

#blogs div,

#news div {

padding: 0 20px 20px;

overflow: scroll;

height: 300px;

}

in the example
http://demos.telerik.com/kendo-ui/web/sortable/sortable-panels.html

Is there a way to get the scrollbar to work ?

Regards

Achilles

Sortable

answered on 28 Apr 2014

1 answer

494 views

How to create kendoNumericTextBox in kendo grid cell?

Is there is any way to create widgets in kendo grid cell template? here is the sample code.

columns: [{

field: "Name",

title: "Contact Name",

width: 100

},

{

field: "Cost",

title: "Cost",

template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.

}]

I want to create a numerical up down for cost column.here is the demo

down vote favorite

Is there is any way to create widgets in kendo grid cell template? here is the sample code.

columns: [{
    field: "Name",
    title: "Contact Name",
    width: 100
},
{
    field: "Cost",
    title: "Cost",
    template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.

}]

I want to create a numerical up down for cost column.

here is the demo

Grid

answered on 28 Apr 2014

1 answer

291 views

issue using push on ObservableArray

Hi,

Populating ObservableArray using ajax does not trigger combobox refresh when ObservableArray initialized using empty array. What is the reason for this behavior?

This works (jsfiddle):

var vm = kendo.observable(new function () {

var self = this;

self.data = new kendo.data.ObservableArray([{}]);

self.selection = 0;

setTimeout(function () {

self.data.empty();

self.data.push(

{ id: 0, name: "E1" },

{ id: 1, name: "E2" },

{ id: 2, name: "E3" }

);

}, 30);

});

kendo.bind($("#sample"), vm);

This does not work (jsfiddle):

var vm = kendo.observable(new function () {

var self = this;

self.data = new kendo.data.ObservableArray([]);

self.selection = 0;

setTimeout(function () {

self.data.empty();

self.data.push(

{ id: 0, name: "E1" },

{ id: 1, name: "E2" },

{ id: 2, name: "E3" }

);

}, 30);

});

kendo.bind($("#sample"), vm);

<div id="sample">

<select data-role="combobox"

data-text-field="name"

data-value-field="id"

data-bind="value: selection, source: data">

</select>

</div>

MVVM

answered on 28 Apr 2014

3 answers

237 views

Kendo HTML Helper with VB in Razor/Webforms

I've look everywhere but all the code/examples I can find for Kendo UI MVC helper appear to be in C#.

Can someone point me at the VB samples or confirm Kendo only works with C#.

General Discussions

answered on 28 Apr 2014

1 answer

134 views

Kendo UI based Business Application

We are planning to develop a critical Business application around Sales Loyalty programs based on Kendo UI HTML and .Net Web APIs. Are there are case studies/real life examples of businesses developing complete applications using Kendo UI HTML controls and Web APIs. Could you please share information as we need to convince the customer on using Kendo UI (HTML) for complete application development.

General Discussions

answered on 28 Apr 2014

2 answers

94 views

Lose Header When Many List Items and tab through to the bottom

Hello,

I have a list view with a header. It is working fine until the list gets many. The currently we have 32 items. The problem is that when we are tabbing through the items, entering values all the way to the last item and then we try to scroll back to the top, it won't let us. It springs back to the middle and cannot get to the top nor get to the header. We have navigation buttons at the top and it is important that we get to the header. Is there any way to resolve this?

This happens in iPhone, IPad, Safari, and IE 11. All do the same thing.

My html is below (omitted in the middle since there are more than 30 items in the list):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="./Scripts/KendoUI/jquery.min.js"></script>
<script src="./Scripts/KendoUI/kendo.mobile.min.js"></script>
<script src="./Scripts/KendoUI/console.js"></script>
<script src="./Scripts/jquery.signaturepad.min.js"></script>
<script src="./Scripts/json3.min.js"></script>
<link href="./Content/KendoUI/kendo.mobile.all.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="BUBBA" id="edit-event-view" >
<header data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" >Log Out</a>
            <a data-align="left" data-role="button" class="nav-button">Main</a>
            <span id="edit-event-title" data-role="view-title" />
        </div>
</header>
<ul data-role="listview" >
    <li style=""><label for="f15303">First Name</label><input type="text" id="f15303" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15304">Middle Name</label><input type="text" id="f15304" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15305">Last Name</label><input type="text" id="f15305" value="" style="text-transform: uppercase;" text-casing="3" /></li>
    <li style=""><label for="f15306">Suffix<select id="f15306" style="text-transform: uppercase;" ><option value="0"> </option><option value="3">I</option><option value="4">II</option><option value="5">III</option><option value="6">IV</option><option value="11">IX</option><option value="1">JR</option><option value="2">SR</option><option value="7">V</option><option value="8">VI</option><option value="9">VII</option><option value="10">VIII</option><option value="12">X</option></select></label></li>
....(Omitted)
    <li style=""><label for="f15307">Sex<select id="f15307" style="text-transform: uppercase;" ><option value="" selected="selected"></option><option value="M">Male</option><option value="F">Female</option><option value="U">Unknown</option></select></label></li>
<li style=""><label for="f15520">How Injury Occurred</label><textarea id="f15520" style="text-transform: uppercase;" text-casing="3" ></textarea></li>
<li style=""><label for="i15405" >Year of Death</label><input type="text" id="i15405" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
<li style=""><label for="i15576" >Alert Count</label><input type="text" id="i15576" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
</ul>
</div>
<script>
      window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

Thanks!

ListView (Mobile)

answered on 28 Apr 2014