Questions on Kendo UI for jQuery Forum

2 answers

432 views

[Solved] Programmatically Show Column & Group by another Column

I would like to create a button that when clicked, programmatically shows a column that is previously hidden, and then groups by a specific column... Psudo code might be...

1.) Button Click
2.) Show Column called "City"
3.) Group by "State".

Any pointers on how to do this?

Jason

Grid

answered on 22 Oct 2013

1 answer

2.2K+ views

Reset Grid to default when page loaded (sorting, filtering, paging, grouping etc...)

I would like to create a button that woudl allow the user to reset this grid. Meaning that after they apply some sorting, grouping, paging etc... they can click on this button and it would return the grid to the state it was at when the page loaded... Similar to reloading the entire page, but just reloading the grid.

Thanks,
Jason

Grid

answered on 22 Oct 2013

2 answers

189 views

[Solved] page (before) show events are only triggered once

Hi there,

I'm using Kendo UI Mobile for a mobile application for a client, but am struggling with the events. I have found that the page-show and before-show events are only called the first time a page is loaded. If I navigate to the same page once more these events aren't triggered a second time.

My html:

1.<div id="page_test" data-role="view" data-title="Test" data-before-show="beforeshow()" data-show="show()">

2. <div class="view-content">

3. Test!

4. </div>

5.</div>

The javascript:

1.function beforeshow() {

2. alert('beforeshow');

3.}

4.

5.function show() {

6. alert('show');

7.}

If this is the correct way the events should work, could someone offer any other ideas on events that trigger at for each page view?

Aidan Langelaan

General Discussions

answered on 22 Oct 2013

1 answer

168 views

How to download Kendo UI Mobile - current Icenium version

How do I download the current version of Kendo UI Mobile for Icenium (v2013.2.729 I believe).
I'm after the full package as I only wish to include the kendo.mobile.flat.min.css file (not the all.min.css one) in my project.

I can download the latest v2013.2.918 via the trial download but I don't think Icenium supports it yet.

Thanks
Darren

General Discussions

answered on 22 Oct 2013

1 answer

157 views

DropDownList in List View

Hello! I have a question......

It´s Url explains how can i change appearence for elements in a form....
http://demos.kendoui.com/mobile/forms/appearance.html#/

but wich is the style for display dropdownlist in all space of the list view like a input or label?

for label:

.km-root .appearance .km-listview label
{
width: 100%;
}

for input:

.km-root .km-pane .km-view.appearance .km-listview input
{
position: relative;
width: 100%;
right: 0;
margin-top: 0;
top: 0;
}

for dropdownlist??????????????

thank you very much

i hope your answer

ListView (Mobile)

answered on 22 Oct 2013

1 answer

156 views

How to replace a header by another one

Hi guys,

i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery

here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Demo</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/index.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<!--

Contenu des pages chargées par le paneau left

-->

<body>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">

</div>

<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">

</div>

<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">

</div>

<!--

// Paneau Left

-->

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">

<ul data-role="listview" data-type="group">

<li>Menu

<ul>

<li><a href="#drawer-home" data-transition="none">m1</a></li>

<li><a href="#drawer-starred" data-transition="none">m2</a></li>

<li><a href="#drawer-drafts" data-transition="none">m3</a></li>

</ul>

</li>

</ul>

</div>

<!--

Headers

-->

<div class="Head" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div class="" data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<span id="compagnyName">Demo</span>

<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>

</div>

</header>

</div>

<div class="HeadSearching" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />

<select name="country" id="country" data-align="right">

<option>France</option>

<option>Angleterre</option>

<option>Luxembourg</option>

<option>Espagne</option>

</select>

</div>

</header>

</div>

<script>

var app = new kendo.mobile.Application(document.body);

$('.HeadSearching').remove();

</script>

<script>

function changeHead()

{

alert('header replace');

$('.head').replaceWith('.HeadSearching');

}

</script>

</body>

</html>

if someone could help me doing this correctly ..
thanks by advance ;)

NavBar

answered on 22 Oct 2013

1 answer

121 views

reset entire application

is there a way to reset an app so that it starts over and reloads all of the views, etc.?

General Discussions

answered on 22 Oct 2013

3 answers

254 views

[Solved] timepicker or datepicker with MVVM

hi guys.
i am using icenium and kendo mobile&web.
i am trying to create datepicker widget in some of the views. after define data-model to the view and follow kendo demos , i managed to create dropdown list that bind to the data model. when try to create datepicker or timepicker it act like its ignore the code.
i use the data-role='timepicker' attribute same as in the demos.
is it possible that kendo mobile does not support mvvm and datetime pickers?
can you suggest me widget that can work to me?
regards
maor

General Discussions

answered on 22 Oct 2013

3 answers

236 views

Remote data does not respect defaultValue

I'm getting data from a remote like so:

var dataSourceStatistics = new kendo.data.DataSource({

transport: {

read: {

data: {

f:'getCustomerStats',

fromDate:function () {

return "2012-01-01";

},

toDate:function () {

return "2012-06-19";

},

custStats:null

}

},

update: {

}

},

schema: {

data: function(data) {

return data.result.custStats.Record;

},

total: function(data) {

return data.result.custStats.Record.length;

},

model:{

id: "EmployeeId",

fields: {

Employee: {

editable: false

},

EmployeeId: {

editable: false

},

ValueCandE: {

type: "number",

defaultValue: 0

},

ValueE: {

type: "number",

defaultValue: 0

},

ValueEandCandM: {

type: "Number"

},

ValueEandM: {

type: "Number"

}

});

The remote data does not always contain the ValueE and ValueCandE fields.
Currently, all the missing fields show up as null in the models.

Why doesn't the DataSource respect my default values?

Data Source

answered on 22 Oct 2013

1 answer

2.4K+ views

AutoComplete returning "TypeError: "".toLowerCase is not a function

I have a very simple strongly typed datasource that consists of Bills:
public class BillName
    {
        public string Bill { get; set; }
    }
And a very simple test case that returns these bills through a WebApi in MVC:

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/NavBillApi/GetAllBills",
                }
            }
        });

        $('#searchBills').kendoAutoComplete({
            dataSource: dataSource,
            filter: "startswith",
            dataText: "Bill",
            minLength: 1,
            //ignoreCase: false,
            placeholder: "Select ...",
        });

[HttpGet]
        public IEnumerable<BillName> GetAllBills()
        {
            var billList = _billsService.GetAllBillNames();
            //var x = billList.Count();
            return billList.AsEnumerable();
        }
I have tried every option on the datasource and AutoComplete widgets that I have found in the documentation. If I uncomment ignoreCase: false, then I get the error: Uncaught TypeError: Object [object Object] has no method 'lastIndexOf'.
I am out of ideas. Thanks for any help.

AutoComplete

answered on 22 Oct 2013