How can I find length of kendo dataSource? - angularjs

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);
}

Related

I want to update kendo grid after update

$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

Bind codemirror extjs 6

Code mirror is not bind in extjs 6.
I already tried to subcribe the get and set methods, only the set works, when the component is opened the value is set, but when it changes the value of the codemirror, it does not bind with the value
My component:
Ext.define('Ext.form.field.CodeMirror', {
extend: 'Ext.form.field.TextArea',
alias: 'widget.codemirror',
getValue: function () {
var me = this;
if (me.codeEditor) {
return me.codeEditor.getValue();
}
},
setValue: function (value) {
this.codeEditor.setValue(value);
},
listeners: {
afterrender: function (textarea) {
var me = this;
me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
mode: "xml",
htmlMode: true,
theme: "default",
lineNumbers: true,
lineWrapping: true,
matchTags: {
bothTags: true
},
autoCloseTags: true,
extraKeys: {
"F11": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) {
cm.setOption("fullScreen", false);
}
}
},
foldGutter: {
rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
}
}
});
Use the component (Default bind is value on Extjs):
xtype: 'codemirror',
name: 'xml',
bind: '{model.arquivoNfceWrapper.xml}',
listeners: {
afterrender: function (textarea) {
var me = this;
me.codeEditor = CodeMirror.fromTextArea(textarea.inputEl.dom, {
mode: "xml",
htmlMode: true,
theme: "default",
lineNumbers: true,
lineWrapping: true,
matchTags: {
bothTags: true
},
autoCloseTags: true,
extraKeys: {
"F11": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function (cm) {
if (cm.getOption("fullScreen")) {
cm.setOption("fullScreen", false);
}
}
},
foldGutter: {
rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent)
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
me.codeEditor.on('change', function (cMirror) {
me.updateBindValue(cMirror.getValue());
});
me.codeEditor.setValue(me.getBindValue());
}
},
getBindValue: function () {
return this.bind.value.getValue();
},
updateBindValue: function (value) {
this.bind.value.setValue(value)
}

KendoUI+AngularJS : Showing dropdown list for an inline editor in a hierarchical nested grid

I am having a hierarchical nested Kendo grid. The parent grid is displaying a list of currency and each currency has a list of allocation. Both grid have a inline editor. Currency has a property 'currencyName' and allocation has a property 'allocationName'. Both these property need to have a kendo dropdownlist editor.
In my solution, I am able to get the drop down for the currencyName, but for allocationName I am getting a textbox. Below is the code:
HTML :
<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>
Currency Grid DataSource:
This is being assigned by another parent funds grid. The funds grid has an editable pop-up window, and assigns the currencyKendoGrid it's data source on the edit event as follows.
edit: function (e) {
if (e.model.currencies)
ctrl.currencyKendoGrid.dataSource.data(e.model.currencies);
}
Currency DropDown DataSource:
ctrl.currencyDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
DataSvc.getCurrencyData().then(function (response) {
e.success(response.data);
});
}
}
});
Allocation DropDown DataSource:
ctrl.allocationsList = [{ allocName: "Cash", allocId: 1 }, { allocName: "Money Market", allocId: 2 }, { allocName: "TBill", allocId: 3 }, { allocName: "FX-Forward", allocId: 4 }];
ctrl.allocationDataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: function (e) {
e.success(ctrl.allocationsList);
}
}
});
Currency Grid Options:
ctrl.currencyGridOptions = {
dataSource: {
schema: {
model: {
fields: {
currency: { type: "string", editable: true }
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Currency',
}],
columns: [
{
field: "currencyName", title: "Currency",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.currencyDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: " ", width: "250px" }
],
detailInit: detailInitCurrency,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
}
Allocation Grid Options:
function detailInitCurrency(e) {
if (e.data.allocations)
ctrl.selectedCurrencyAllocations = e.data.allocations;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (e) {
e.success(ctrl.selectedCurrencyAllocations);
},
},
filter: { field: "currencyId", operator: "eq", value: e.data.currencyId },
schema: {
model: {
id: "allocationId",
fields: {
allocationId: { type: "number", editable: false },
allocationName: { type: "string", editable: true },
}
}
}
},
editable: "inline",
toolbar: [{
name: 'create',
text: 'Add Allocation',
}],
columns: [
{
field: "allocationName", title: "Allocation",
editor: function (container, options) {
$('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.allocationDataSource" data-bind="value:' + options.field + '"/>')
.appendTo(container);
}
},
{ command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "", width: "250px" }
]
});
}
Output :
Please feel free to point me out on any code that I may have missed since I have removed a lot of unnecessary code for keeping the problem simple.

Can you tell me PageSize Change Event in Kendo Angular grid

Can you tell me page size Change event in Kendo-Angular grid as i am new in kendo grid control. Please help me. Thank you in advance.
app.controller("dataController", function ($compile, dataFactory, $scope, $timeout) {
$scope.obj = [];
$scope.DistrictList = [];
$scope.DistrictTextToShow = "Select District";
$scope.GetDistrict = function () {
dataFactory.getdistrictList().success(function (data) {
$scope.DistrictList = data;
}).error(function (data) {
$.toaster({ priority: 'error', title: 'Error', message: 'Error while fetching data' });
});
};
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
$scope.gridData = new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: baselocation + "api/Customer/GetAllCustomerByDistrictId",
data: { DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() }
}
},
schema: {
data: function (data) {
return data.Rows;
},
total: function (data) {
return data.TotalRows;
}
},
pageSize: 5
});
$scope.detailGridOptions = {
sortable: true,
pageable: {
"pageSizes": true,
change: function (e) {
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
//$("#grid1").data('kendoGrid').dataSource.pageSize(parseInt(this.value()));
$("#grid1").data('kendoGrid').dataSource.read({ DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() });
$("#grid1").data('kendoGrid').refresh();
}
},
datasource: $scope.gridData,
groupable: true,
scrollable: true,
columns: [{
field: "Customername",
title: "Customer Name",
width: "150px"
}, {
field: "mobile",
title: "Mobile",
width: "120px"
}, {
field: "email",
title: "Email",
width: "120px"
}, {
field: "Districtname",
title: "District",
width: "120px"
}]
};
$scope.GetDistrict();
$scope.BindData = function () {
if ($("#ddldistrict").val() == '') {
$scope.ddldistrict = GuidEmpty;
}
else {
$scope.ddldistrict = $("#ddldistrict").val();
}
$("#grid1").data('kendoGrid').dataSource.read({ DistrictId: $scope.ddldistrict, isactive: $("#ddlstatus").val() });
$("#grid1").data('kendoGrid').refresh();
}
//$("#grid1").kendoPager({
//});
//$scope.gridData.read();
});

How to share code in angular js (concept of code resuability in angular js?

i am new to angular js and i want to share and make certain codes reusable. i have tried to do that using services and factory. But i am getting error.
'use strict';
angular.module('myApp.ctrls')
.controller('Ctrl_HubStockOnHandMode', function($http, $scope, reportService) {
$scope.HubStockOnHandModeGridOptions = {
dataSource: {
type: "jsonp",
transport: {
read: function(e) {
reportService.WebAPI('abc/BIUMo', {
EnvironmentCode:'JMVH',
OrderBy: getOrderBy(e.data.sort)
}).then(function (d) {
$scope.data = d;
e.success(d.Data);
});
}
},
serverPaging: true,
serverSorting: true
},
height:config.GridHeight,
scrollable:true,
sortable: {
mode: "single",
allowUnsort: true
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to",
contains: "Contains"
}
}
},
pageable: false,
columns: [
{
field: "RowNumber"
,title: "No."
,width: "50px"
,sortable:false
,filterable: false
},
{
field: 'ItemCTSH'
,title:'Item'
,template: "<div kendo-tooltip title='#= ItemCT #' > #= ItemCTSH # </div>"
,filterable: {
ui: itemFilter
}
},
]
};
}
//Get Item List
$http.get('http://webapi.dashboard.hcmisonline.org/api/OID_WebApi/IssuedItemList')
.success(function (data) {
$scope.items = data.Data;
});
function itemFilter(element) {
element.kendoAutoComplete({
dataSource: $scope.items
});
}
}
});
I want to reuse the functions like the Get item. i have other pages/grids that use exactly this code, except changing the environment code
how to i solve this issue?
thanks

Resources