Questions on Kendo UI for jQuery Forum

0 answers

203 views

Grid column binding with custom editor

How can i bind a custom editor to my grid

<div id="grid" data-role="grid" data-bind="source: gridDataSource" data-editable="inline" data-columns='[

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

{ "field": "title", "width": "100px", "editor": "titleEditor"},

{ "field": "year", "width": "100px" }

]'>

</div>

I want that the titleEditor will be shown

function titleEditor(container, options) {

var inputField = $('<input data-text-field="title" data-value-field="title" data-bind="value:' + options.field + '"/>');

var button = $('<span unselectable="on" class="k-icon k-i-search">select</span>');

button.click(function(e) {

lookupdialog.dialog({

});

inputField.after(button);

inputField.appendTo(container);

};

See my jsfiddle

Thanks

MVVM

asked on 02 Oct 2012

5 answers

174 views

Filter wcf service by date?

Trying to filter a WCF service by date. I can filter via a grid/gui, and I can setup default filters for every other column/field. I just can't seem to get the date to work. The error I get back is........... "value":"Operator 'eq' incompatible with operand types 'Edm.DateTime' and 'Edm.String' Data format from the WCF is as follows... "EFFECTIVE_DATE":"\/Date(1065657600000)\/",

One perplexing thing is that if I add the following, it filters by the top parameter, and the grid actually looks like it wants to filter by date. If I click on the filter next to "EFFECTIVE DATE" is actually HAS the correct date and operator all filled in. Clicking on "filter" then makes it filter perfectly. So why won't it just filter it to begin with like every other type of field?

filter: [

{ field: "SYMBOL", operator: "eq", value: "NLP"},

{ field: "EFFECTIVE_DATE", operator: "eq", value:"\/Date(1065657600000)\/"

],

More to the example....

<script>

$(document).ready(function () {

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

dataSource: {

type: "odata",

transport: {

read: "http://someURL/Data.svc/Policies",

// dataType: "json",

},

filter: [{

field: "SYMBOL",

operator: "eq",

value: "NLP"

}, {

field: "EFFECTIVE_DATE",

operator: "eq",

value: "\/Date(1065657600000)\/"

}],

schema: {

model: {

fields: {

SYMBOL: {

type: "string"

},

FIRM_NAME: {

type: "string"

},

EFFECTIVE_DATE: {

type: "date"

},

PolicyStatusID: {

type: "string"

},

}

},

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 350,

filterable: true,

sortable: true,

pageable: true,

columns: [{

field: "FIRM_NAME",

}, {

format: "{0:MM/dd/yyyy}",

field: "EFFECTIVE_DATE",

title: "EFFECTIVE_DATE",

// template: '#= kendo.toString(EFFECTIVE_DATE, "MM/dd/yyyy") #'

}, {

field: "PolicyStatusID",

}, {

field: "SYMBOL",

}, ]

});

</script>

Data Source

answered on 02 Oct 2012

2 answers

574 views

please don't validate disabled fields

i put together a little example: http://jsfiddle.net/vgBbP/1/

the "normal" html5 form validation only validates non-disabled input-fields - which i think makes sense.
kendo on the other hand ignores the "disabled" attribute :(

if you could implement the expected html5 validation functionality that would be great. thanks.

Validation

answered on 02 Oct 2012

0 answers

112 views

kendoanimation effects

Hi,
I am evaluating Kendo UI and I'd appreciate if you can help me answer whether the following is doable or not.

I am using the splitview and defining a toggle menu on the side-pane
and I'd like to create a cool sliding effect when it slides out and slides in while toggling.
I've tried setting the duration, but that doesn't help.
How do I slide it slowly and create the effect that it is pushing the main-pane when the toggle menu comes out
and reverse the effect when it slides in?

Here is the code that I have now and it just doesn't have any effect. It simply hides and shows the side-pane.

$('#toggleMenu').click(function() {

if ($('#menuPane').is(':visible')) {

$("#menuPane").kendoAnimate({ hide: true, effects: "slideOut:left"});

} else {

$("#menuPane").kendoAnimate({ show: true, effects: "slideIn:left"});

}

});

Please let me know.
Thanks.

B.Manohar

General Discussions

asked on 02 Oct 2012

6 answers

303 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

224 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

584 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

135 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

248 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

99 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