Questions on Kendo UI for jQuery Forum

6 answers

312 views

Configure AJAX data source to use proper javascript naming convention

I am using Kendo UI Grid, using MVC helpers, and I see that JavaScript that gets generated assumes that JSON coming back from server will have property names with capitalized first letter (e.g. "Items" not "items"). Generated "schema" definition also uses names as they appear in C# class (i.e. first letter is capitalized). Also Data, Total and Error properties in the returned JSON (at the top level) are expected to start with capital letter.

Rest of my application uses proper javascript naming convention (i.e. camel case with lower first character).

Is there a way to configure MVC Helpers to output javascript that would conform to proper javascript naming convention? I have configured JSON serialization at the root of my application, and would rather not change my naming convention just to conform to Telerik's way.

General Discussions

answered on 02 Oct 2012

0 answers

230 views

serverGrouping cannot load

hello

i tried to use serverGrouping, but i still got this error

error: Uncaught TypeError: Cannot read property 'length' of undefined
here is my json.

{"data":[{"Key":"Azure Getting Started","HasSubgroups":false,"Items":[{"Name":"Azure Getting Started","Price":540.00,"Self":"api/books/3","Id":3},{"Name":"Azure Getting Started","Price":150.00,"Self":"api/books/5","Id":5}],"Aggregates":{"Price":{"Sum":690.00,"Min":150.00,"Max":540.00},"Name":{"Count":2}},"Subgroups":[]},{"Key":"Entity FrameWork","HasSubgroups":false,"Items":[{"Name":"Entity FrameWork","Price":350.00,"Self":"api/books/2","Id":2}],"Aggregates":{"Price":{"Sum":350.00,"Min":350.00,"Max":350.00},"Name":{"Count":1}},"Subgroups":[]}],"total":5,"aggregates":{"Price":{"Sum":1810.00,"Min":150.00,"Max":550.00},"Name":{"Count":5}}}

full code in html

var grid = $("#ordersGrid").kendoGrid({

// specify the columns on the grid

toolbar: ["create"],

columns: [

{ field: "Name", title: "Name", width: "100px" },

{ field: "Price", title: "Price", width: "100px", aggregates: ["Min", "Max", "Sum"], footerTemplate: "Sum:#=Sum# Min:#=Min# Max:#=Max#", groupFooterTemplate: "Sum: " },

{ command: ["edit", "destroy"], title: " ", width: "210px" }

],

// the datasource for the grid

dataSource: new kendo.data.DataSource({

// the transport tells the datasource what endpoints

// to use for CRUD actions

transport: {

read: {

url: "/apibook/readget",

type: "POST"

},

update: {

url: "/apibook/update",

type: "POST"

},

destroy: {

url: "/apibook/destroy",

type: "POST"

},

create: {

url: "/apibook/create",

type: "POST"

},

parameterMap: function (options, operation) {

if (operation != "read") {

var result = {};

for (var i = 0; i < options.models.length; i++) {

var book = options.models[i];

debugger;

for (var member in book) {

result["books[" + i + "]." + member] = book[member];

}

return result;

}

if (operation == "read") {

var result = {};

result["take"] = options.take;

result["skip"] = options.skip;

result["page"] = options.page;

if (options.sort != null) {

for (var i = 0; i < options.sort.length; i++) {

result["sort[" + i + "]." + "dir"] = options.sort[i].dir;

result["sort[" + i + "]." + "field"] = options.sort[i].field;

}

if (options.aggregate != null) {

var aggregates = "";

debugger;

for (var i = 0; i < options.aggregate.length; i++) {

if (aggregates == "") {

aggregates = options.aggregate[i].field + "-" + options.aggregate[i].aggregate;

}

else

aggregates += "~" + options.aggregate[i].field + "-" + options.aggregate[i].aggregate;

}

result["aggregates"] = aggregates;

//for (var i = 0; i < options.aggregate.length; i++) {

// result["aggregate[" + i + "]." + "aggregate"] = options.aggregate[i].aggregate;

// result["aggregate[" + i + "]." + "field"] = options.aggregate[i].field;

//}

}

result["groupBy"] = "Name-asc";

if (options.filter != null) {

var filter = options.filter;

if (filter.filters != null) {

for (var i = 0; i < filter.filters.length; i++) {

result["filter[" + i + "].field"] = filter.filters[i].field;

result["filter[" + i + "].op"] = filter.filters[i].operator;

result["filter[" + i + "].value"] = filter.filters[i].value;

}

return result;

}

},

group: {

field: "Name",

aggregates: [

{ field: "Price", aggregate: "sum" },

{ field: "Price", aggregate: "min" },

{ field: "Price", aggregate: "max" },

]

},

aggregate: [

{ field: "Price", aggregate: "sum" },

{ field: "Price", aggregate: "min" },

{ field: "Price", aggregate: "max" },

{ field: "Name", aggregate: "count" }],

// the schema defines the schema of the JSON coming

// back from the server so the datasource can parse it

schema: {

// the array of repeating data elements (employees)

data: function (response) {

debugger;

//return response.Data.Items;

return response.data;

},

groups: function (response) {

debugger;

//return response.Data.Items;

return response.data;

},

aggregates: function (response) {

if (response.aggregates != null)

return response.aggregates;

else

return {};

},

model: {

id: "Id",

fields: {

// specify all the model fields, along with validation rules and whether or

// not they can be edited or nulled out.

Id: { editable: false, nullable: true },

Name: { editable: true },

Price: { editable: true, nullable: false, validation: { required: true } },

}

},

// the total count of records in the whole dataset. used

// for paging.

total: "Count",

},

// the number of records to show per page

pageSize: 3,

// do paging on the server

serverPaging: true,

// do sorting on the server

serverSorting: true,

serverAggregates: true,

serverGrouping:true,

batch: true

}),

// paging is enabled in the grid

pageable: true,

// editing happens inline, one row at a time.

editable: "popup",

selectable: true,

// sort by multiple columns

sortable: {

mode: "multiple"

},

change: function (e) {

// get the current item selected in the grid

var employee = this.dataSource.getByUid(this.select().data("uid"));

// write out the employee id

console.log(employee.id);

}

}).data("kendoGrid");

can someone help me how solve this error?
maybe the problem is schema

thank you

Grid

asked on 02 Oct 2012

1 answer

593 views

Grid Grouping - Collapse / Expand Not Working

Hi,
I'm working with Kendo grid with data grouping. But the collapse/expand button not working at all and the triangle shape different from the demo sample.
I suspect that something wrong with the css or .js file, but have no idea which one is.
This is how I define them in my layout :

<link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.gif")" type="image/x-icon" />

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/css/global.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/corners.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/menu.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

and this is how my grid code :

@(Html.Kendo().Grid<WANDA.ViewLookupStaffTag>()

.Name("StaffTagGrid")

.BindTo((IEnumerable<WANDA.ViewLookupStaffTag>)ViewBag.StaffTag)

.Columns(columns =>

{

columns.Bound(p => p.StaffTagDesc).Title("Description");

columns.Bound(p => p.StaffTagCategoryDesc).GroupHeaderTemplate(

@<text>

Tag Category : @item.Key

</text>);

columns.Bound(p => p.StaffTagStatus).EditorTemplateName("StaffTagStatusDDL").Width(140).Title("Status");

columns.Command(command => { command.Edit(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Server()

.Group(groups => groups.Add(p => p.StaffTagCategoryDesc))

.Sort(sort => sort.Add(p=>p.StaffTagDesc))

.Model(model => model.Id(p => p.StaffTagID))

.Create(create => create.Action("StaffTag_Create", "Setup"))

.Read(read => read.Action("StaffTag", "Setup"))

.Update(update => update.Action("StaffTag_Update", "Setup"))

.Destroy(delete => delete.Action("StaffTag_Destroy", "Setup")))

.RowAction(

row =>

{

if (row.DataItem.StaffTagStatus == "Inactive")

{

row.HtmlAttributes["class"] = "inactive-status";

}

})

.Pageable(pager => pager.PageSizes(true))

.Sortable()

.Filterable()

.DataSource(data => data.Server().PageSize(100)))

Help pleaseee.

Grid

answered on 02 Oct 2012

0 answers

139 views

How to add row to group in Data Grid?

I have a data grouped by a column with summations in a footer template. When I add the "create" command to the grid column nothing happens. How do you add a new row that's part of a group?

Data Source

asked on 01 Oct 2012

2 answers

257 views

Incell editing doesn't work

Hello,
I appreciate any help.
We are using 2012.2.723.
Just found sample and pasted into my project; still having the same error what I have in my code:
Uncaught Error: Syntax error, unrecognized expression: tr:not(.k-grouping-row) > td:not(.k-hierarchy-cell,.k-detail-cell,.k-group-cell,.k-edit-cell,:has(a.k-grid-delete))
Is it a wrong version?

This is sample from forum just selects row and gives an error above:
<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 30,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
selectable: "multiple",
pageable: true,
height: 400,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 150 },
{ field: "UnitsInStock", title: "Units In Stock", width: 150 },
{ field: "Discontinued", width: 100 },
{ command: "destroy", title: " ", width: 110}],
editable: true
});
});
</script>

Thanks in advance

Jelena

Grid

answered on 01 Oct 2012

3 answers

104 views

Newbie Grid binding question.

Hello

Firstly, excuse any errors in the code. JQuery is new to me.

The data is coming back from the server in Json(result). Now I need to bind it to the grid (and obviously the way I am trying to do it is not working). Do I need to specify a schema for the dataSource? Can this not be "read" from the Json data?

Grid

answered on 01 Oct 2012

4 answers

260 views

Menus not Fully Closing in Chrome

Hello,

I've been running into an issue where menus (those on grids and otherwise) are not fully closing or opening. This happens maybe every 5th click. It is only seen on the Chrome browser, right now, but it really looks like a problem. I am using the lastest release of kendo.web (2012.2.710) and have tried several different styles.

Oddly, the demos on the site look fine, but as soon as I do the exact same thing on my site, the menu issue appears.

I must be doing something wrong, but what could it be. I am out of options to troubleshoot.

Thanks a ton in advance,

Zach

Grid

answered on 01 Oct 2012

4 answers

137 views

Changing column orders of the grids

Hi,

I have a kendo grid, and it's column definition is like this:

ColDef = [{
    field: "apple"
}, {
    field: "banana"
}, {
    field: "orange"
}, {
    field: "papaya"
}, {
    field: "grapes"
}];

Now, depending on certain conditions, i need to change the order of these columns. If the user selects "orange" from a drop down, i want that column to appear first and then the other columns. How can i achieve such functionality? please help.

Regards,
Khushali

Grid

answered on 01 Oct 2012

2 answers

131 views

visual artefact in chrome? (not IE)

Hi, I've just started with KendoUI and I'm stuck already!

I created this simple page and it works fine in IE9, but in Chrome I have some strange artefacts like blurry text or wrong positioning of the button or leftovers like this screenshot

any ideas? thanks

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="Scripts/jquery.min.js" type="text/javascript"></script>

<script src="Scripts/kendo.web.min.js" type="text/javascript"></script>

<link href="Content/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="Content/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

<input id="datetimepicker" value="10/10/2011 12:00 AM" style="width:200px;" />

<script>

$(document).ready(function () {

// create DateTimePicker from input HTML element

$("#datetimepicker").kendoDateTimePicker();

});

</script>

</body>

</html>

General Discussions

answered on 01 Oct 2012

1 answer

137 views

How to add Data field to load from server?

I'm trying to get a HierarchicalDataSource from my server, but I need to pass in specific values. I can't figure out how it's done and have tried following DataSource's documentation.

It breaks when it tries the .read(). When I specify "read" it says "TypeError: Illegal invocation ", when I specify "create" it says "Cannot read property 'data' of undefined ".

I'm currently doing:

    var param1= ...;
   var param2 = ...;

       var dataSource = new kendo.data.HierarchicalDataSource({
           transport: {
               read: {
                   url: "/Home/GetStuff",
                   dataType: "json",
                   data: { param1: param1, param2: param2 }
               }
           },
           schema: {
               model: { id: "id", hasChildren: "hasChildren", children: "items" }
           }
       });

       dataSource.read();

My server method is public ActionResult GetStuff(Guid param1, Guid param2)

As per DataSource's docs, I tried using "create", as well as trying create: function(options) {... .ajax... }.

Hierarchical Data Source

answered on 01 Oct 2012