We are unable to display the fetched data on the KendoGrid. We are able to retreive the data from the service call and then call the datasource fetch() method to repopulate the grid, but the the grid is not displaying any data.
Please refer to the code snippet below:
------------------------------------------------------------------------------------
// AngularJS Controller
...
$scope.search = {
timeout: null,
delay: 500, //500ms
query: '',
};
....
$scope.applyFilter = function() {
if (userType == "keheemployee") {
//$scope.applyServerFilter(); //NOTE!! This line of code works with ng-repeater
//call the updateKendoDataSource function here...
updateKendoDataSource(); //NOTE!! This line of code is for the actual Grid
} else {
applyClientFilter();
}
};
// Note: Function which gets called when Filter button is clicked.
function updateKendoDataSource() {
var employeeGrid = $("#employeeGrid"); // employeeGrid id the Grid's id
var employeeGridData = employeeGrid.data("kendoGrid");
if ($scope.search.timeout) {
$timeout.cancel($scope.search.timeout);
}
$scope.search.timeout = $timeout(function () {
if ($('#searchText').val()) {
employeeGridData.dataSource.transport.read = {
url: landingPageAPIService.getSearchResultsData($('#searchText').val(), $scope.includeInactive),
type: "GET",
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false
};
employeeGridData.dataSource.fetch();
}
}, $scope.search.delay);
}
// AngularJS Service
var kVendorManagementServices = angular.module('kServices.apis.vendorManagement', ['kServices.connectApi']);
kVendorManagementServices.service('landingPageAPIService', ['Services', 'vendorManagementEnvironment', landingPageAPIService]);
return kVendorManagementServices;
function landingPageAPIService(Services, vendorManagementEnvironment) {
return {
// All the API calls go here...
getSearchResultsData: function (searchText, includeInactive) {
return Services.request("GET", vendorManagementEnvironment.apiVendorManagementServices('/api/LandingPage/Search/' + includeInactive + '/' + searchText)); //apiVendorManagementServices is created for us
}, //end getSearchResultsData function
};
}
View Template:
<div>
<input id="searchText" ng-model="searchText" />
<input id="includeInactive" type="checkbox" ng-model="includeInactive" />
<label>Include Inactive</label>
<!-- Clear Filter button -->
<input type="button" id="filterData" value="Filter" ng-click="applyFilter()" />
<input type="button" id="clear" value="Clear Filters" ng-click="clearFilters()" />
</div>
<div id="employeeGrid" kendo-grid class="col-sm-12"
k-data-source="landingPageData.Vendors"
k-options="kendo.gridOptions" class="grid">
</div>
Hi guys..
Well, my login view has some divs..almost all of them have margin/padding using "%"..
When I press some input text, the keyboard comes up and all divs are compressed..
How can I fix the view so it will not get stretched or compressed by keyboard appearances?
Regards.
André Rocha.
I have a Scheduler with a custom-created DataSource (we have to merge multiple event arrays on the client). I've defined a "remove" event on my SchedulerOptions, as well as set "editable.destroy" and "editable.confirmation" to true. When I view the Scheduler in the browser, the "X" appears on events and I'm prompted to confirm when I try to delete the events, as expected. However, when I double-click to edit an event, my (custom) editor shows Save and Cancel buttons, but no Delete button. I'm not doing anything specific to hide it that I'm aware of. Is it because the DataSource isn't set up with a specific "transport.destroy" method? I read another thread about a legit Kendo bug in which someone couldn't get the Delete button to disappear by using an "editable.destroy" value of false, and that was flagged to be fixed. Any guidance here?
I'm using v2014.3.1316.
Hi,
when i use k-ng-model to bind my value the initially set index does not work. The model variable is not defined on startup. When i change k-ng-model to ng-model the first item is selected.
Here's my code:
1.<select class="form-control" kendo-drop-down-list k-options="dropDownOptions" k-ng-delay="dropDownOptions" k-value-primitive="true" k-ng-model="dataRecord">2.</select>
01.angular.module("KendoDemos", ["kendo.directives"])02. .controller("MyCtrl", function ($scope) {03. var dataSource = [];04. dataSource.push({05. value: "1",06. text: "Januar"07. });08. 09. $scope.dropDownOptions = {10. dataSource: dataSource,11. dataTextField: "text",12. dataValueField: "value",13. index: 014. };15. })Thanks for your help.
$("#chart").kendoChart({ ..., tooltip: { visible: true, shared: true, template: "#= category # #= series.name #: #= value #" } });$("#chart").kendoChart({ ..., tooltip: { visible: true, shared: true, sharedTemplate: kendo.template($("#template").html()) template: "#= category # #= series.name #: #= value #" } });I would like to initially select the first item in a listview bound to a viewModel:
http://jsbin.com/xawemuwonu/2/
The change event fires on page load, however, how do I have the list view updated as if I had manually selected the item?
I have a model something like this derived from ObservableObject.
Please ignore the syntax as I am just quickly typing this in.
viewModel {
data: {
filter: {
Rows: [{Field: "Hello"}]
}
},
fieldChanged: function() {
}
}
I bind to the Row array items manually like this, I cannot bind to the template directly because I cannot have the template re-render the items when a change is done to the model.
var $tbody = $("table tbody", $fd);
var tmp = kendo.template($("#filtering-row-template").html());
for (var i = 0; i < this.data.filter.Rows.length; i++) {
var row = this.data.filter.Rows[i];
var $r = $(kendo.render(tmp, [row]));
$tbody.append($r);
kendo.bind($r, row);
}
<script type="text/x-kendo-template" id="filtering-row-template">
<tr id="#= uid #">
<td>
<input class="field" data-role="dropdownlist" data-text-field="Name" data-value-field="ID"
data-bind="source: fields, value: Field, events: {change: fieldChanged}" />
</td>
</tr>
</script>
​
Everything works when I do this except it does not find the fieldChanged function in the root object at runtime.I thought it was supposed to walk up the object chain looking for a match. In the Browsers debugger I can do row.parent().parent().parent().parent() and find the fieldChanged function.
I've looked around a bit but I tend to see conflicting samples. I'm trying to create my first app in AppBuilder through Visual Studio and keeping to MVVM principles but finding it difficult to know just where all of this sample code goes. The default project gives an example app.js which seems to models, but in this case, where does the view model go? Does everything go into the app.js? Creating an observable and binding doesn't seem to do anything, in this case meaning my input does not bind with the value after load.
Anyone, help, please.
Adam.g
Sample html:
<div id="view" data-role="view" data-title="Quick Search" data-layout="main"> <form id="QuickSearchForm"> <fieldset> <ul data-role="listview" data-style="inset"> <li> <label>Product Identity:</label> <input type="text" data-bind="value: product_identity" /> </li> <li> <label>Product Serial #:</label> <input type="text" /> </li> </ul> </fieldset> <div class="right-aligned-buttons"> <input type="button" value="Clear" /> <input type="button" value="Execute Search" /> </div> </form></div><script> $(document).ready(function () { var myViewModel; myViewModel = kendo.observable({ product_identity: 'Test' /*lastName: "Le", email: "lelong37@gmail.com", twitter: "twitter.com/lelong37", site: "blog.longle.net", address: "3737 Galatic Avenue", city: "Cloud City", state: "Texas", occupations: ["Please Select", "Hacker", "Jedi", "Ninja"], occupation: "Jedi", isSaved: false, isDisabled: true, edit: function (e) { this.set("isDisabled", false); }, cancel: function (e) { this.set("isDisabled", true); }, reset: function (e) { this.set("firstName", null); this.set("lastName", null); this.set("email", null); this.set("twitter", null); this.set("site", null); this.set("address", null); this.set("city", null); this.set("state", null); this.set("zip", null); this.set("occupation", "Please Select"); }, load: function (e) { LoadJohnDoesInfo(); }*/ }); kendo.bind($('#view'), myViewModel); /*function LoadJohnDoesInfo() { myViewModel.set("firstName", "John"); myViewModel.set("lastName", "Doe"); myViewModel.set("email", "jdoe@skyranch.com"); myViewModel.set("twitter", "twitter.com/jedi"); myViewModel.set("site", "starwars.com"); myViewModel.set("address", "1212 SkyRanch"); myViewModel.set("state", "California"); myViewModel.set("zip", "98000"); myViewModel.set("occupation", "Jedi"); }*/ });</script>
Sample app.js
(function () { // store a reference to the application object that will be created // later on so that we can use it if need be var app; // create an object to store the models for each view window.APP = { models: { Home: { title: 'Home' }, QuickSearch: { title: 'Quick Search' }, SearchProducts: { title: 'Search Products' }, BooleanSearch: { title: 'Boolean Search' } /*//contacts: { // title: 'Contacts', // ds: new kendo.data.DataSource({ // data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }] // }), // alert: function(e) { // alert(e.data.name); // } //}*/ } }; // this function is called by Cordova when the application is loaded by the device document.addEventListener('deviceready', function () { // hide the splash screen as soon as the app is ready. otherwise // Cordova will wait 5 very long seconds to do it for you. navigator.splashscreen.hide(); app = new kendo.mobile.Application(document.body, { // you can change the default transition (slide, zoom or fade) transition: 'slide', // comment out the following line to get a UI which matches the look // and feel of the operating system // skin: 'flat', skin: 'uniform', // the application needs to know which view to load first initial: 'views/QuickSearch.html' }); }, false);}());I have noticed a problem when using the DateTimePicker on a web page that is displayed in the .NET WebControl control. The problem I am seeing is the first time I open the calendar and I press one of the arrows on the top to navigate to the next/previous month the calendar immediately closes. If I open the calendar again the next/previous arrow buttons work correctly. This problem only occurs in the WebControl control that I am using. It does not occur in IE or any other web browser that I have tried.
Per your documentation, I added these two lines:
window.MSPointerEvent = null;
window.PointerEvent = null;
This did fix another issue I was having (a button event wasn't firing) but it did not fix the DateTimePicker issue.
Does anyone know what might be causing this and if there is a work around?
I notice strange behaviour in Google Webmaster Tools. Google crawler found some links that doesn't exists. I first though that Google doesn't handle properly my (ajax) sitemap.xml, until I notice this 404 error in Webmaster Tools:
URL:https://domerus.si/realestates/*id
The only place where string "realestates/*id" appears is in init kendo router route:
Application.router.route('/realestates/*id', function (id){ if (id) //load content and add it to the DOM Application.navigate("realestates", null, { name: id, fileName: "realestate", parameters: { ID: id } });});I already asked how can I fix this on Google support, but since I am starting to feel kendo is responsible for this, I am also posting it here.