I am using kendo UI grid with angular js, have filled the grid with
angular. I have a dropdown in the header template on change event of the
dropdown i need to bind the grid again with the dropdown filter how can i
achieve this.
for binding the grid i have used angular factory.
Following is the controller
var recnfController = function ($scope, IRSService, bookingDataSource) {
$scope.bookingType = {
transport: {
read: {
url: 'Booking/BookingTypeList',
contentType: "application/json",
type: "GET"
}
}
};
$scope.bookingStatus = {
transport: {
read: {
url: 'Booking/BookingStatusList',
contentType: "application/json",
type: "GET"
}
}
};
$scope.change = function (e) {
var dataItem = e.sender._selectedValue;
var selectedText = e.sender.text();
var value = e.sender.value();
alert(e.sender.text());
$scope.mainGridOptions = bookingDataSource;
console.log(e);
}
$scope.mainGridOptions = bookingDataSource;
}
app.controller('recnfController', ['$scope', 'IRSService',
'bookingDataSource', recnfController]);
Following is the HTML part
<div ng-controller="recnfController">
<div kendo-grid k-options="mainGridOptions"></div>
<input type="text" ng-model="showName" />
<script type="text/x-kendo-template" id="template">
<div class="toolbar" ng-controller="recnfController">
<div class="row">
<div class="col-sm-6">
<label class="category-label" for="category">Booking
Type:</label>
<select kendo-drop-down-list
k-placeholder="'Select Booking Type'"
k-data-text-field="'Text'"
k-data-value-field="'Value'" k-on-change=
"change(kendoEvent)"
k-data-source="bookingType"></select>
</div>
<div class="col-sm-6">
<label class="category-label" for="category">Booking
Status:</label>
<select kendo-drop-down-list
k-placeholder="'Select Booking Status'"
k-data-text-field="'Text'"
k-data-value-field="'Value'"
k-data-source="bookingStatus"></select>
</div>
</div>
</div>
</script>
</div>
I need to bind the grid again on change event of dropdown, also how i can
send the parameters.
Following is the factory used;
IRSapp.factory('bookingDataSource',['IRSService',
function (IRSService) {
var ServiceBaseUrl = "/Booking/ReconfirmList";
var bookingList = {
height: 400,
columns: [
{ field: "BookingRefNo", title: "Booking RefNo", width:
"120px" },
{ field: "CityName", title: "City Name", width: "120px" },
{ field: "BookingDateFrom", title: "BookingDate From", width:
"120px" },
{ field: "FirstName", width: "120px" },
{ field: "CustomerEmail", width: "120px" },
{ field: "BookingType", width: "120px" }
],
editable: false, // enable editing
pageable: {
numeric: true,
refresh: true,
pageSizes: [10, 25, 50, 100],
buttonCount: 5
},
sortable: true,
filterable: true,
selectable: true,
toolbar: kendo.template($("#template").html()),
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
schema: {
data: "Data",
total: "Total"
},
type: "aspnetmvc-ajax",
transport: {
read: {
url: ServiceBaseUrl, //specify the URL which should
return the records.
contentType: "application/json",
type: "GET"
data: {
AdditionalParam: JSON.stringify(IRSService)
}
}
}
}
};
return bookingList;
}]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
