Questions on Kendo UI for jQuery Forum

1 answer

340 views

Hi,

Im using Kendo UI in my project i have 2 tabstip in my page i want to have different color for the 2 tabstip
1st tabstip in gray color
2nd tabstip in blue color
how to change the css of that ?

TabStrip

answered on 27 Dec 2012

1 answer

121 views

Pagination is not in sink in Listview

Hi All,

I have taken listboxes with button count 4. One of the listbox has more records when compare with second one. In this case, pagination was not in sink. Regardless of number of records(more/less), pagination look should be same & page button count, items per page,number of items should inline. I have tried in different ways. Nothing is working. How we can do that? Immediate help wolud be appreciated. I am attaching the screen shot also.

Regards,
Partha.

ListView

answered on 27 Dec 2012

1 answer

103 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

775 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

591 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

257 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

661 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

259 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

250 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