Questions on Kendo UI for jQuery Forum

0 answers

130 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

284 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

94 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

139 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

484 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

537 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

84 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

133 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

378 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

0 answers

185 views

Problem with bindings and remote views

Hi,

i got the issue that when navigating to an external view a jscript error is thrown complaining that data for a binding could not be found.
-- Uncaught Error: Unable to parse bindings. Message: ReferenceError: Username is not defined; Bindings value: value: Username
--

This happens when the user tries to navigate to an external page like "/Studies/List/".

Actually I use kendo.bind to display the data on the view (but it's the same problem with knockout).

Basically my Views look like this:

--
<div data-role="layout" data-id="buttons" >
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="#details" data-icon="home">Locale View</a>
<a href="@( Url.Content("~/Studies/List") )" data-icon="mostrecent">External</a>
</div>
</footer>
</div>

<div data-role="view" data-title="Home" data-layout="buttons" id="home">
<div id="dataView">
<span data-bind="text: name"></span>, <span data-bind="text: vorname"></span>
</div>
</div>

<div data-role="view" data-title="Details" data-layout="buttons" id="details">
<span data-bind="text: name"></span>
</div>
--

and here is the minimal JScript for it:

<script type="text/javascript">
var app = new kendo.mobile.Application(document.body, {
transition: 'slide'
});

var data = kendo.observable({
name: "LastName",
vorname: "FirstName"
});

kendo.bind($("#dataView"), data);
kendo.bind($("#details"), data);
</script>

--

so, whenever the user is in the home screen (v1) hits the 3rd tab-button and the "external" view (v2) is loaded, v2 is never displayed because jscript complains about the missing data that is bound in v1.

Really strange. Did I mention that it doesn't matter if you use kendo.bind or the knockout-version? It doesn't, so i guess it's a problem from either the views or the application (or all two both :) )
Does anyone have a guess on how to solve this?

Up to now i tried to remove the bindings when navigating away with data-hide ( ko.cleanNode() ) but that does not help.
Setting the attr "data-bind" to "" could work but that's indiscutable.

Any help would be really great.

Application

asked on 10 Oct 2012