How can I use javascript function for defining template for datepicker. Only strings are working now for templates. And if I use strings for template the corresponding function used inside the template should be global.
$("#datepicker").kendoDatePicker({
value: today,
dates: birthdays,
weekNumber: true,
month: {
// template for dates in month view
content: function (e) { alert(e);},
weekNumber: '<
a
class
=
"italic"
>#= data.weekNumber #</
a
>'
},
footer: "Today - #=kendo.toString(data, 'd') #",
});
I have a TimeSpan field called duration that is being returned from MS-Sql Server. I am trying to format that field for display in a grid as mm:ss
I've parsing it as a date for a template but that hasn't worked as I don't believe it is a date.
{
field: "duration",
title: "Duration",
template: "#= kendo.toString(kendo.parseDate(duration), 'mm:ss') #",
width: 120,
filterable: false
},
Any suggestions greatly appreciated.
Can I change the filter to be a treeview if I have a hierarchical data source for it? I've been trying but not seeing any data.If I view the source I can see the treeview and all the data but the filter doesn't show the data on the screen.
My column is defined like this:
field: "country",
headerTemplate: '<
span
title
=
"' + myTranslator.translate("
Country", "Country") + '"
data-toggle
=
"tooltip"
data-placement
=
"right"
>' + myTranslator.translate("Country", "Country") + '</
span
>',
filterable: {
ui: createCountrySelect,
extra: false,
operators: {
string: {
contains: myTranslator.translate("Contains", "Contains")
}
}
},
groupHeaderTemplate: kendo.template($("#group-row-template").html())
And the createCountrySelect:
function createCountrySelect(element) {
element.removeAttr("data-bind");
var ds = new kendo.data.HierarchicalDataSource({
data: vm.unflattedGeographicUnits,
schema: {
model: {
id: "recordID",
hasChildren: function (node) {
return (node.items && node.items.length > 0);
},
children: {
schema: {
data: "items",
model: {
id: "recordID",
hasChildren: function (node) {
return (node.items && node.items.length > 0);
}
}
}
}
}
}
});
element.kendoTreeView({
dataSource: ds,
dataTextField: "name",
change: function (e) {
var filter = { logic: "or", filters: [] };
var values = this.value();
$.each(values, function (i, v) {
filter.filters.push({ field: "geographicUnits", operator: "contains", value: v });
});
vm.countryDataSource.filter(filter);
}
});
}
I'm trying to filter my grid using multiple multiselect controls in a toolbar template. They each seem to work separately, sort of, but not completely together as I would like. I know it's just a matter of getting the filtering logic written correctly, but I've been at it for days now and can't seem to get it working 100%. The grid is running in Row filtering mode.
I want to filter multiple columns based on multiple selections.
For simplicity sake, I'll break it down like this:
I have a Species column that might contain: Kokanee, Rainbow Trout, Salmon, Steelhead, Walleye
I have an Area Type column that might contain: Freshwater Lake, River, Marine, Secret
I can get it to filter by a single species, or by a single area type, as the records in the grid can only be of one type, and have one species.
What I want to filter by looks like this: (Kokanee OR Salmon) AND (Freshwater Lake OR River)
I would want to be able to show both of those species, in either of those area types.
My Multiselects look like this:
@(Html.Kendo().MultiSelect()
.Name("areaTypeFilter")
.Placeholder("All Area Types")
.DataTextField("AreaTypeName")
.DataValueField("AreaTypeID")
.AutoBind(true)
.AutoClose(false)
.AutoWidth(true)
.Events(e => e.Change("filterChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_AreaType", "Reports");
})
)
My filtering function:
function filterChange() {
var filters = [];
var grid = $("#Grid").data("kendoGrid");
if ($("#areaTypeFilter").val()) {
$.each($("#areaTypeFilter").val(), function (key, id) {
filters.push({ field: "AreaTypeID", operator: "eq", value: id });
});
}
if ($("#stateFilter").val()) {
//filter = [];
$.each($("#stateFilter").val(), function (key, id) {
filters.push({ field: "StateID", operator: "eq", value: id });
});
}
if ($("#countyFilter").val()) {
$.each($("#countyFilter").val(), function (key, id) {
filters.push({ field: "CountyID", operator: "eq", value: id });
});
}
if ($("#speciesFilter").val()) {
//filter = [];
$.each($("#speciesFilter").val(), function (key, id) {
filters.push({ field: "SpeciesID", operator: "eq", value: id });
});
}
grid.dataSource.filter({ logic: "and", filters: filters });
}
I've tried changing the logic to OR from AND and that's definitely not the issue. Any help would be appreciated.
````
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 15
},
height:600,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSize: 15,
pageSizes: [15,30,50,'all'],
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "联系人",
width: 210
}, {
field: "ContactTitle",
title: "职位"
}, {
field: "CompanyName",
title: "公司"
}, {
field: "Country",
title: "国家",
width: 150
}]
});
```````
Hi,
Could i know if there is an slave content for disabling "arrow" ?
Regards
Hi
I have an master detail grid in Jquery but how could i force "detail" grid in initialisation step ?
Regards
In order to make an example of a real-time changing bullet chart, I hope that it's possible to bind the series data to the value of slider.
Currently I understand chart can use source binding, but I wonder if it's possible to bind one of series data of bullet chart to the value of slider (for example, the current value is bound, and target, category, color are fixed).
Take this for example:
<input data-role="slider" data-bind="value: selectNumber">
<div data-role="chart" data-series="[{ type: 'bullet', currentField: 'current', targetField: 'target', colorField: 'color', target: { color: 'black' } }]" data-bind="source: dsChart"></div>
I hope that I can only bind the current value instead of a whole data source (dsChart) to the value of slider (selectNumber).
Furthermore, I also don't know how to bind the data source (dsChart) to the value of slider (selectNumber).
Can anyone give me a hint or an example?
Thanks.