Questions on Kendo UI for jQuery Forum

1 answer

131 views

Hi ,
I have a problem using populating the grid with local data upon successful $http.get() request.
Here is the example:
http://dojo.telerik.com/EREfa
Can you elaborate why it's not working?
thanks.

Grid

answered on 17 Sep 2014

4 answers

569 views

After adding a new record the grid shows still 0 as ID although the webservice returns the correct ID (OData)

I'm using the Kendo UI Grid with ASP.NET MVC, Entity Framework and OData.
My grid shows the record ID in a column - so far so good.

When I click on "Add new record" in the toolbar, the ID column shows me a 0 - that makes sense for me (the new record is being edited and has no ID).
But after I click on the "Update" button it doesn't change to the correct ID (which has been returned with the JSON object by the service):

{

"odata.metadata":"http://localhost:61534/api/$metadata#AssetList/@Element",

"ID":17,

"ManufacturerName":"TEST",

"Name":"TEST",

"SerialNumber":"TEST",

"AssetStateID":1,

"AssetStateName":"TEST",

"NextCalibration":"2013-07-11T09:08:28.298Z"

}

Here's my webservice (post method):

public override HttpResponseMessage Post(AssetListViewModel item)

{

// #### MG: CREATE ASSET

RSAMS.WebUI.Models.Asset asset = new Asset();

asset.Manufacturer = item.ManufacturerName;

asset.Name = item.Name;

asset.SerialNumber = item.SerialNumber;

asset.AssetStateID = 1; // IN USE

asset.NextCalibration = item.NextCalibration;

db.Asset.Add(asset);

db.SaveChanges();

// #### MG: RESPONSE

item.ID = asset.ID;

item.AssetStateID = asset.AssetStateID;

var response = Request.CreateResponse<AssetListViewModel>(HttpStatusCode.Created, item);

response.Headers.Location = new Uri(Url.Link("OData", new { id = item.ID }));

return response;

}

When I refresh the page/browser the correct ID is shown in the grid.

Here's my JavaScript code:

$("#grid").kendoGrid({

toolbar: ["create"],

editable: "popup",

sortable: true,

filterable: false,

groupable: false,

scrollable: false,

resizable: false,

pageable: {

pageSizes: [10, 25, 50, 200, 1000]

},

dataSource: {

type: "odata",

pageSize: 25,

serverSorting: true,

serverPaging: true,

transport: {

create: {

url: "/api/AssetList",

dataType: "json"

},

read: {

url: "/api/AssetList",

dataType: "json"

},

update: {

url: "/api/AssetList",

dataType: "json"

},

destroy: {

url: function (data) {

return "/api/AssetList([RW-PARAM])".replace("[RW-PARAM]", data.ID);

},

dataType: "json"

}

},

schema: {

data: function (data) {

return data.value;

},

total: function (data) {

return data["odata.count"];

},

model: {

id: "ID",

fields: {

ID: { type: "number", editable: false, nullable: false },

ManufacturerName: { validation: { required: false } },

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

SerialNumber: { validation: { required: true } },

AssetStateName: { nullable: false, validation: { required: true } },

NextCalibration: { type: "date" }

}

},

change: function (e) {

//console.log("CHANGE HERE");

}

},

columns: [

{

field: "CheckBox",

width: 34,

title: " ",

sortable: false,

template: "<input type=\"checkbox\" id=\"#= ID #\" class=\"checkbox-item\" />",

headerTemplate: "<input type=\"checkbox\" id=\"grid-checkbox-select-all\" />"

},

{

field: "ID",

width: 60,

title: "ID",

template: "<a href=\"javascript:\">#= ID #</a>"

},

{

field: "ManufacturerName",

width: 150,

title: "Manufacturer"

},

{

field: "Name",

//width: 100,

title: "Name"

},

{

field: "SerialNumber",

width: 115,

title: "Serial Number"

},

{

field: "AssetStateName",

width: 90,

title: "State"

},

{

field: "NextCalibration",

width: 85,

title: "Next Cal.",

format: "{0:yyyy-MM-dd}"

},

{

width: 230,

title: " ",

sortable: false,

command: [

{

text: "Details",

click: app.grid.showItemDetails

},

{

text: "Edit",

click: app.grid.editItem

},

{

name: "destroy",

text: "Delete",

click: app.grid.deleteItem

}

]

}

],

edit: function (e) {

e.container.find("label[for=CheckBox]").parent().hide().next().hide();

e.container.find("label[for=ID]").parent().hide().next().hide();

}

});

Please help.

Thanks,
miro

Grid

answered on 17 Sep 2014

1 answer

538 views

Possible to prevent keyboard selection of dropdownlist values?

Hi,

I would like to prevent the user from changing the selected value of a dropdown list unless the shift key is pressed along with the arrow. Although I can hook a function to the keydown event of the .k-dropdown.k-widget this function is only called after the value has already been changed by the keydown event.

Is there a way to prevent this behaviour or get kendo to call my function earlier?

Regards

DropDownList

answered on 17 Sep 2014

1 answer

117 views

_oldIndex same as _selectedIndex

Hi,

I have a function attached to the change event of a dropdown list yet when I am selecting a different option and my function is being called the old and selected values of the sender property are the same.

Regards

DropDownList

answered on 17 Sep 2014

1 answer

390 views

Angular directive: access kendo widget instance

Hi all,

I'm trying to access the instance of a kendo ui widget from within an angular directive.
To do so, I'm using kendo's widgetInstance function.
However, in angular's link function, the widget is not yet created (line 3).

1.link: (scope:, element, attrs) =>{

2. // widget is undefined

3. var widget = kendo.widgetInstance(element, kendo.dataviz.ui);

4. scope.$on('kendoWidgetCreated', (r, t) =>{

5. // widget is defined, how to check that widget2 === element?

6. var widget2 = <kendo.dataviz.ui.Chart>kendo.widgetInstance(element, kendo.dataviz.ui);

7. });

8.}

I've read about the kendoWidgetCreated event; when using this, there are 2 issues (line 7):

the event is fired for every widget that is created within the scope; how to check that element === widget without depending on id's?
when using an isolated scope , the event is not fired on this isolated scope

Is there a better way to access the widget instance from within a directive?

Thanks for your time,
Koen

General Discussions

answered on 17 Sep 2014

3 answers

219 views

[Solved] FIXED 0's inside mask

I'd like to have a kind of mask '___.___.___/0001-__', there is some escape caracter to consider 0 as fixed and not numeric.

Thanks

MaskedTextBox

answered on 17 Sep 2014

3 answers

133 views

Grid page dropdown shows twice with adaptive rendering

Hello,

I have the mobile _layout.cshtml page with jquery.mobile css file along with kendo css. The kendo dropdown is displayed properly without any problem but when i display grid the page dropdown is shown twice once with normal kendo theme and a blue one below it similar to jquery mobile dropdown with blue rounded border. How can i handle this. Attached an image showing the problem . If i place a kendo dropdown in the page it has no such problem , can i use some stylesheet on page to overcome this?

Anamika

Grid

answered on 17 Sep 2014

1 answer

164 views

Performance using complex object in template

Hi, I have a complex object with 3 level hierarchy like

sections: { uiFieldSection1: { fields: [] }, uiFieldSection2: { fields: [] }, uiFieldSection3: { fields: [] }, uiFieldSection4: { fields: [] } },

having multiple sections in section object and each section is having fields object which has 6 properties. The data I get is from a Json response.
I am using template for my UI.

<div class="modal-body vam-pLR" id="buildingContent" data-template="businessEntityTemplate" data-bind="source: uiFieldSection1">

</div>

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

<table class="table">

#var columnCount = 3;

for(var i=0; i< fields.length; i++){#

<tr><td>

<input data-role='dropdownlist' id="#:fields[i].name#" data-option-label="Select" data-bind="source:fields[#:i#].values,events:{change:ddlOnChanged},value:fields[#:i#].defaultvalue" name="#:fields[i].id#" />

</td></tr>

#}#

Now my issue is I have around 100 fields in each section, after loading all the sections in UI, it is taking around 4 to 5 seconds to fire the change event and to select an item from dropdownlist.
What I observed it is taking time for value binding. If I remove the value binding things are normal.

Can someone provide me the solution for this.
Thanks

Templates

answered on 17 Sep 2014

1 answer

678 views

Show and hide value from Multiple dropdown list

Hi ,

I am new in using kendo ui

i have 3 dropdown list in that same observable values are binding in all 3 list, in change event of each dropdown list i have to remove the item from another two dropdown list same way suppose i select item from 2nd dropdown selected item will remove from 1st and 3rd, suppose again selecting different item from list those values are added to the remain dropdown list how can i achieve this.

Thanks

DropDownList

answered on 17 Sep 2014

1 answer

195 views

Insert in DB Issue, using OData and Kendo Grid.

Hello,

I'm using a Kendo Grid with a datasource using type Odata.
I have troubles creating a new row in the database from the datasource.
This is my datasource code:

var ds = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: baseUrl,

dataType: "json"

},

update: {

url: function (data) {

return baseUrl + "('" + data.ID_Agenzia + "')";

}

},

create: {

url: baseUrl

},

destroy: {

url: function (data) {

return baseUrl + "('" + data.ID_Agenzia + "')";

}

},

schema: {

model: {

id: "ID_Agenzia",

fields: {

ID_Agenzia: { type: "string" },

// etc... my other fields omitted for brevity.

}

},

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

Then I tried a simple grid with the automatic toolbar Create (pretty standard, I think I can omit the code), using this DS.

As far as I understood, Kendo got a method "isNew" to discern between Create/Update and it checks if the ID is === to the default value.
All the examples I found googling around, were using the ID as a numeric incremental value... But in my table the ID is a String (obviously unique) that needs to be inserted by the user!!

Hoping I've explained myself well, the issue should be clear: If the user inserts the ID, the datasource won't recognize that it's a Create operation...
Otherwise if I forbit the manual ID insert, the create will work... but the row will be inserted in the DB with the default value (empty string) and this is wrong!

How can I solve this?
Thanks.

Data Source

answered on 17 Sep 2014