What's the proper markup for the column titles to bind them to a variable? Basically, I'm looking to localize the column titles pulling them from a resource file. My only problem is figuring the correct markup to display the header.
<
div
id
=
"CityCodeGridView"
data-role
=
"grid"
data-bind
=
"source: gridDataSource"
data-sortable
=
"true"
data-editable
=
"true"
data-toolbar
=
'["save", "cancel"]'
data-columns='[{"field": "CityAlpha", "title": "city code" },
{"field": "CityNumeric", "title": "iata city code"},
{"field": "Description", "title": "description"},
{"field": "NextFlightEnabled", "title": "next flight enabled"},
{"command": "destroy"}]'
data-scrollable
=
"false"
>
</
div
>
<
div
id
=
"CityCodeGridView"
data-role
=
"grid"
data-bind
=
"source: gridDataSource"
data-sortable
=
"true"
data-editable
=
"true"
data-toolbar
=
'["save", "cancel"]'
data-columns='[{"field": "CityAlpha", "title": userMsgs.CityCode },
{"field": "CityNumeric", "title": userMsgs.IataCityCode},
{"field": "Description", "title": userMsgs.Description},
{"field": "NextFlightEnabled", "title": userMsgs.NextFlightEnabled},
{"command": "destroy"}]'
data-scrollable
=
"false"
>
</
div
>
var cityCodesModel = {
id: "CityAlpha",
fields: {
CityAlpha: {
type: "string",
validation: {
required: { message: "city alpha code is required" },
cityAlphacheckLength: function (input) {
input.attr("data-cityAlphacheckLength-msg", "a city alpha code must be 3 characters");
var ret = true;
if (input.is("[name=CityAlpha]")) {
ret = input.val().length == 3;
}
return ret;
}
}
},
CityNumeric: {
type: "string",
validation: {
required: { message: "city numeric code code is required" },
cityNumericCheckLength: function (input) {
input.attr("data-cityNumericCheckLength-msg", "a city numeric code must be 4 characters");
var ret = true;
if (input.is("[name=CityNumeric]")) {
ret = input.val().length == 4;
}
return ret;
},
cityNumericIsNumeric: function (input) {
input.attr("data-cityNumericIsNumeric-msg", "a city numeric code must be numeric");
var ret = true;
if (input.is("[name=CityNumeric]")) {
ret = !isNaN(input.val());
}
return ret;
}
}
},
Description: { type: "string",
validation: {
required: false,
descriptionCheckLength: function (input) {
input.attr("data-descriptionCheckLength-msg", "a description cannot be longer than 80 characters");
var ret = true;
if (input.is("[name=Description]")) {
ret = input.val().length <= 80;
}
return ret;
}
}
},
NextFlightEnabled: { type: "boolean" }
}
};
$("#DivProductGroupDetailsTable").data("kendoGrid").dataSource.filter({ logic: "or", filters: [ { field: "Name", operator: "contains", value: pSearchValue }, { field: "DataMatchKey", operator: "contains", value: pSearchValue } ] }); but i am getting following error: ":"Query parameter '$filter' is specified, but it should be specified exactly once." Please advise. Thank you in advance. regards, Shankar
var
custData = {
"columns"
: [
{
"field"
:
"ID"
,
"title"
:
"ID"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Last"
,
"title"
:
"Last"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Middle"
,
"title"
:
"Middle"
,
"filterable"
:
true
,
"width"
: 12 },
{
"field"
:
"First"
,
"title"
:
"First"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Role"
,
"title"
:
"Role"
,
"filterable"
:
true
,
"width"
: 1 },
{
"field"
:
"Rank"
,
"title"
:
"Rank"
,
"filterable"
:
true
,
"width"
: 1 }
],
"data"
: [
/* Lots of data here, organized like so: */
{
"ID"
:
"00011"
,
"Last"
:
"Picard"
,
"Middle"
:
""
,
"First"
:
"Jean Luc"
,
"Role"
:
"Commanding Officer"
,
"Rank"
:
"Captain"
}
]
};
var
custDataSource =
new
kendo.data.DataSource({
pageSize: 10,
data: custData[
"data"
]
});
$(
"#customers"
).kendoGrid({
height: 600,
width: 800,
columns: custData[
"columns"
],
dataSource: custDataSource,
groupable:
true
,
scrollable:
false
,
sortable: {
mode:
"multiple"
,
allowUnsort:
true
},
pageable:
true
,
selectable:
"multiple row"
,
nagivatable:
true
,
toolbar: [
{ name:
"create"
, text:
"New"
},
{ name:
"save"
, text:
"Save"
},
{ name:
"cancel"
, text:
"Cancel"
},
{ name:
"destroy"
, text:
"Delete"
}
],
editable: {
update:
true
,
destroy:
false
,
confirmation:
"Are you sure you want to remove this item?"
}
});
$("#DivProductGroupDetailsTable").data("kendoGrid").dataSource.filter({ logic: "or", filters: [ { field: "Name", operator: "contains", value: pSearchValue }, { field: "DataMatchKey", operator: "contains", value: pSearchValue } ] }); but i am getting following error: ":"Query parameter '$filter' is specified, but it should be specified exactly once." Please advise. Thank you in advance. regards, Shankar