Questions on Kendo UI for jQuery Forum

1 answer

94 views

[Press to load more] button is highly UN-responsive on iPad/Pod

'ListView / Press to load more' example http://demos.kendoui.com/mobile/listview/press-to-load-more.html - [Press to load more] button is highly UN-responsive on iPad v6.0.1 (and elsewhere).

Here is example running out of the box: http://jsfiddle.net/jmucci/AKuGu/

I am unable to get the [Press to load more] button to respond to taps except on very few occasions.

ListView (Mobile)

answered on 26 Dec 2012

3 answers

754 views

ListView Template trying to add a partial View

I am trying to use a Partial View as a Template for the listView.

are there any exapmples?

The Template gives an error.

If I try to create a Script is does not pass ITEM that is in a loop in the listview.

<script type="text/x-kendo-tmpl" id="template">
<div class="item-box">
@Html.Partial("_ProductBox", item)
</div>
</script>

@(Html.Kendo().ListView<ProductOverviewModel>(Model.Products)
.Name("listView")
.TagName("div")
.ClientTemplate(@<text><div class="item-box">
@Html.Partial("_ProductBox", item)
</div></text>))
//.ClientTemplateId("template")
.DataSource(dataSource => {
dataSource.Read(read => read.Action("HomepageProducts", "Catalog"));
dataSource.PageSize(12);

})
.Pageable()
)

Templates

answered on 26 Dec 2012

3 answers

578 views

How to best access view model properties

In all of the examples I've seen, view model properties are accessed using the "this" keyword. For example:

this.get("name")

This is not always possible. Consider the following example:

I have a ListView (mobile, btw) and above it I have a search text box that does an "instant search" of sorts while the user types. The text box looks something like this:

<input type="text"
data-value-update="keyup"
data-bind="value: searchText, events: { keyup: searchForItem }" />

searchForItem makes an async ajax call and the success callback updates the ListView. The trouble is that "this" does not refer to the view model in the call back. What is the right way to access the view model and it's properties in this type of situation? The only way I seem to be able to do this is to make all the view models available from the global name space. For example:

//app is global

app.viewmodels.carsViewModel.get(

"cars").push(car);

This seems to work but is there a better or more elegant approach? Not to mention that I am using require.js to organize my project and would prefer to have nothing in the global namespace.

BTW, I am running into the same problem with declarative binding. Since I am using require.js it seems like the only way I can reference tthe view model is something like this:

<div id="carsView"

data-role="view"

data-model="app.viewmodels.carsViewModel">

Thanks!

MVVM

answered on 26 Dec 2012

3 answers

247 views

BeforeChange or Selectable=False

I have a master details setup where all of my items are in a listview that uses a template to show a summary of their details. Once an item is selected, another template is renderend that shows an editable form for the selected item. I am not using the Edit functionality of the listview. I would like to prevent the user from selecting a different item if the currently selected item isDirty.
My question is, would it be best to set Selectable=False when the current item has changes and then to True after changes have been saved/cancelled or is there a better way to handle this scenario? Would changing the Selectable value even work or is this something that can only be set during initialization?
Based on similar posts, there seems to be many requests for an event to cancel the Change event of the listView. I hate to ask, but are there any plans to implement this functionality?

I am also experiencing an issue where the uid of the selected listview item seems to change when cancelChanges is called on the underlying datasource. Is this expected behavior?

thanks,

ListView

answered on 26 Dec 2012

18 answers

1.5K+ views

Destroy command in toolbar

When I set the toolbar to display a delete button, nothing happens when I click on it.
But it works when I add a destroy column. Should I do something special to active the delete button in toolbar?

here is my code:

$("#grid").kendoGrid({

dataSource: _ds,

height: 350,

scrollable: false,

pageable: true,

sortable: false,

//selectable: "multiple, row",

navigatable: true,

columns: [

//{title: "Id", field: "Id", width: 150},

{title: "Name", field: "Name", width: 150},

{title: "Description", field: "Description", width: 300}

],

toolbar: ["create", "destroy", "save", "cancel"],

editable: true

});

_ds = new kendo.data.DataSource({

type: "json",

serverPaging: true,

serverSorting: true,

pageSize: 15,

batch: false,

transport: {

read: {

url: "@Url.Action("GetRoles", "Role", new { area = "UserManagement"})"

},

update: {

url: "@Url.Action("UpdateRole", "Role", new { area = "UserManagement" })"

},

destroy: {

url: "@Url.Action("DeleteRole", "Role", new { area = "UserManagement" })"

},

create: {

url: "@Url.Action("CreateRole", "Role", new { area = "UserManagement" })"

}

},

schema: {

data: function(data) {

return data.result;

},

total: function(data) {

return data.totalCount;

},

model: {

id: "Id",

fields: {

Id: { editable: false, nullable: false },

Name: { editable: true, validation: { required: true } },

Description: { editable: true, validation: { required: false } }

}

},

error: function (e) {

var json = jQuery.parseJSON(e.responseText);

alert("An error has occured: " + json.Message);

}

});

Grid

answered on 26 Dec 2012

1 answer

649 views

Chart ValueAxis positioning

Hi, wondering if there is a way to position the valueaxis labels to the right side of the chart. I know you can mirror the labels, but I was wondering if we can position them on right side. I can only find an API for mirror.
thanks
Marty

    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Trend (30 Days)")
        .HtmlAttributes(new { style = "height:240px;" })
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults
            .Line()
            .Stack(true)
            .Width(1)
            .MissingValues(ChartLineMissingValues.Interpolate)
            .Markers(false))
        .ValueAxis(v=>v.Numeric().Labels(l=>l.Mirror(true)))

Charts

answered on 26 Dec 2012

1 answer

253 views

Change data for related data on update?

I am using the $expand to get related data which works fine but I need to change the data that is sent back
to the server when the data is updated

Example if my Server Side Data Model contains two entities
Contact
   ID: number
   firstName: string
   middleName: string
   lastname: string
   ContactType: ContactType n-1

ContactType
   ID: nubmer
   name: string
    ContactCollection: ContactType 1-n

Here is my datasource code

function GetContactDS(){

var MyModel = kendo.data.Model.define({

id: "ID",

fields: {

__KEY: { type: "string" },

__STAMP: { type: "number" },

ID: { editable: false, nullable: true },

firstName: { type: "string" },

middleName: { type: "string" },

lastName: { type: "string" }

},

});

var crudServiceBaseUrl = "http://127.0.0.1:8081/cors/Contact";

var MyDataSource = new kendo.data.DataSource({

transport: {

read: function(options) {

$.ajax( {

url: crudServiceBaseUrl + '/?$expand=ContactType',

dataType: "json",

data: options.data,

success: function(result) {

options.success(result);

}

});

},

update: function(options) {

$.ajax( {

url: crudServiceBaseUrl + "/?$method=update",

type: "POST",

dataType: "json",

data: kendo.stringify(options.data.models),

success: function(result) {

// notify the DataSource that the operation is complete

options.success(result);

}

});

},

destroy: {

url: crudServiceBaseUrl + "/?$method=delete",

type: "GET"

},

create: {

url: crudServiceBaseUrl + "/?$method=update",

dataType: "json",

type: "POST"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return JSON.stringify({"__ENTITIES": options.models});

}

},

batch: true,

pageSize: 30,

schema: {

model: MyModel,

data: "__ENTITIES"

}

});

return MyDataSource;

}

The read request returns this data

{"__entityModel":"Contact","__COUNT":1,"__SENT":1,"__FIRST":0,"__ENTITIES":[{"__KEY":"7","__STAMP":9,"ID":7,"firstName":"jay","middleName":"a","lastName":"blue","ContactType":{"__KEY":"2","__STAMP":4,"ID":2,"name":"Home","contactCollection":{"__deferred":{"uri":"/rest/ContactType(2)/contactCollection?$expand=contactCollection"}}}}]}

Here is the code calling read and binding to grid

var ContactDS = GetContactDS();

$("#grid").kendoGrid({

selectable: "row",

filterable: true,

pageable: true,

sortable: true,

change: function(){

datamodel = this.dataItem(this.select());

ID = datamodel.ID

},

dataSource: ContactDS,

columns: [

{ field: "ID" },

{ field: "firstName" },

{ field: "middleName" },

{ field: "lastName" },

{field: "ContactType.name"}

]

});

Which works fine I am getting the expanded info for ContactType in my datasource and it binds to a grid fine.
Now I want to update the after it the selected data row is read into a form, reading the data into the form works fine.

The problem is sending the update back to the server which expects a slightly different format for the related entity ContactType
It only needs the changed value of "__Key" to update
Here is my update function:

$("#update").click(function () {

datamodel.set("firstName", $("#firstName").val());

datamodel.set("lastName", $("#lastName").val());

datamodel.set("middleName", $("#middleName").val());

// datamodel.set("ContactType.__KEY",3);

ContactDS.sync();

Here is the data that the server expects

{ "__ENTITIES": [{"__KEY":"7","__STAMP":14,"firstName":"jay","middleName":"a","lastName":"red","ContactType":{"__KEY":"2"}}]}

Here is what kendo.datasource is sending

[{"__KEY":"7","__STAMP":12,"ID":7,"firstName":"jay","middleName":"a","lastName":"blue","ContactType":{"__KEY":"3","__STAMP":2,"ID":3,"name":"Work","contactCollection":{"__deferred":{"uri":"/rest/ContactType(3)/contactCollection?$expand=contactCollection"}}}}]

So how do I either reformat the data or define my model or datasource options to make sure that the extra ContactType fields are removed just leaving the updated "__KEY:" as well as wrapping the whole request in { "__ENTITIES":}

Thanks for any help!

Dan

Data Source

answered on 26 Dec 2012

2 answers

235 views

Create Kendo widgets using data-role attribute

Hello,

Kendo UI documentation (http://docs.kendoui.com/howto/add-widgets) says that:

Widgets may configured in the following two (2) ways:

in a script block via a jQuery selector and configuration properties;
or, with data-* attributes for configuration properties and via a call to kendo.init().

However I've tried creating datepicker by using data-role attribute in my web application without calling kendo.init() and it works.
So, there is no longer need calling kendo.init() or there could be some issues with using the control or other controls if not calling kendo.init() ?

Thanks ahead,
Taras

General Discussions

answered on 25 Dec 2012

3 answers

141 views

Chart Preview

Is there any way to get a preview of a chart control? I mean a smaller version that would kind of be like a thumbnail version with no labels and smaller. I am trying to have a setup with smaller Kendo Charts that you can click to expand to a larger size, but having the smaller size still have an accurate looking representation of the graph. Is there a way to do this with the controls now? If not, will that be added in the future?

Charts

answered on 25 Dec 2012

1 answer

257 views

dataItem when grouping in effect

The following code works until a column header is dragged to the group-panel; then dataItem becomes undefined:

var grid = $('#grid').data('kendoGrid');
$(grid.tbody, "tr").each(function (idx, elem) {
var dataItem = grid.dataItem(elem);
}
});

I have tried changing the selector to this:

$(grid.tbody, "tr:not(.k-grouping-row)")

but without success; dataItem is still undefined.

How to get the dataItem for each row when the grid is being grouped?

Thanks

Grid

answered on 25 Dec 2012