Questions on Kendo UI for jQuery Forum

1 answer

298 views

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

285 views

[Solved] 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

176 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

286 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

2 answers

957 views

[Solved] AutoComplete with remote DataSource "contains" filter

I there a way to create a remote DataSource for an AutoComplete that uses "contains" instead of "startswith"? I tried specifying the filter like so:

$("#SearchFor").kendoAutoComplete({

minLength: 2,

dataTextField: "FullText",

dataSource:

{

type: "json",

serverFiltering: true,

serverPaging: true,

pageSize: 20,

filter:

{

field: "FullText",

operator: "contains",

value: $("#SearchFor").val()

},

schema:

{

data: "data",

count: "count"

},

transport:

{

read: applicationPath() + "/Home/SearchForStuff"

}

});

but, it was changed/overridden by the component on the AJAX request.

AutoComplete

answered on 25 Dec 2012

2 answers

333 views

TextArea in listview

Hi..
I'm trying to create a simple email form in a listview. But the TextArea does not show up on an iPad.
Any ideas?
Do you have a similar sample or example of mobile form to send email
thx

<ul id="SendEmail">

<li>Your Name<span class="list-item-data"> <input id="name" style="width: 100%" required="required" type="text" class="k-input"></span></li>

<li>Your Email<span class="list-item-data"> <input id="email" style="width: 100%" required="required" type="email" class="k-input"></span></li>

<li>Message<span class="list-item-data">


<textarea id="txtMsg" style="background-color: #FFFFFF; border-style: solid; border-width: 1px; width: 100%"></textarea>


</span></li>

<li><br /><a class="button" data-role="button" data-click="sendClick" href="#button-send" style="color: #fff; background-color: #f60">Send</a></li>

</ul>

ListView (Mobile)

answered on 25 Dec 2012

1 answer

241 views

Binding json data from MVC Web API displays only the first row data

Hi

I have a KendoUI web grid on a Asp.NET MVC 4 Razor Page. I'm using the simple jquery Kendo grid and not aspnetmvc helpers.
The read datasource is provided by an WEB API (mvc api controller) method which returns 15 data rows (attached image shows the debug mode and 15 rows).

When my page is loaded I see my grid with 15 rows and paging count/size is correct. But only the first row has data values, all other 14 rows are empty (second attached image). As you can see in my first attached image with debug mode I have data values in my third row (all rows have values) in C# object, but only the first one is filled in the grid...

With F12 in chrome we can take a look on the data returned and that seems only the first one has values (you can see it on second attached image)... WHY ? Is it a json conversion issue ?

I really don't understand what is the problem, I have already filled another grid in the same project with another Entity data type and it worked well. The difference between the two Entity data types is that the first one (which worked) don't have complex types (Entity Navigation Properties) and the second one has several complex properties and virutal Lists (referenced tables).

Any help can be appreciated.
Thanks in advance.

Best regards,
Pedro

Grid

answered on 25 Dec 2012

1 answer

286 views

Debugging options for exceptions thrown in ASP.Net MVC views

I'm somewhat disappointed by the lack of debugging information given by default for the Kendo Html helpers. The only way I've so far been able to tell what I'm doing wrong with them is with a try-catch, which most people around the web say is poor practice at best. So my question is, is there a better way to catch all errors on the view and log them somehow? Or redirect to Or a way to do less of the Kendo logic in the view?

As an example, here's what I've come up with for catching errors.

@(

try {

@Html(.Kendo().Grid(Model)

// etc.

)

}

catch(Exception e)

{

@Html.Raw("<pre>" + e + "</pre>");

}

)

Which works for debugging, but is very inelegant. Without this exception catch block, I wind up with a zero-byte response which is just a blank screen.

I realize this problem isn't unique to the Kendo Asp.NET MVC exceptions, but the code used to generate the fancy-ness is quite heavy in terms of syntax and computations. Is there any intrinsic logging or exception handling included with Kendo?

Also, any tips on debugging the client side code would be appreciated. Are un-minified versions of the javascript available? Can you specify the html extension methods to generate line breaks so the widget code is easir to read?

General Discussions

answered on 25 Dec 2012

1 answer

124 views

Define a part of fields for remote datasource

I have a datasource binding to remote data. The model of remote data has many fields. I found that if I do not define schema.model.fields, all fields from remote will be processed, while if I define it, only data in defined fields will be processed. I just want to define part of remote fields, let other fields be defaults.

ds = new kendo.data.DataSource({
schema: {
model: {
id: 'UID',
fields: {
UID: { type: 'number', defaultValue: -1 }
// Can I ignore other 20+ fields?
}
},
},
transport: {
read: '/Path/To/ReadData',
create: ...,
update: ...
}
}

The reason I want to do so is, when I add an item to the datasource then sync, the create action is not triggered. I debugged into source code and found that for the new item, its status is not 'created' since my default value -1 is not equal to "default" defaultValue of ""(empty string). So I think if I could define the id field and ignore other fields, this could be resolved. I know I can define all fields to make it work, but those other fields I don't care. For now, as a workaround, I have to set the id of new item to empty string to make create new item working.

Thanks,

Lei

Data Source

answered on 25 Dec 2012

1 answer

481 views

Best practice for Data Source Master Detail

Hello,
I would like create a simple Master Detail page, this is the demo page:
http://beta.iper.net/kendo/master-detail/

What is the Best practice to implement a Data Source Master Detail page?

On past I have used ADOBE SPRY and it's have a easy mode to link master data source with detail data source, this is a demo of SPRY:
http://adobe.github.com/Spry/demos/gallery/index.html

Kendo can find useful hints ;)

Thank you!

Data Source

answered on 25 Dec 2012