Questions on Kendo UI for jQuery Forum

1 answer

95 views

scheduler with month y-axis , day of month x-axis

Is it possible to make the scheduler display in the following manner (or approximate) ?

| 01 | 02 | 03 | 04 | ...... 31 days |31|
-------------------------------------------------------------------------------
January |Mo | Tu | We| Th | .......
February |Sa | Su | Mo| Tue| ..........

If this isnt possible, whats the closest approximation that can be achieved?
Thanks in advance.

Scheduler

answered on 05 Feb 2014

1 answer

347 views

Error when data-bind a dropdown list in a tempate

Hi,

I try to bind data on a select list in a template with this code

var oPersonForm =<br>[<br> { Key: "Type", Type: "select", Label: "Type", HightLight: false, Values: [{ Key: "Type1", Value: "Type1" }, { Key: "Type2", Value: "Type2" }, { Key: "Type3", Value: "Type3" }] }<br>];<br><br>$(function ()<br>{<br> Data.Person = {<br><br> dsFields: new kendo.data.DataSource({<br> transport: {<br> read: function

(options)<br>                {<br>                    options.success(oPersonForm);<br>                }<br>            }<br>        }),

<div id="personViewForm" data-role="content"><br> <ul id="lsFields" data-role="listview" data-style="inset" data-template="ul-fromPersonTemplate" data-bind="source: dsFields"></ul><br> </div><br><br> <script><br> var viewModel = kendo.observable({<br> dsFields: Data.Person.dsFields<br> });<br><br> kendo.bind($("ul"), viewModel);<br> </script><br><br><script id="ul-fromPersonTemplate" type="text/x-kendo-template"><br> <span data-bind="text:Label"></span><br><br> #if (Type == 'checkbox') {#<br> <input type="checkbox" <br> data-role="switch" <br> name="#: Key #" <br> data-checked="#: oPerson[Key] #" /><br> #} else if(Type == 'select') {#<br> <select <br> name="#: Key #" <br> data-value-field="Key" <br> data-text-field="Value" <br> data-bind="value : "Type1", source: this.Values"></select><br> #} else {#<br> <input type="#: Type #" <br> name="#: Key #" <br> value="#: oPerson[Key] #" /><br> # } #<br></script><br>

But i have a javascript erreor and i don't undersand why, this is the error :

Uncaught TypeError: Cannot read property 'length' of null (index):1
r (index):1
s (index):1
s (index):1
F.widget.source.v.extend.itemChange (index):1
b.isFunction.i jquery-1.9.1.js:7223
n.extend.trigger (index):1
(anonymous function) (index):1
_.extend._renderItems (index):1
_.extend.insertAt (index):1
_.extend.replace (index):1
g.Class.extend.refresh (index):1
_refreshHandler (index):1
n.extend.trigger (index):1
ut.extend.query (index):1
ut.extend._query (index):1
(anonymous function) (index):1
b.extend.Deferred jquery-1.9.1.js:7541
ut.extend.fetch (index):1
_.extend.setDataSource (index):1
F.widget.source.v.extend.refresh (index):1
D.extend.bind (index):1
w.extend.applyBinding (index):1
w.extend.bind (index):1
s (index):1
a (index):1
h (index):1
_.extend.init (index):1
dt.initWidget (index):1
(anonymous function) (index):1
b.extend.each jquery-1.9.1.js:7123
b.fn.b.each jquery-1.9.1.js:6735
dt.init (index):1
ht.init (index):1
d.extend._model (index):1
d.extend.init (index):1
dt.initWidget (index):1
F.extend._createView (index):1
F.extend.append (index):1
(anonymous function) (index):1
c jquery-1.9.1.js:7341
p.fireWith jquery-1.9.1.js:7403
k jquery-1.9.1.js:9597
r

Templates

answered on 05 Feb 2014

5 answers

432 views

Endless Scrolling Listview

OK. I usually do my listviews manually (clearing and appending items from ajax results) but I really want to get endless scrolling working so i've been banging my head against the wall trying to get a very very simple example working with no success.

Here is the HTML:

<div id="test-view" data-role="view" data-title="Test" data-layout="default-layout" data-init="app.test.init" data-show="app.test.showView">

<ul id="test-list" class="ul-content" data-role="listview">

</ul>

</div>

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

<li>#: name#</li>

</script>

As you can see its a simple html view with a UL inside it. Now for my JS

(function(global) {

var app = global.app = global.app || {};

app.test = {

init: function(e) {

$("#test-view ul#test-list").kendoMobileListView({

dataSource: new kendo.data.DataSource({

type: "json",

serverPaging: true,

pageSize: 50,

transport: {

read: {

url: "http://www.somedomain.com/script.php",

dataType: "json"

}

},

schema: {

type: "json",

data: function(data) {

return data.result;

},

total: function(data) {

return data.total;

}

}),

template: $("#endless-scrolling-template").text(),

endlessScroll: true

});

},

showView: function(e) {

$("#loading-overlay").show();

app.application.showLoading();

setTimeout(function () {

$("#loading-overlay").hide();

app.application.hideLoading();

}, 2000);

e.view.scroller.reset();

}

};

})(window);

So in the init, its suppose to initialize the listview and pull from my php script which returns JSON. I know my service is serving up the data as you can do an alert in the data handler and see the object it returns, in addition im emailing myself in the service the results anytime a request is made.

Here is example output from my service:

{"result":[{"name":"Item 1"},{"name":"Item 2"},{"name":"Item 3"},{"name":"Item 4"},{"name":"Item 5"},{"name":"Item 6"},{"name":"Item 7"},{"name":"Item 8"}],"total":8}

As you can see its a simple object with a result value that is an array of objects each containing a name key.

The result I am getting is a javascript alert and then only a single item is in the listview

"TypeError: 'undefined' is not a function (evaluating 'n.getAttribute(\"data-\"+dt.ns+\"role\")')"..... yadda yadda in kendo.mobile.minjs

Any help would be most appreciated. I've gone down every google search and avenue i can think of. I've used only the data-attributes instead of the js initialization, etc. All with no success.

Thanks!

General Discussions

answered on 04 Feb 2014

1 answer

1.3K+ views

MultiSelect - data-placeholder - style

Hi,

I use the element MultiSelect like this :

<select id="MyId" data-placeholder="My text"></select>

$("#MyId").kendoMultiSelect({
        dataTextField: "Name",
        dataValueField: "Id",
        itemTemplate: "<div>#:data.Name#</div>",
        dataSource: {
            type: "json",
            serverFiltering: true,
            serverPaging: true,
            pageSize: 2,
            transport: {
                read: {
                  url: DM3_Reporting.RestServiceUrl + 'fleet',
                    type: "GET"
                }
            }
        }
    });

All work fine, but I need to change the style of the data-placeholder : "MyText".

Can you tell me how can I change this style in my css ?

Thanks in advance.

MultiSelect

answered on 04 Feb 2014

8 answers

165 views

POTENTIAL BUG: PopOver will not open when referenced from a tabstrip which is contained by a layout.

I opened a support ticket for this but figured I'd post in case any has a workaround that I can do in the mean time....

I put together this jsbin to illustrate the issue that I discovered. Essentially, I have a popover that call from a tabstrip item, which is inside a layout. The view that I'm calling also has the data-stretch set to true,so I don't know if that contributes to the issue. Seems to be 100% reproducible in this case.

JSBin

As you can see, if you tap the first tab item, a js error is thrown, scrollbar gets introduces, <BillMurray>Human sacrifice, dogs and cats living together... mass hysteria!</BillMurray>
well you get the idea.

PopOver (Mobile)

answered on 04 Feb 2014

3 answers

378 views

Hide/Show Column of Detail Grid

Hi,

I currently have a Master Grid and a Detail Grid. I am trying to show/hide columns based on user selection which is stored in the database.
For example:
Master Grid : Col1,Col2,Col3
Detail Grid: ColA,ColB,ColC,ColD,ColF
Now, i retrieve col names from the database. On DataBound event of the detail grid i have a function call which
loops thru the data and calls hideColumn() and it works for the first detail grid of the first master row.
but when expanding the second row of the master the detail grid does not hide any columns.
Please help.

var grid = $("#childgrid").data("kendoGrid");
if (grid != undefined) {
for (var i = 0; i < view.length; i++) {
var columnName = view[i]["FieldName"];
var selected = view[i]["Selected"]
if (selected == true) {
grid.showColumn(columnName);
} else {
grid.hideColumn(columnName);
}
}
}

Grid

answered on 04 Feb 2014

2 answers

125 views

Grid filters not working proper

Hi all,
I have a question about KendoGrid filtering. I have server side filtering enabled. If I use the filter on a column to choose two filters (on the same column) it does not send across the selected operator ("and" or "or"). What it sends to the server is:

{

"filters":[

{

"field":"username",

"operator":"contains",

"value":"bob"

},

{

"field":"username",

"operator":"contains",

"value":"john"

}

]

}

Is there a way to get that? It's quite important!

Thanks!

Grid

answered on 04 Feb 2014

1 answer

176 views

Line graph with SQL Data

Hello,
I have been trying to find a method to draw line graphs using data from SQL db using Kendo UI
please explain

Charts

answered on 04 Feb 2014

1 answer

90 views

Show title in grid's column filter view mobile

Hi,

The current grid's filter view on mobile displays column's field on the top part.
Is there any posibility to display the column's title instead of the field ?

Thanks,
Walid

Grid

answered on 04 Feb 2014

1 answer

131 views

Expand/Collapse icon and Pagination number not shown in Grid of IPad Safari browser

I have implemented drill down functionality in Grid but the expand/collapse and pagination number is not shown in the grid. I have attached the screen shot for more clarification. We have tested it in IOS7 IPad

Grid

answered on 04 Feb 2014