<script id="toolbar" type="text/x-kendo-template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<?php
$transport = new \Kendo\Data\DataSourceTransport();
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('index.php?type=read')
->contentType('application/json')
->type('POST');
$transport->read($read)
->parameterMap('function(data) {
return kendo.stringify(data);
}');
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)
->schema($schema);
$dropDownList = new \Kendo\UI\DropDownList('category');
$dropDownList->dataSource($dataSource)
->dataTextField('RDV')
->dataValueField('ClientID')
->autoBind(false)
->change('categoryChange')
->optionLabel('All');
echo $dropDownList->renderInTemplate();
?>
</div>
</script>
<script>
function categoryChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "ClientID", operator: "eq", value: parseInt(value) });
} else {
grid.dataSource.filter({});
}
}
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<?php
$transport = new \Kendo\Data\DataSourceTransport();
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('index.php?type=read')
->contentType('application/json')
->type('POST');
$transport->read($read)
->parameterMap('function(data) {
return kendo.stringify(data);
}');
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)
->schema($schema);
$dropDownList = new \Kendo\UI\DropDownList('category');
$dropDownList->dataSource($dataSource)
->dataTextField('RDV')
->dataValueField('ClientID')
->autoBind(false)
->change('categoryChange')
->optionLabel('All');
echo $dropDownList->renderInTemplate();
?>
</div>
</script>
<script>
function categoryChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "ClientID", operator: "eq", value: parseInt(value) });
} else {
grid.dataSource.filter({});
}
}
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>