$scope.AnomalyGrid = {
dataSource: new kendo.data.DataSource({
//data: AnomaliesList,
transport: {
read: {
url: logstar.url(getAnomalyItemUrl + '?id=' + id),
dataType: "json",
},
update: {
url: logstar.url(UpdateAnomalyItemUrl),
type: "POST",
dataType: "json"
This will update the value in server after that i want to refresh kendo grid or call read method of kendo grid. In the responce i am sending updated model .
................... Is there Any success function available after responce in kendo grid.
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10,
autoSync: true,
batch: true,
schema: {
model: {
id: "CallID",
fields: {
equiptmentno: { editable: false, nullable: true },
currentposition: { validation: { required: true } },
isocode: { validation: { required: true } }
}
}
}
}),
columns: [
{ field: "equiptmentno", title: "Equiptment No" },
{ field: "currentposition", title: "currentposition" },
{ field: "isocode", title: "isocode" }
{ command: ["edit"] }
],
editable: {
mode: "popup",
}
};
update: { url: logstar.url(UpdateAnomalyItemUrl),
type: "POST",
dataType: "json",
complete: function (e) {
var gridEl = angular.element('#AnomalyGrid');
gridEl.data('kendoGrid').dataSource.read();
gridEl.data('kendoGrid').refresh();
}
}
It works responce come at complete segment of code
Related
I want use my api in angular js by kendo,but it error me.
my code is:
scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: {
dataType: "json",
headers: {
"accept": "application/json; odata=verbose",
"Authorization": ""
},
url: "http://localhost:35143/api/" + "Kiosks?isActive=false"
}
},
sort: {
field: "CreationTime",
dir: "desc"
},
schema: {
data: 'results',
total: 'count',
model: {
Id: "Id",
fields: {
Id: { type: "number" },
MobileNumber: { type: "number" },
CreationTime: {},
Description: {},
OrderStatus: { type: "int" },
IsConvertToArea: { type: "boolean" },
Customer: {
Id: {},
FirstName: {},
LastName: {},
EmailAddress: {},
IsActive: { type: "boolean" },
UserId: {}
}
}
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
};
my error in console web browser is:
http://localhost:35143/api/Kiosks?isActive=false&%24inlinecount=allpages&%24top=5&%24orderby=CreationTime%20desc
%24 %20 is extra,how i fix it?
These two are encoded characters. %24 means $ and %20 indicates space.
ASCII Encoding Reference
Check why it is appending $ character in request parameter in your kendo grid datasource definition.
You can decode these characters by using decodeURIComponent() in javascript.
The problem I'm having is exactly what I said in the title. When I step through my application in the debugger it properly sets everything that needs to be set, but when I just let it go through on its own, it never loads data on the initial attempt, but if i go back and click the same thing again, or any thing else that has to send data to this grid, it will forever work. Even if I go to a page that empties everything in the grid and then go back to one that shows data again.
To me it sounds like a timing issue, but using $timeout() before the data calls doesn't seem to be working. And I set up a broadcast that should only be called after all the data is pulled in and set, and only then should it go to the code for the kendo grid and start painting it on the page.
Like I said stepping through this code line by line on the initial load of the page, it works exactly as it should and pulls in all data that it needs, but letting it just run without me doing that, it never does.
here is hopefully enough code to go off of.
Here is the code for my grid:
$scope.$on('loadRxHistoryGrids', function () {
console.log('user id of ' + pServ.patientId.get());
$scope.activeHistoryGrid = {
pageable: {
pageSizes: [5, 10, 15, 20],
},
dataSource: new kendo.data.DataSource({
type: 'aspnetmvc-ajax',
contentType: "application/json; charset=utf-8",
transport: {
read: {
url: function () {
var x = pServ.patientId.get();
return "api/rx/ActiveRxHistory/" + pServ.patientId.get();
},
dataType: "json",
type: "POST"
},
},
pageSize: 5,
schema: {
model: {
fields: {
rxId: { type: "number" },
refillsLeft: { type: "number" },
shortName: { type: "string" },
unitsRemaining: { type: "number" },
dispenseRefillQuantity: { type: "number" },
description: { type: "string" },
shipDate: { type: "date" }
},
},
data: function (data) {
if (data != undefined) {
$scope.ActiveHistoryCount = data.length;
return data;
} else { return []; }
},
total: function (data) {
return data.length;
},
},
}),
serverPaging: true,
serverSorting: true,
serverFiltering: true,
columns: [
{ hidden: true, field: "rxId"},
{ field: "shortName", title: "DRUG NAME"},
{ field: "refillsLeft", title: "REFILLS LEFT", width: "16%", template: '#= (refillsLeft == null) ? " " : kendo.toString( refillsLeft, "n0")#', attributes: { style: "text-align:left" } },// template: '<div style="text-align:left">#= ((unitsRemaining == null) || (dispenseRefillQuantity == null)) ? " " : kendo.toString(unitsRemaining / dispenseRefillQuantity, "n5")#</div>' },
{ field: "description", title: "STATUS", width: "14%", template: '<div style="text-align:left">#= (description == null) ? " " : description#</div>' },
{ field: "shipDate", title: "SHIPPED DATE", width: "15%", template: '#= (shipDate == null) ? " " : kendo.toString(kendo.parseDate(shipDate), "MM/dd/yyyy") #' }
],
groupable: false,
scrollable: true,
selectable: true,
resizeable: true,
sortable: true,
}
Here is the other code where the broadcast is being sent:
$scope.$on('loadPatientProfileData', function () {
//A lot of data gets and sets are being done here for other things on the
//page, all data is being set in the grid datasource itself
setTimeout(function () {
$rootScope.$broadcast('patientProfile-DataPullFinish');
$rootScope.$broadcast('loadRxHistoryGrids');
}, 100);
});
I use a kendo ui scheduler with AngularJS. When the scheduler initially is loaded, the application does not use any filters. When the scheduler is shown to the user, the user must be able to set some filters and submit these filters to the web api. But I'm not able to receive the parameters.
The value of requestStatus can be populated by a multi select:
<select ng-model="requestStatus" id="requestStatus" name="requestStatus" class="form-control" multiple>
<option value="0" label="Open">Open/option>
<option value="1" label="Closed">Closed</option>
<button ng-click="filterPlanboard()" class="btn btn-primary">Submit</button>
My angularjs Controller is like this:
var requestStatus = "";
$scope.filterPlanboard = function () {
console.log($scope.requestStatus);
var requestStatus = $scope.requestStatus;
console.log(requestStatus); //shows: Array ["0","1"] when all items are selected
$scope.schedulerOptions.dataSource.read({
"Status": requestStatus,
"Type": ["70"]
});
//$scope.schedulerOptions.refresh();
};
$scope.$watch("planboardId", function () {
var schedulerDs = new kendo.data.SchedulerDataSource({
//batch: true,
transport: {
read: {
url: "http://localhost:51714/api/Events/Read/" + $scope.planboardId,//"//demos.telerik.com/kendo-ui/service/tasks",
type: "POST",
dataType: "json",
//data: kendo.stringify({"Color": "Green"}),
contentType: "application/json; charset=utf-8"
},
update: {
url: "http://localhost:51714/api/Events/Update",//"//demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "json",
type: "PUT",
contentType: "application/json"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
}
else if (operation === "update") {
return kendo.stringify({ planboardId: $scope.planboardId, planboardEvent: options });
}
return kendo.stringify(options);
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "Id" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
eventColor: { from: "EventColor", defaultValue: "#333333" }
//isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
});
$scope.schedulerOptions = {
date: new Date("2016/6/26"),
startTime: new Date("2016/6/26 07:00 AM"),
height: 600,
views: planboardViewService.getViews(),
timezone: "Etc/UTC",
eventTemplate: $('#event-template').html(),
ataSource: schedulerDs,
resources: [
{
field: "ownerId",
name: "Owner",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
My Web Api is like this:
[HttpPost]
public IEnumerable<PlanboardEventViewModel> Read(int id, [FromBody] FilterModel filterModel)
{
return _peRepo.GetEvents(id);
}
And my FilterModel:
public class FilterModel
{
public string Status {get;set;}
public string Type {get;set;}
}
When I press the submit button, I can see in fiddler the following json string is shown (in TextView) :
{"Status":["0","1"],"Type":["70"]}
I am trying to find length of kendo grid dataSource, but I am always getting 0 in return. How can I get the total length of dataSource? I have added Control service that is dataSource for the grid.
ctrl.js
$scope.alignedProcessesToControlGridOptions.dataSource = ControlRatingGridDataService.getAlignedProcessesToControlGrid($stateParams.controlId);
var data = $scope.alignedProcessesToControlGridOptions.dataSource.data().length;
console.log('GRID DATA', data);
DataService.js
getAlignedProcessesToControlGrid: function(controlKey) {
var countNew = 0;
return new kendo.data.DataSource({
type: 'json',
serverPaging: true,
serverSorting: true,
serverFiltering: true,
transport: {
read: function(options) {
var gridSearchObject = {
skip: options.data.skip,
take: options.data.take,
pageSize: options.data.pageSize,
page: options.data.page,
sorting: options.data.sort,
filter: options.data.filter
};
return $http.post(
'app/control/rest/allAlignedProcessesToControl/' + controlKey, gridSearchObject).success(
function(data) {
countNew = data.totalCount;
options.success(data.resultDTOList);
});
}
},
pageSize: 5,
schema: {
model: {
id: 'riskInProcessKey',
fields: {
processName: {
editable: false
},
epcfName: {
editable: false
},
erhName: {
editable: false
},
ctlGeolocationsText: {
editable: false
},
ctlPerformanceRatingText: {
editable: false
},
ctlEffectivenessRatingText: {
editable: false
}
}
},
total: function() {
return countNew;
}
}
});
},
Assuming your HTML for the grid looks something like...
$("#grid").kendoGrid({
dataSource: {
// your datasource
},
dataBound: onDataBound
});
Create a function for the dataBound event...
function onDataBound(e) {
console.log(e.sender.dataSource.view().length);
}
I have a request which, on success, loops through each attribute of a JSON response and adds it to my store:
var request = Ext.Ajax.request({
url: 'MCApp',
jsonData: searchquery,
params: {
start: 0,
limit: itemsPerPage
},
success: function(response) {
mainresponse = response.responseText;
if (mainresponse.length == 0) {
alert('No results returned');
return;
}
var decoded = Ext.decode(mainresponse);
for (var i = 0; i < decoded.elements.length; i++) { // loop over decoded data
var element = decoded.elements[i].element;
var model = {};
for (var x = 0; x < element.attributes.length; x++) { // loop over attributes
var attribute = element.attributes[x];
model[attribute.attrname] = attribute.attrvalue; // mapping element names & attributes
}
newstore.add(model); // implicitly cast data as Model
models[i] = model;
}
newstore.loadRawData(models);
},
failure: function() {
alert('Search Failed: Could not reach the server')
}
});
I have now recreated the requestabove within my store. What I need to do is add these same success and failure functions.
var store = Ext.create('Ext.data.Store', {
storeId: 'resultsetstore',
autoLoad: false,
pageSize: itemsPerPage,
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'auto' },
{ name: 'description', type: 'auto' }
],
proxy: {
type: 'ajaxwithpayload', //customized proxy to read "jsonData"
url: 'MCApp',
jsonData: searchquery,
reader: {
type: 'json',
root: 'elements'
}
success: { /* success functions */ },
failure: { /* failure functions */ }
}
});
Here's what my response looks like:
{
"elements":[
{
"element":{
"name":"Element Name",
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
//etc.
1) Is there any way to recreate these functions on my store?
2) Is decoding my response this way the best way to load my response into my store?
EDIT
I'm using the callback function when I load the store:
store.load({
params: { start: 0, limit: itemsPerPage },
callback: function(options, success, response, records) {
if (success) {
alert(response.responseText);
}
}
});
However, I'm getting an undefined in my alert, and it's telling me there are 0 records loaded. But when I look at my response in Firebug I see my JSON string returned just fine.
Error handling in stores
You can listen for the exception-event on the proxy to capture all the store errors.
And for success on the store load-event
var store = Ext.create('Ext.data.Store', {
storeId: 'resultsetstore',
autoLoad: false,
pageSize: itemsPerPage,
fields: [
{ name: 'id', type: 'auto' },
{ name: 'name', type: 'auto' },
{ name: 'description', type: 'auto' }
],
listeners: {
load: function(store, records, successful, eOpts) {
if (successfull) {
alert('success');
}
}
},
proxy: {
type: 'ajaxwithpayload', //customized proxy to read "jsonData"
url: 'MCApp',
jsonData: searchquery,
reader: {
type: 'json',
root: 'elements'
},
listeners: {
exception: function(proxy, response, operation, eOpts) {
alert('exception');
}
}
}
});
or in the load call itself:
store.load({
callback: function(records, operation, success) {
// ...
}
});
or if you use sync (for saving removed, modified,...)
store.sync({
callback: function(batch, options) {
// ...
},
success: function(batch, options) {
// ...
},
failure: function(batch, options) {
// ...
}
});