Questions on Kendo UI for jQuery Forum

3 answers

203 views

Hi,

I am using the latest version of Kendo UI i.e. 2017.3.921. I am trying to include in my solution the kendo-pivot but it seems that some of the features are not working:

1. The configuration option sortable enables the "Sort Ascending / Descending" options in the pivot grid BUT when clicked they do nothing. I tried in local binding demo and added the sortable: true just below the filterable property, and it does not work. I tied the same in the documentation of the sortable configuration setting but the dojo example does nothing

2. I have a kendo-pivot bound to a datasource with remote data of json type. I perform a read operation, the kendo pivot as well as the kendo configurator is populated with data. The pivot has only one Row dimension and no column fields (one measure, only). Should I expand the Row dimension to all its values and force a requery i.e. datasource.read() again the read function of the transport definition is execute OK BUT the statement options.sucess fails with the exception "cannot read property value of undefined"

function preparePivotDS(espqParams, esOptions) {

var qParams = angular.isFunction(espqParams) ? espqParams() : espqParams;

var xParam = {

transport: {

requestEnd: function(e) {

var response = e.response;

var type = e.type;

console.log(type); // displays "read"

console.log(response.length); // displays "77"

},

read: function(options) {

var pqOptions = {};

var executeParams = qParams.Params;

if (executeParams instanceof esGlobals.ESParamValues) {

if (!executeParams.isValidState()) {

var err = new Error($translate.instant("ESUI.PQ.PARAMS_MISSING"));

options.error(err);

throw err;

}

executeParams = executeParams.getExecuteVals();

}

esWebApiService.fetchPublicQuery(qParams.GroupID, qParams.FilterID, pqOptions, executeParams)

.then(function(pq) {

pq = pq.data;

options.success(pq.Rows || []);

})

.catch(function(err) {

$log.error("Error in DataSource ", err);

options.error(err);

});

},

}

};

if (esOptions) {

angular.extend(xParam, esOptions);

}

return new kendo.data.PivotDataSource(xParam);

}

PivotGrid

answered on 18 Nov 2020

5 answers

1.1K+ views

Kendo grid cell refocusing after refresh

I have a selectable, navigatable and editable grid. After I enter a
value in a cell, I have to change the value in the cell under the
updated cell. To show the updated values of both cells, I have to
refresh the grid. When I do that, the edited cell loses focus. I found a
way to refocus the last edited cell during the save event:

save: function (e) {

var focusedCellIndex = this.current()[0].cellIndex; //gets the cell index of the currently focused cell

//...some dataItem saving (dataItem.set()) logic...

this.refresh(); //refreshing the grid instance

setTimeout(function () { //refocusing the cell

return function () {

var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");

$('#grid').data('kendoGrid').editCell(focusedCell);

}

}(), 200);

}

The problem is that this works for the first time, but if I try to
re-edit the same cell again, the cell loses focus. When I try to debug,
it seems that this.current()[0].cellIndex returns 0 in the second attempt, and because of that cell focusing isn't working anymore.

Does anyone have any idea why this.current() works for the 1st time, and not for the 2nd time? Are there any other approaches for refocusing the cell?

Grid

answered on 18 Nov 2020

10 answers

398 views

Local Bind and filter or sort don't work

hello,

I am use this example http://dojo.telerik.com/AZamu/2, with local binding I was modify to sort and filter and it don't work, this is my code:

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/pivotgrid/local-flat-data-binding">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>

<div id="example">
<div id="configurator"></div>
<div id="pivotgrid"></div>

<script>
$(document).ready(function () {
var pivotgrid = $("#pivotgrid").kendoPivotGrid({
columnWidth: 120,
height: 570,
filterable: true,
sortable: true,
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
CategoryName: { field: "Category.CategoryName" }
}
},
cube: {
dimensions: {
ProductName: { caption: "All Products" },
CategoryName: { caption: "All Categories" },
Discontinued: { caption: "Discontinued" }
},
measures: {
"Sum": { field: "UnitPrice", format: "{0:c}", aggregate: "sum" },
"Average": { field: "UnitPrice", format: "{0:c}", aggregate: "average" }
}
}
},
columns: [{ name: "CategoryName", expand: true }, { name: "ProductName" } ],
rows: [{ name: "Discontinued", expand: true }],
measures: ["Sum"]
}
}).data("kendoPivotGrid");

$("#configurator").kendoPivotConfigurator({
dataSource: pivotgrid.dataSource,
height: 570
});
});
</script>
<style>
#pivotgrid
{
display: inline-block;
vertical-align: top;
width: 70%;
}

#configurator
{
display: inline-block;
vertical-align: top;
}
</style>
</div>

</body>
</html>

Why It don't work wiht local bind?

Thanks.

PivotGrid

answered on 18 Nov 2020

2 answers

131 views

datasource grid date formatting

https://dojo.telerik.com/aDalAvav/3

Dear sirs, the architecture requires to call "doc.subdoc" field by it's name.

So I have troubles formatting the dates to my localdate, as you can see the example.

Please, help.

Thank you.

Data Source

answered on 18 Nov 2020

5 answers

4.4K+ views

How to get current page number - MVC

Hi,

I want to get current page number of Kendo Grid.
Please can you show me the way for model in view and controller?

Thanks,
Nirav

Grid

answered on 17 Nov 2020

3 answers

317 views

Grid save event fires before column editor drop down list change event

We're using the approach to show a drop down list in the grid row when a user clicks on the cell. In the change event we're changing values in the grid's data source to match a selection made from the drop down list.

This all seems to work fine, the grid datasource values are being changed, the only problem is that the grid's save event fires before dropDownList's change event.
This is a problem because the grid's dataSource.dataItem values have not been changed yet.

Question is: Why would the grid's save event fire before the change event of the dropDownList. More importantly, is there some other event we can bind to on the dropDownList which will happen before the grid's save event is called?

The importance here is that the grid's save event is calling a refresh on the grid.

Grid

answered on 17 Nov 2020

1 answer

1.4K+ views

Change language in scheduler.

i want to change the labels/button labels,view names and other texts in scheduler to a given language. And as you have mentioned in your posts i set a culture for my scheduler

This is how i did it.

eg: kendo.culture('zh-CN');

will this be enough?? Do i have to create the localization file too. If so is there ay proper place to find these localization files and where should i store the file?

Scheduler

answered on 17 Nov 2020

5 answers

799 views

Grid foreign key column won't save new dropdown selections, only update existing non null selections

I'm having an odd problem with my KendoUI grid using Odata-V4. I have a foreign key lookup, and if I have a value in the lookup field, I can update it just fine- I get an indicator that the field is dirty and it's updated when I save the grid. However, if there is no value when I load the item, I can choose an item in the dropdown but the selection isn't saved- the grid shows a blank value when I focus away from the foreign key dropdown and I can't save the grid; if I change another value and save it, the FK dropdown didn't set the value in the object. I'm hoping someone's run into this before? Thanks so much for any input.

var dataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
xhrFields: { withCredentials: true },
url: "/odata/ProvisionalAppointments"
},
update: {
xhrFields: { withCredentials: true },
url: function (data) {
return "/odata/ProvisionalAppointments(" + data.Id + ")";
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number" },
CustomerFirstName: { type: "string", editable: false },
CustomerLastName: { type: "string", editable: false },
CustomerPhoneNumber: { type: "string", editable: false },
FromDate: { type: "date", editable: false },
ToDate: { type: "date", editable: false },
ServiceId: { type: "number" },
LocationId: { type: "number" },
EmployeeId: { type: "number" },
IsApproved: { type: "bool" }
}
}
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});

var servicesDataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
xhrFields: { withCredentials: true },
url: "/odata/Services"
}
},
schema: {
model:
{
id: "Id",
fields:
{
Id: {
editable: false
},
Name: {
type: "string"
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});

$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["save", "cancel", "excel", "pdf"],
excel: {
allPages: true,
filterable: true
},
pdf: {
allPages: true
},
sortable: { mode: "multiple" },
pageable: {
pageSizes: [5, 10, 20, 50]
},
editable: true,
reordable: true,
resizable: true,
columns: [
{ field: "CustomerFirstName", title: "First Name" },
{ field: "CustomerLastName", title: "Last Name" },
{ field: "CustomerPhoneNumber", title: "Phone" },
{ field: "FromDate", title: "When", template: '#= kendo.toString(kendo.parseDate(FromDate), "M-d h:mm tt")#-#= kendo.toString(kendo.parseDate(ToDate), "h:mm tt")#' },
{ field: "ServiceId", title: "Service", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
{ field: "LocationId", title: "Location", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
{ field: "EmployeeId", title: "Employee", dataTextField: "Name", dataValueField: "Id", dataSource: employeesDataSource },
{
command: [{ name: "approve", template: "<a class='k-button k-grid-approve approve'><span class='k-icon k-i-check-outline'></span>Approve</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: approveAppointment },
{ name: "revokeApproval", template: "<a class='k-button k-grid-revokeApproval approved'><span class='k-icon k-i-check-circle'></span>Undo Approval</a>", visible: function (dataItem) { return dataItem.IsApproved === true; }, click: revokeApproveAppointment },
{ name: "reject", template: "<a class='k-button k-grid-reject reject'><span class='k-icon k-i-cancel'></span>Reject</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: rejectAppointment },
{ name: "revokeRejection", template: "<a class='k-button k-grid-revokeRejection rejected'><span class='k-icon k-i-cancel-circle'></span>Undo Rejection</a>", visible: function (dataItem) { return dataItem.IsApproved === false; }, click: revokeApproveAppointment }
], width: "275px"
}
],
allowCopy: {
delimeter: ","
},
mobile: true,
navigatable: true
});

Grid

answered on 17 Nov 2020

1 answer

101 views

Customize 'show full day/Show bussiness hours' label

In my project i have a requirement to customize the 'show full day/Show bussiness hours' button label in the scheduler. As far i have investigated i couldn't find a proper solution for this in your supported templates??.

Scheduler

answered on 17 Nov 2020

6 answers

3.3K+ views

Grid Horizontal scrolling not working

Dear Community,

I have set grid width as 500 and have defined width of all of its columns and their total width (800) exceeds grid's width (500) but still horizontal scrolling is not coming.

Is there any property setting that needs to be done? Please share a working code with me.

Cheers,
Shiva

Grid

answered on 17 Nov 2020