Questions on Kendo UI for jQuery Forum

2 answers

148 views

Pretty simple grid that loads after you select a date range.

$(document).ready(function () {
  var start = $("#start").kendoDatePicker();
  var end = $("#end").kendoDatePicker();
$("#load").click(function () {
orderDataSource.read();
});
  var orderDataSource = new kendo.data.DataSource({
pageSize: 10,
transport: {
read: {
url: MyOrdersUrl,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
start: function () { return $("#start").val(); },
end: function () { return $("#end").val(); }
}
}
},
schema: {
data: "d",
model: {
fields: {
Id: { type: "number" },
d_OrderDate: { type: "date", parse: parseJSONDate },
d_DueDate: { type: "date", parse: parseJSONDate },
Phone: { type: "text" },
Type: { type: "text" }
}
}
},
});
  var grid = $("#grid").kendoGrid({
dataSource: orderDataSource,
autoBind: true,
filterable: true,
columnMenu: true,
sortable: true,
pageable: true,
columns: [
{ field: "Id" },
{ field: "d_OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}" },
{ field: "d_DueDate", title: "Due Date", format: "{0:MM/dd/yyyy}" },
{ field: "Type" },
{ command: { text: "View Details", click: showOrder }, title: " ", width: "140px" }
  ]
}).data("kendoGrid");
});

When you select your dates and select load the grid it populates perfectly but it is not paged and the pager arrows are inactive. If I select the drop down and change the "items per page" then the grid properly filters and pages and becomes active. Is there a way to trigger the grid to page the items after they load?

Grid

answered on 11 Oct 2012

0 answers

127 views

Update and delete operation issue on kendogrid

This is wcf service application odata V2
created model and service using telerik open access

but some how i am unable to perform inline editing.

i checked in fiddler that when i click on update i could not see anything that is related to update functionality.

and one more strange this is. whenever i add parameterMap object , i am getting error so i have commented it.
error is jquery17100000 ... is not called .

Please help me to get this done.
I have attached the sample project which has both service and client application

please have a look and help.
i have not attached the db but u can connect to any db which is having Accounts table with Id, Name,Adress and City fields.

Thank you
Victoria

Data Source

asked on 11 Oct 2012

1 answer

264 views

Error Popup Editor with AutoComplete and DropDownList

Hi, i want to make input AutoComplete and DropDownList on custom popup editor
Look at this :
Script HTML in x-kendo-template :

<div id="grid" style="width: 700px; margin: 0 auto;"></div>

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

<p>Custom editor template</p>

<div class="k-edit-label">

<label for="FirstName">First Name</label>

</div>

<input name="FirstName"

data-bind="value:FirstName"

data-value-field="firstName"

data-text-field="firstName"

data-source="autoCompleteDS"

data-role="autocomplete" />

<div class="k-edit-label">

<label for="LastName" style="color: red;">Last Name</label>

</div>

<input name="LastName"

data-bind="value:LastName"

data-value-field="lastName"

data-text-field="lastName"

data-source="dropDownListDS"

data-role="dropdownlist" />

<div class="k-edit-label">

<label for="BirthDate">Birth Date</label>

</div>

<input type="text"

name="BirthDate"

data-type="date"

data-bind="value:BirthDate"

data-role="datepicker" />

<div class="k-edit-label">

<label for="Age">Age</label>

</div>

<input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" />

</script>

and this script on javascript :

var autoCompleteDS = new kendo.data.DataSource({

data: [

{firstName: "Alex"},

{firstName: "Alice"},

{firstName: "Antony"},

{firstName: "Anne"},

{firstName: "Anna"}

]

});

var dropDownListDS = new kendo.data.DataSource({

data: [

{lastName: "Alex"},

{lastName: "Alice"},

{lastName: "Antony"},

{lastName: "Anne"},

{lastName: "Anna"}

]

});

.......

editable: {

mode: "popup",

template: $("#popup_editor").html()

},

edit: function(e) {

$(e.container)

.find("input[name='FirstName']")

.data("kendoAutoComplete")

.find("input[name='LastName']")

.data("kendoDropDownList")

.bind("change", function(e) {

console.log("auto complete changed");

});

},

....

So, a problem is button update and cancel can't be action
original code from here http://jsfiddle.net/valchev/BCBzS/17/

Thank

Grid

answered on 11 Oct 2012

0 answers

91 views

How can we put the tabstrip at the bottom ?

Could you tell me how can I put the tabstrip at the bottom ?

TabStrip

asked on 11 Oct 2012

1 answer

133 views

detail row collapsed when editing

Hi,
I am new to kendo UI,

Please help on this
http://jsfiddle.net/raaaT/9/

when I tried to edit the detail grid (subitems), the row will collapse once the editor is out of focus.
Is there anyway to avoid this?

thanks!

Grid

answered on 11 Oct 2012

5 answers

456 views

Datasource Model fields of type "date" lose time portion?

The model defined below on kendo ui datasource strips off the time portion of the StartDate and EndDate when deserialized on client. I tried setting the model type to "datetime" but that didn't seem to work. If i remove the model then the time portion is not lost but i have to do ISO date parsing manuallly. What am i doing wrong?

More info:
I'm using web api controller that returns dates in ISO 8601 format.

schema: {

errors: function (response) {

return response.errors;

},

model: {

id: "ItemID",

fields: {

"Subject": { type: "string" },

"StartDate": { type: "date" },

"EndDate": { type: "date" }

}

},

General Discussions

answered on 11 Oct 2012

8 answers

506 views

How to add row to CRUD datasource using MVVM?

I have defined a kendo datasource with transport methods (create, read, update, and destroy), as well as a schema definition:

var dataSource = new kendo.data.DataSource({

transport: {

create: {


                    url: "/api/Prospects",
                    type: "POST"
                },

read: "/api/Prospects",

update: {

url: "/api/Prospects",

type: "PUT"

},

destroy: {

url: "/api/Prospects",

type: "DELETE"

}

},

schema: {

model: {

id: "ProspectId",

fields: {

ProspectId: {

editable: false,

nullable: true

},

FirstName: { type: "string" },

LastName: { type: "string" },

EmailAddress: { type: "string" },

ProspectTypeId: { type: "number" },

ProspectStatusId: { type: "number" }

}

},

type: "json"

}

});

My form elements contain appropriate data-bind attributes to form elements, and I am calling kendo.bind passing the form and datasource as parameters. The goal is that the form is used for both adding and editing records.

I am not sure how to write the code to initialize the form for adding a new record to the datasource.

I've been unsuccessful finding an example to do this on the kendo website. Can you help?

Thanks,
Gary

MVVM

answered on 10 Oct 2012

1 answer

80 views

hitting server thrice

this is my code. its hitting server 3 times when page is loaded.
Please give me the solution.

$("#jobsgrid").kendoGrid({
                        dataSource: {type: "json",
                            serverPaging: true,
                            pageSize: ${pagesize},
                            transport: { read: { url: contextPath + "/ajax/jobs.htm", dataType: "json"} },
                            schema: { data: "data", total: "count" }
                        },
                        resizable: true,
                        scrollable: true,
                        sortable: true,
                        pageable: true,
                        rowTemplate: kendo.template($("#template1").html())

                    });

Grid

answered on 10 Oct 2012

0 answers

122 views

StartsWith Filter on 2 fields

I know this functionality does not exist out of the box, but I was wondering if there was some way to have (force/hack/trick) the combo box to filter on two fields and use startswith.

If I was considering the contains filter there is an easy work around in that I could concatenate the two fields into one and point the filter at the new field. Sadly I'm required to only use starts with.

I was wondering if there was some private event that I can piggy back onto. For example, right after a combo box has filtered after a key press. Is there some event I can hook into?

ComboBox

asked on 10 Oct 2012

2 answers

366 views

Grid Footers and Formats

2 questions on this column:
{
field: "RowTotal",
title: "Row Total",
aggregate: ["sum"],
footerTemplate: "Total: #=sum#",
format: "{0:c}",
},

1. Why does column format: "{0:c}", show me Dollars when my regional settings set this to be in Euro?

2. Why does #=sum# (or in fact any aggregate) stop the footer from rendering ?

I get the javascript error that "sum" is not defined.

Grid

answered on 10 Oct 2012