In my AngularJS web app, I'm doing a Pivot with devexpress. Particularly, I'm using
the Field Chooser: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = null;
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the function to retrieve data
$scope.getTestData = () => {
// I call the server and save the data
........
$scope.testData = result;
}
The problem is that the table, after the calling, is still empty. There is written "No data". Why? I also tried to write
$scope.pivotGridDataSource.load();
$scope.pivotGridDataSource.reload();
after the call to the server, but it doesn't work yet.
The problem is in your store, so do something like this
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
.......
store: dataStore
});
See this code below, it is jquery, but AngularJS is basically the same
var dataStore = new DevExpress.data.CustomStore({
load: function (loadOptions) {
var d = $.Deferred();
$.ajax({
url: UrlApi,
method: "GET",
}).done(function (result) {
d.resolve(result, {
});
});
return d.promise();
},
key: "Id",
});
$("#pvtSales").dxPivotGrid({
showBorders: true,
"export": {
enabled: true,
fileName: "Sales"
},
dataSource: {
fields: [{
caption: "Fecha",
dataField: "maeFecha",
width: 350,
area: "row"
}, {
caption: "Nombre",
dataField: "maeNombre",
dataType: "number",
summaryType: "count",
area: "data"
}, {
dataField: "maeGestion",
width: 350,
area: "column"
}],
store: dataStore
}
});
And see the results
Related
I'm new to Kendo and working on task which is CRUD using kendo grid with inline edit, but I am facing issue with create operation when I try to insert the data the date field does not working it brings {1/1/0001 12:00Am} value to the controller, I don't know whats happening here because I have used date format with date picker but issue still persist. help me solve this issue thanks.
The code for the grid is :
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/LoadEmployeesAsyc",
dataType: "json"
},
update: {
url: "/Home/UpdateEmployeesAsyc",
dataType: "json"
},
destroy: {
url: "/Home/DelectEmployeesAsyc",
dataType: "json"
},
create: {
url: "/Home/CreateEmployeeAsyc",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number"},
Name: {type: "string"},
Age: {type: "number"},
JoiningDate: {type: "Date"},
DepartmentId: {type: "number"},
profilePic: {type: "string"}
}
}
}
}),
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
sortable: true,
pageSize: 10,
groupable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
toolbar: ["create", "save", "cancel"],
columns: [{
field: "Id",
title: "Employee Code"
},
{
field: "Name",
title: "Name"
},
{
field: "Age",
title: "Age"
},
{
field: "JoiningDate",
title: "Joining Date",
width: 100,
format: "{0:MM/dd/yyyy}",
editor: dateEditor
},
{
field: "DepartmentId",
title: "Department Code",
},
{
field: "ProfilePic",
title: "Picture",
template:
'<img height="50" width="50" src="../Content/Images/#:data.ProfilePic#"/>'
},
{command: ["edit", "destroy"], title: " ", width: "250px"}],
editable: "inline"
});
});
function dateEditor(container, options) {
$('<input type="text" name="JoiningDate" id="JoiningDate"/>')
.appendTo(container)
.kendoDatePicker({
format: "MM/dd/yyyy"
});
}
</script>
Code of grid :
public JsonResult LoadEmployeesAsyc()
{
var employees = employeeRepository.GetAll();
return new JsonNetResult() { Data = employees };
}
public JsonResult CreateEmployeeAsyc(Employee employee)
{
employeeRepository.Create(employee);
var employees = employeeRepository.GetAll();
return new JsonNetResult() { Data = employees };
}
Finally i have found solution for my issue:
I have used parameterMap function convert date to this "MM/dd/yyyy" format
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.JoiningDate);
options.JoiningDate = kendo.toString(new Date(d), "MM/dd/yyyy");
return options;
}
Put the below script in schema model
JoiningDate: { type: 'date', format: "MM/dd/yyyy" },
and define format in date column :
{
field: "JoiningDate",
title: "Joining Date",
format: '{0:MM/dd/yyyy}',
width: 100
},
this is my Kendo Grid
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Actionables/GetAccessibleTemplateForAssets/",
data: { assetID: '#Model.AssetID', types: '#Model.TypeName' },
dataType:"Json",
type: "GET"
},
},
schema: {
model: {
id: "ID",
fields: {
ID: { type: "int" },
Name: { type: "string" },
Description: { type: "string" },
Types: { type: "string" },
EntryGroupID: {type:"int"}
}
}
},
pageSize: 3,
});
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: onDataBound,
autoSync: true,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
height: 250,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns:
[{
field: "Types",
width: 100,
title: "Type",
template: "<image src='/Content/Images/Pins/#:data.Types#.png'/>",
filterable: false
},{
field: "Name",
width: 150,
title: "Name",
filterable: {
cell: {
operator: "contains"
}
}
}, {
field: "Description",
width: 150,
title: "Description",
filterable: {
cell: {
operator: "contains"
}
}
},{
command: [
{ name: "remove", text: " ", click: removeTab, iconClass: "fa fa-trash" },
{ name:"view", text: " ", click: addTab , iconClass: "fa fa-plus-circle"}],
title: "Action",
width: 100,
}],
editable: {
mode:"popup"
},
}).data("kendoGrid");
wnd = $("#details").kendoWindow({
title: "View Tab",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#ViewDetails").html());
this will get called when user clicked '+' sign in command column. it opens a popup window.
function addTab(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
the popup window contains two button, on that button click event OpenRecentlyClosed() function will get called.
<script type="text/x-kendo-template" id="ViewDetails">
<div id="details-container">
<button id="oldEntryGroup" class="k-button" onclick="OpenRecentlyClosed()">Open recently closed</button>
<br /><br />
<button id="NewEntryGroup" class="k-button">Open new</button>
</div>
the below function I'm trying to access dataItem of clicked/selected row. please help. thank you in advance
function OpenRecentlyClosed() {
//trying to access dataItem here.. please help
//var grid = $("#grid").data("kendoGrid");
//var dataItem = grid.dataItem(grid.select());
$.ajax({
cache: false,
type: "GET",
url: "some url",
data: {x: dataItem.ID},// need to pass value of dataItem.ID
success: function () {
//my code
}
});
}
Event to capture row click and get data from that row:
$(document).on("click", "#grid tbody tr", function (e) {
var element = e.target || e.srcElement;
var data = $("#grid").data("kendoGrid").dataItem($(element).closest("tr"));
});
I think you need to keep a reference to the selected dataItem in your javacript function addTab.
function addTab(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.selectedDataItem = dataItem;
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
Then in OpenRecentlyClosed you could access the dataItem.
function OpenRecentlyClosed() {
var dataItem = wnd.selectedDataItem;
$.ajax({
cache: false,
type: "GET",
url: "some url",
data: {x: dataItem.ID},// need to pass value of dataItem.ID
success: function () {
//my code
}
});
}
Please try with the below code snippet.
function OpenRecentlyClosed() {
var grid = $("#grid").data("kendoGrid");
var selectedRows = grid.select();
selectedRows.each(function(index, row) {
var selectedItem = grid.dataItem(row);
alert(selectedItem.ID);
});
...
...
}
Let me know if any concern.
Note: grid.dataItem(row) will just get what's in the row. If you have a database and really want the dataItem and maybe some items in another dataset that are in some relationship with your item, you can do e.g. an AjaxCall.
i have the problem to use the custom command buttons in kendo grid with ajax call using javascript call web api post action with dynamic parameters behind buttons click(start,Stop,Restart)
datasource
dataSource = new kendo.data.DataSource({
transport: {
read:
{
url: crudServiceBaseUrl + "WindowsService",
dataType: "json",
},
destroy:
{
url: crudServiceBaseUrl + "WindowsService/Delete/?deletedby=" + clientid,
type: "DELETE"
},
create:
{
url: crudServiceBaseUrl + "WindowsService/Post",
type: "POST"
//complete: function (e) {
// $("#grid").data("kendoGrid").dataSource.read();
//}
},
update:
{
url: crudServiceBaseUrl + "WindowsService/Put/",
type: "PUT",
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
},
schema:
{
model:
{
id: "WindowsServiceId",
fields: {
WindowsServiceId: { editable: true, nullable: false, type: "int" },
ServiceName: { editable: true, nullable: true, type: "string" },
ServiceStatus: { editable: true, nullable: false, type: "string" },
}
}
}
});
kendo grid
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "popup",
toolbar: ["create"],
columns: [
{
field:"ServiceName",
title: "Service",
width: '200px',
},
{
field: "ServiceStatus",
title: "Status",
width: '140px',
},
{
field: "CreatedDate",
title: "Date",
width: '140px',
},
{
command: [
{
name: "start",
text: "Start",
click: function (e) {
$.ajax({
method: "POST",
url: crudServiceBaseUrl + "WindowsService/Start?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
}).done(function (msg) {
alert("Service Started successfully");
}).fail(function () {
alert("service failed");
});
}
},
{
name: "stop",
text: "Stop",
click: function (e) {
$.ajax({
method: "POST",
url: crudServiceBaseUrl + "WindowsService/Stop?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
}).done(function (msg) {
alert("Service Stop successfully");
}).fail(function () {
alert("service failed");
});
}
},
{
name: "restart",
text: "Restart",
click: function (e) {
$.ajax({
method: "POST",
url: crudServiceBaseUrl + "WindowsService/ReStart?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
}).done(function (msg) {
alert("Service ReStarted successfully");
}).fail(function () {
alert("service failed");
});
}
},
{
name: "history",
text: "History",
click: function (e) {
alert("History");
}
}
]
}
],
//height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
}).data("kendoGrid")
;
html
<div id="grid"> </div>
i have the problem to pass the dynamic windowsserviceid which is unique id, now i just use the static id. its working with static value.
please help/guide me how to use the dynamic windowsserviceid in ajax function call. i appreciate your valuable time and effort. thanks in advance.
Finally I found the solution by accessing the Unique Id of row and then using that Id in my Button Clicks functions and it all worked for me perfect.
var tr = $(e.target).closest("tr"); //accessing a row in grid
var item = this.dataItem(tr); //accessing row items in the grid
var winServiceId = item.WindowsServiceId; //my Unique Id in a row
and finally used this winServiceId in my Button click functions.
This should work for you:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ hidden: true, field: "id" },
{ field: "name" }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>
You can read more about it here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes
Then all you have to do is access the hidden field value in your function.
On another note, you should remove your functions from the grid definition and have them as separate functions that you call from within the grid def.
Hi i have a Kendo grid which works fine but I was wondering if its possible to add another exact one with a button click so i could have multiple instances of the same grid?
I am getting all the data from a sql database.
My code for the grid is ->
function DisplaySearch() {
var textS = $('#searchBox').val();
Textvalue = textS;
$.ajax({
type: "post",
data: JSON.stringify({
search_string: Textvalue,
}),
url: "Search.aspx/display_search",
dataType: "json",
contentType: 'application/json',
success: function (object) {
response(object);
},
complete: function (object) {
},
error: function (object) {
}
});
function response(object) {
$("#searchGrid").kendoGrid({
dataSource: {
data: object.d,
schema: {
model: {
archive_header_key: { type: "number" },
group_Name: { type: "string" },
Server: { type: "string" },
archive: { type: "string" },
display_name: { type: "string" },
file_written: { type: "number" },
session_ID: { type: "string" },
},
},
pageSize: 20,
},
reorderable: true,
navigatable: true,
selectable: "multiple",
scrollable: true,
sortable: true,
filterable: false,
columnMenu: true,
pageable: {
input: true,
numeric: true
},
columns: [
{ field: "archive_header_key", title: "Key", width: 50 },
{ field: "Server", title: "Server", width: 75 },
{ field: "group_Name", title: "Group", width: 75 },
{ field: "archive", title: "Archive", width: 50 },
{ field: "display_name", title: "Display name", width: 300 },
{ field: "file_written", title: "Files", width: 50 },
{ field: "session_ID", title: "Session", width: 200 },
]
});
}
};
any help would be appreciated.
Of course you can! You only need to make sure that the id of the grid is unique.
This code will add a div to a given container and create a grid - with any button click a new grid. Hope it works, I haven't tested it.
var gridNr = 1;
$("#btn").click(function(e){
$("#gridContainer").append("<div id='grid_'" + gridNr + " />");
$("#grid_" + gridNr).kendoGrid({ ... your grid code here ... });
gridNr++;
})
I am create one sample application and use kendo-ui inline editing grid.
Problem is: not come date field value in action controller.
View page Code is:
<script type="text/javascript">
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("CriticalDateList", "Home"))",
type: "POST",
dataType: "json"
},
create: {
url: "#Html.Raw(Url.Action("InsertCriticalDate", "Home"))",
type: 'POST',
dataType: "json"
},
},
change: function (e) {
if (e.action == "itemchange") {
e.items[0].dirtyFields = e.items[0].dirtyFields || {};
e.items[0].dirtyFields[e.field] = true;
}
},
batch: true,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id:"Id",
fields: {
Id: { editable: false},
Date: { editable: true, type: "date" },
}
}
},
error: function (e) {
//display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize:5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: true,
height: 500,
toolbar: ["create"],
columns: [
{field: "Date", title: "Date", format: "{0:dd-MMM-yyyy hh:mm:ss tt}", parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"], width: "130px"},
{ command: ["edit", "destroy"], title: "Action", width: "250px" }],
editable: "inline"
});
Action Code is:
public ActionResult InsertCriticalDate(CriticalDateModels model)
{
return null;
}
output is.
And in my action i am getting different date.