Questions on Kendo UI for jQuery Forum

3 answers

105 views

Display details of foreign key model below combo box - Gird, Editor Template

I have a combobox with a foreign key lookup, works great...

Business would like to see detail attributes of selected value below combobox:

Example:

Combobox: <Selected Value>
Display detail description 1: xxxx
Display detail description 2:
Etc...

Is this possible?

Thanks!

Grid

answered on 09 Jul 2013

1 answer

116 views

how to perform client filter on the mobile list view

Hi,

I would like to perform client filtering based on the search value in the search input box for mobile list view. Could someone able to answer this question? thanks

ListView (Mobile)

answered on 09 Jul 2013

1 answer

88 views

Is there a guide to formatting forum posts?

For instance:

How to format code-blocks?
How to embed a jsFiddle (or jsBin) inline

This is a great item for the Forums FAQ.

Thx.

General Discussions

answered on 09 Jul 2013

4 answers

203 views

All-day event and cross-midnight event

I like the new Scheduler, but I do not understand some feature.

If creating an event with start="03-Jul-2013 23:30" and end="04-Jul-2013 01:30", it only appears as "isAllDay" in the slot "allDaySlot". But this is wrong, the event lasts only two hours and do not take "all day". And if you reset the flag "allDaySlot" to "false", the event is not displayed in the "day view" or "week view", but in view "Agenda" event is displayed correctly with the indication of the beginning and the end.

Telerik old RADScheduler behaves correctly for that events. It renders first part of the event in one day and the remainder of the event in another. Do you plan to add the same feature for Kendo Scheduler?

Scheduler

answered on 09 Jul 2013

1 answer

135 views

Grid horizontal scroll bar is between grid data and total/aggregation area?

I have a grid configured like in http://jsfiddle.net/dimodi/pcDq5/

This is working fine, except one thing. The horizontal scrollbar is stuck between the grid data and the totals area. I would expect the horizontal scroll to be below the total area.

Is there a recommended way to achieve that?

Thanks,
Ryan

Grid

answered on 09 Jul 2013

3 answers

137 views

Autocomplete WCF service data binding (XML communication)

Hi,

First of all I would like to mark that I'm quite fresh in the kendo UI stuff.
My employer asked me to write a mobile application using kendo UI. Because there is no data binding Topics I decided to write my post here.

So the problem is that autocomplete input does not get the data from webservice some how. I'm not shure if I wrote databinding correct.

Could someone help me? I'll be greateful for any help with that.

// THIS IS JAVASCRIPT
$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});

// THIS IS WEB FORM
<!DOCTYPE html>
<head>

<title></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" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

</head>
<body>
<div data-role="view" data-layout="overview-layout" id="vSearcher">
<p>
<label>Wprowadź dane do wyszukiwania</label>
<br />
<br />
<label>Producent:<br /><input type="text" id="tbProducer" class="k-input" autocomplete="on"/></label><br />
<label>Opis materiału:<br /><input type="text" id="tbMaterialDesc" class="k-input"/></label><br />
<label>Numer katalogowy:<br /><input type="text" id="tbCatalogNo" class="k-input"/></label><br />
</p>
<p style="text-align:center;">

<button id="btSearch" class="km-button" style="font-size:14px;">
<img src="img/search-32.png" width="24" height="24" style="align-content:center; align-self:center; vertical-align:central; margin: 0 15px 0 0"/>Szukaj
</button>
</p>

</div>

<div data-role="view" data-layout="overview-layout" id="vResults">
Wyniki
</div>

<div data-role="view" data-layout="overview-layout" id="vAboutUs">
O nas
</div>


<div data-role="layout" data-id="overview-layout">
<header data-role="header">
<div data-role="navbar">Cenpol Mobile © 2013</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#vSearcher"><img src="img/search-32.png" width="24" height="24" /><br /><label>Wyszukiwarka</label></a>
<a href="#vResults"><img src="img/result-32.png" width="24" height="24" /><br /><label>Wyniki</label></a>
<a href="#vAboutUs"><img src="img/about-32.png" width="24" height="24" /><br /><label>O nas</label></a>
</div>
</footer>
</div>

<style scoped>

.k-input {

padding: 0 10% 0 0;
width: 90%;
}


</style>

<script>
var app = new kendo.mobile.Application(document.body,
{
transition: 'slide',
platform:'android'
});

$("#tbProducer").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Wpisz producenta...",
dataSource: {
//type: "xml",
transport: {
read: {
type: "POST",
url: "http://mobileservice.cenpol.pl:81/CenpolMobileService.svc/GetProducers",
dataType: "xml",
processData: false,
data: xmlstring
}
},
schema:
{
data: "Alias",
model:
{
fields:
{
Alias: { type: "string" },
ContactDataID: { type: "number" },
ID: { type: "number" },
Suggested: { type: "number" }
}
}
},
serverFiltering: false
}
});
</script>
</body>

///////////////////////////////////////////////////////////////////////////////////////

The attachment is the response I get from the webservice.
The webservice is the WCF webservice. I use basichttpbinding because it is appropriate for Windows Phone App. I read it is OK for Kendo to get data from XML services (not only Json).

Thank you for your help. Any asnwer will be appreciated.

Best regards,
Paul

AutoComplete

answered on 09 Jul 2013

3 answers

60 views

Template of columnMenu has changed in 2013 version which prevent to skin checkbox column Menu

Hi,
I' trying to upgrade kendo from version 2012.2.913 to 2013.1.514 and i've noticed that the template used to generate the column menu has changed from :

'<li><label><input type="checkbox" data-#=ns#field="#=columns[col].field#" data-#=ns#index="#=columns[col].index#"/>#=columns[col].title#</label></li>'+

to

'<li><input type="checkbox" data-#=ns#field="#=columns[col].field#" data-#=ns#index="#=columns[col].index#"/>#=columns[col].title#</li>'

The suppression of the label in the template makes my little snippet of jsscript to mal function: this script is used to skin the checkbox displayed in the column menu:

// First put the label BEFORE the input

var

chkIdCounter = 1;

$(

"label > input[type='checkbox']").each(function

() {

       $(

this).attr("id", "labeledCheckBox"

+ chkIdCounter);

       $(

this).parent().attr("for", "labeledCheckBox"

+ chkIdCounter++);

       $(

this).insertBefore($(this).parent().parent().find($(this).parent()));});

and the we use the 'sprite trick' to skin the checkbox:

/* then hide the input and display a sprite in place */

input[type=

"checkbox"]

{

position: absolute;

display: none;

}

input[type="checkbox"]:checked ~ label::before

{

background-position: 0 -20px;

}

/* skin-specific sprite */

input[type="checkbox"] ~ label::before

{

background-image: url('itesoft/radios.png');

}

So i've 2 questions, please:
First, i'm curious to know why the label has been deleted, is it a wrong way to use checkbox ?
Then i would want to know if there is an other way to skin the checkbox of the column menu or to provide the template to use to build them ?

Thanks,
Cedric

Grid

answered on 09 Jul 2013

1 answer

91 views

Refresh Data Issue

Hi,

I have a grid that can be altered through calls to a webservice as users adjust things on a page.

To do this I initially did the following

var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({ data: CategoryPlanList, pageSize: 15 });
grid.setDataSource(dataSource);

Which updated my data perfectly, however I also needed to update columns whilst doing this, after some reading around I found a post saying I would have to remove and re-initialize the grid if I wish to do this, so I do:

grid.destroy();
$("#grid").empty();

and then re-create the grid using the same code that I used to initialize the grid in the first place, however this appears to have the issue that when the data is reloading the reordable facility on the grid ceases to function.

Does anyone know of a way where I can re-load a grid with new data and a new set of columns without the re-odering isue?

Thanks

Craig

Grid

answered on 09 Jul 2013

1 answer

3.4K+ views

How to pass variables in Grid Column ClientTemplate

Hello,

I would like to use ClientTemplate in a Grid column. I want to create html link in one of those column. I am not sure how declare and pass a variable of the Model that I am passing into the grid. I am trying to pass the variable ID and the name for the link as variable. model => model.IDString contains the id that is being passed to link and name of the link is represented in model => model.ViewImage.

Here is the piece of code I am using.

<div id="SearchResultGrid">
        @(Html.Kendo().Grid(Model)
        .Name("ExampleGrid")
        .Columns(columns =>
        {
            columns.Bound(model => model.IDString).Title("ID");
            columns.Bound(model => model.ViewImage).Title("View Image").ClientTemplate(model =>(
                "<a href='/Example/ExampleDocument.aspx?Id=" + model.IDString + "' >" + model.ViewImage + "</a>")
                );
        })
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .ServerOperation(false)
        .Sort(sort =>
        {
            sort.Add(model => model.Created).Descending();
        })
        )
.BindTo(Model)
    .Reorderable(reorder => reorder.Columns(true))
)
</div>

Can you give me an example of how declare the variable for this action link.
Following line works well for a server action

columns.Template(model =>(
                "<a href='/Provider/ProviderCorrespondenceDocument.aspx?CorrespondenceId=" + model.IDString + "' >" + model.ViewImage + "</a>")
                );

Grid

answered on 09 Jul 2013

3 answers

100 views

Multiple Points For a Category

Hi

I am trying to render a series that has 2 points for a given interval (e.g. category axis times at 00:00:00). My Kendo implementation seems to "step" the line even though the value is for the same interval.

I've attached a sample excel sample which renders my desired result, and my Kendo implementation. Is this possible - can you please provide a sample.

Thanks
Kieren

$("#chart").kendoChart({

title: {

text: "Units sold"

},

seriesDefaults: {

width: 2,

markers: {

visible: false,

},

overlay: {

gradient: null

}

},

series: [{

type: "area",

transitions: false,

width: 2,

data: [

230, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,

10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 0,

10

]

}, {

type: "line",

transitions: false,

width: 2,

data: [

250, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,

null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 250, null,

0

],

missingValues: "interpolate"

}],

valueAxis: {

labels: {

visible: true

},

line: {

visible: false

}

},

categoryAxis: {

baseUnit: "hours",

baseUnitStep: 1,

majorGridLines: {

visible: false

},

labels: {

visible: true,

//format: "{0}",

skip: 12,

step: 24,

rotation: 0,

format: 'dd MM yyyy'

},

categories: [

new Date('06/20/2013 00:00'), new Date('06/20/2013 00:00'), new Date('06/20/2013 01:00'), new Date('06/20/2013 02:00'), new Date('06/20/2013 03:00'), new Date('06/20/2013 04:00'), new Date('06/20/2013 05:00'),

new Date('06/20/2013 06:00'), new Date('06/20/2013 07:00'), new Date('06/20/2013 08:00'), new Date('06/20/2013 09:00'), new Date('06/20/2013 10:00'), new Date('06/20/2013 11:00'), new Date('06/20/2013 12:00'),

new Date('06/20/2013 13:00'), new Date('06/20/2013 14:00'), new Date('06/20/2013 15:00'), new Date('06/20/2013 16:00'), new Date('06/20/2013 17:00'), new Date('06/20/2013 18:00'), new Date('06/20/2013 19:00'),

new Date('06/20/2013 20:00'), new Date('06/20/2013 21:00'), new Date('06/20/2013 22:00'), new Date('06/20/2013 23:00'), new Date('06/21/2013 00:00'), new Date('06/21/2013 00:00'),

new Date('06/21/2013 01:00'), new Date('06/21/2013 02:00'), new Date('06/21/2013 03:00'), new Date('06/21/2013 04:00'), new Date('06/21/2013 05:00'),

new Date('06/21/2013 06:00'), new Date('06/21/2013 07:00'), new Date('06/21/2013 08:00'), new Date('06/21/2013 09:00'), new Date('06/21/2013 10:00'), new Date('06/21/2013 11:00'), new Date('06/21/2013 12:00'),

new Date('06/21/2013 13:00'), new Date('06/21/2013 14:00'), new Date('06/21/2013 15:00'), new Date('06/21/2013 16:00'), new Date('06/21/2013 17:00'), new Date('06/21/2013 18:00'), new Date('06/21/2013 19:00'),

new Date('06/21/2013 20:00'), new Date('06/21/2013 21:00'), new Date('06/21/2013 22:00'), new Date('06/21/2013 23:00'), new Date('06/22/2013 00:00'), new Date('06/22/2013 00:00'),

new Date('06/22/2013 01:00'),

],

majorTickType: "none"

}

});

Charts

answered on 08 Jul 2013