Questions on Kendo UI for jQuery Forum

1 answer

165 views

Hi there,

Is there a way to use plot bands to show alternating bands of color on the category axis of a line chart? (I am hooked up with a datasource and I don't know what or how many categories I will have..just that I want the colors to alternate).

thanks!

Charts

answered on 25 Oct 2012

1 answer

316 views

Datasource filter - get Value from XML node

Using the example set out in the following page:

http://demos.kendoui.com/web/grid/hierarchy.html

I have tried to get this to use XML as the datasource instead of oData. I get an "d is not defined" javascript error.

I think it must be the filter that is not working.

filter: { field: "customer", operator: "eq", value: "id/text()" }

but I cannot find any examples of the Grid using XML, and do not know what to put for the "value" to get this to match up to the value of the "id" node in the customers XML file - can anyone help? The whole code is below.

$(document).ready(function() {

var element = $("#grid").kendoGrid({

dataSource: new kendo.data.DataSource({

type: "xml", // specifies data protocol

pageSize: 6, // limits result set

serverPaging: true,

serverSorting: true,

transport: {

read: "customers.xml"

},

schema: {

type: "xml",

data: "/Customers/Customer",

model: {

fields: {

id: "id/text()",

surname: "surname/text()",

forename: "forename/text()",

email: "email/text()"

}

}),

height: 450,

sortable: true,

pageable: true,

detailInit: detailInit,

dataBound: function() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

columns: [{

field:"id",

filterable: false

},

"surname",

"forename",

"email"

]

});

function detailInit(e) {

$("<div/>").appendTo(e.detailCell).kendoGrid({

dataSource: {

type: "xml",

transport: {

read: "orders.xml"

},

schema: {

type: "xml",

data: "/orders/order",

model: {

fields: {

id: "id/text()",

net: "net/text()",

vat: "vat/text()",

dispatched: "dispatched/text()"

}

},

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize:6,

filter: { field: "customer", operator: "eq", value: "id/text()" }

},

scrollable: false,

sortable: true,

pageable: true,

columns: [ "id", "net", "vat", "dispatched" ]

});

}

Data Source

answered on 25 Oct 2012

9 answers

197 views

Problem deselecting 4 or more cascading dropDownList

Hi,
I have a problem with 4 or more cascading dropDownList.
When I deselect the first dropDownList, last is not correctly refreshed (initialized)
Could you help me?
Thank you,
Amos

<p>

<label for="categories">Catergories:</label>

@(Html.Kendo().ComboBox()

.Name("categories")

.Placeholder("Select categoryasdasda...")

.DataTextField("Cod")

.DataValueField("Des")

.DataSource(source => {

source.Read(read => {

read.Action("GetCascadeCategories", "ComboBox");

});

})

)

</p>

<p>

<label for="products">Products:</label>

@(Html.Kendo().ComboBox()

.Name("products")

.Placeholder("Select product...")

.DataTextField("Cod")

.DataValueField("Des")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetCascadeProducts", "ComboBox")

.Data("filterProducts");

})

.ServerFiltering(true);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("categories")

)

<script>

function filterProducts() {

return {

categories: $("#categories").val()

};

}

</script>

</p>

<p>

<label for="orders">Orders:</label>

@(Html.Kendo().ComboBox()

.Name("orders")

.Placeholder("Select order...")

.DataTextField("Cod")

.DataValueField("Des")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetCascadeOrders", "ComboBox")

.Data("filterOrders");

})

.ServerFiltering(true);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("products")

)

<script>

function filterOrders() {

return {

products: $("#filterOrders").val()

};

}

</script>

</p>

<p>

<label for="ciccio">Ciccio:</label>

@(Html.Kendo().ComboBox()

.Name("ciccio")

.Placeholder("Select order...")

.DataTextField("Cod")

.DataValueField("Des")

.DataSource(source => {

source.Read(read =>

{

read.Action("GetCascadeciccio", "ComboBox");

})

.ServerFiltering(true);

})

.AutoBind(false)

.CascadeFrom("orders")

)

<script>

function filterOrders() {

return {

ciccio: $("#filterCiccio").val()

};

}

</script>

</p>

DropDownList

answered on 25 Oct 2012

0 answers

112 views

Upload file name cant save in database

Upload file uploaded in directory but file name cant save in database. pls give solution for that

Upload

asked on 25 Oct 2012

0 answers

124 views

#link reload content

hello all. Use kendo ui Mobile with great satisfaction! is very powerful.
But I have a problem I can not solve.
how can I get these links?

<a href="#link.html?id=1">
<a href="#link.html?id=2">
<a href="#link.html?id=3">

when calling a link works fine, but quanro recall another link, the page is blank.
while if I need to refresh the page is loaded correctly.
please help me.

ModalView

asked on 25 Oct 2012

2 answers

297 views

Drop down list inline styles

Hi,
I'm new in KendoUI. I am using the dropdown list feature and I have some issues with the styling of the list. The DIV's with these classes:
"k-list-container k-popup k-group k-reset" and "k-list-container k-popup k-group k-reset" receive some inline styles that are in conflict with the styles I want to apply to the elements. Is there a way to overwrite them by using css? By now I couldn't find a workaround for this problem. Greetings, Vessi

DropDownList

answered on 25 Oct 2012

0 answers

118 views

filtering data

Hi,

I'm using dropdownlist and autocomplete to search data from backend.when I am filtering data in autocomplete the data is working as i seen in img1 image which I have attached.But the problem is if I try to get the data related to the dropdown list selected item the autocomplete is not working. I need the results as attached example images img2 and img3. If I select the data as DataItem1 then data related to that data only should be displayed.

I have worked out on this using filters but in autocomplete if I use more than one filter then autocomplete is not firing.

Any help is appreciated.

Regards,
srinu

Grid

asked on 25 Oct 2012

0 answers

196 views

Title or separator in combobox

Hi,

Is there a simple method to include a separator or sub-titles in the the list of items displayed in a combobox?

I use a template to render the item contents, and can change the text if the item from the server data is a separator, but it is still selectable. I suppose I am looking for a class or something that I can put on the item to make the item un-selectable.

My combobox has number of preferred values at the top of the list, but offers the user additional options that may be relevant in rare cases. I would like to visually separate the preferred options from the rarely used options.

Sample:
template: '# if (data.Divider != true) { #<span>${ data.RowLabel }</span> # } else { # <div class="nonselectable">${ data.RowLabel}</div> # } # '

ComboBox

asked on 25 Oct 2012

0 answers

382 views

kendomobilelistview button click event fire twice

Hi,

i am facing some stupid problem. i have try lots other way but i am not getting success.

i am using kendomobilelistview with template binding with $.ajax every thing working fine but button click event fire on time then if refresh data(using endlessScroll) then button event fire twice and again refresh listview then click on button then fire three time event. if we do same process again then again fire 4 event.

if refresh list view then continue increase event again and again.

dataSource with service

var JobActionItemDataSource = new kendo.data.DataSource({

pageSize: 15,

serverPaging: true,

transport: {

read: function (options) {

window.kendoMobileApplication.showLoading();

$.ajax({

url: urlstring + "GetJobTaskByEmployeeID",

data: {

UserID: JSON.stringify(localStorage.getItem("AuthorizedUserId")),

CompanyType: JSON.stringify($('#radio_Marketing').attr('checked') ? 1 : 0),

PageSize: options.data.pageSize,

PageNumber: JobActionItemPageIndex

},

dataType: "jsonp",

success: function (result) {

options.success(result.d);

JobActionItemPageIndex += 1;

}

});

},

data: function (response) {

alert(response.d);

return response.d;

}

});

init function

// view design here

<div data-role="view" data-title="Action items" id="view-actionitems" data-init="init_ActionItemsLanding"

data-show="show_ActionItemsLanding">

<header data-role="header">

<div>

<img src="img/CompanyLogo.png" width="100px" height="34px" />

<a class="km-rightitem" data-rel="popover" href="#popover-actionitems" data-role="button">Jump To</a>

<a class="km-rightitem" data-click="Logout" data-role="button">Logout</a>

</div>

</header>

<ul id="endlessscrolling-JobActionItemsBinding">

</ul>

</div>

/// script code

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

<div class="tweet">

<div class="notesmessage">

<span >

#if(JobID!=0){#

<div> <a id=

"WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#"

data-role="button" class="km-button" data-click="GoActionitemcompleteevent"

style=

"width:auto; background: none repeat scroll 0 0 transparent;box-shadow: none;color: blue;margin-left: 0;text-decoration:underline;padding: 5px;width: auto;text-align: left;"

>#= Task #</a></div>

<br/>

#=DueTimeFrameColorFormat#

#} else{#

#= Task # <br/>

#}#

#= DueTimeFrame # </span>

<div style="text-align: center;">

#if(JobID!=0){#

<a id="#=JobID#" data-role="button" data-click="job_jobdetails" style="width:145px;padding: 5px;" >#= JobNumber # </a>

<a name="0" id=

"WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#"

data-role="button" data-click="GoActionitemcompleteevent" style="width:70px;padding: 5px;" >Complete</a>

<br/> #}#

<a id="#=CustomerID#&Type=#=CustomerType#" data-role="button" data-click="GotoViewContactInformation" style="width:145px;padding: 5px;" ><span style="font-size: 0.8em; font-style:italic;">#= EmployeeName #</span></a>

#if(JobID!=0){#

<a id="ID=#=JobID#&JobNumber=#=JobNumber#" data-role="button" data-click="GoToViewJobAddActionItems" style="width:70px;padding: 5px;" >Add</a>

#}else{#

<a id="ID=#=CustomerID#&Type=#=CustomerType#&ContactName=#=EmployeeName#" data-role="button" data-click="GoToViewAddMarketingActionItem" style="width:70px;padding: 5px;" >Add</a>

#}#

</div>

</script>

// init function

function init_ActionItemsLanding(e) {

$("#endlessscrolling-JobActionItemsBinding").kendoMobileListView({

dataSource: JobActionItemDataSource,

template: kendo.template($("#endlessscrolling-JobActionItemsBinding-template").text()),

endlessScroll: true,

scrollTreshold: 30

});

}

// show funciton

JobActionItemPageIndex = 1;

var refreshJobActionItems = $("#endlessscrolling-JobActionItemsBinding").data("kendoMobileListView");

refreshJobActionItems.dataSource.read(1);

refreshJobActionItems.refresh();

thanks,

Raghw

ListView (Mobile)

asked on 25 Oct 2012

3 answers

402 views

MinLength 0?

I would like for my autocomplete box to populate on focus and then filter down as the user types, essentially giving it a minlength of zero. Just setting the minlength to 0 doesn't seem to do it. I also tried using a combobox instead but it only makes a single web service call and then filters down the data from the call (instead of retrieving fresh data).

The reason that doesn't work for me is the resulting data can be anywhere from 0 to thousands, and my web service only returns the top 20 results, so I need to refreshing the datasource as the user types. The autocomplete does this perfectly, but like I said I just can't get it to populate without any user input.

What do you recommend?

AutoComplete

answered on 25 Oct 2012