function BindGrid(dData) {
$("#grid").kendoGrid({
dataSource:
{
data: dData,
schema: {
data: "Data",
total: "Total"
},
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: {
ui: function (element) {
element.kendoDatePicker({
format: "MMM dd, yyyy",
parseFormats: ["dd-MMMM-yyyy"]
});
}
},
sortable: true,
pageable: {
pageSize: 100,
pageSizes: [100, 200, 300, 400],
//messages: {
// itemsPerPage: "Products",
// display: "{0}-{1} from {2} Products",
// empty: "No data",
// allPages: "Show All"
//}
},
sortable: {
allowUnsort: false
},
columns: [
{ field: "Person", title: "#Html.LanguageLabel("Product.Person")", width: "180px" },
{ field: "DownloadedDate", title: "#Html.LanguageLabel("Product.DownloadedDate")", type: "date", width: "100px", template: "#= kendo.toString(kendo.parseDate(DownloadedDate), 'MMM dd, yyyy') #" },
{ field: "DownloadedTime", title: "#Html.LanguageLabel("Product.DownloadedTime")", width: "100px" },
{ field: "Company", title: "#Html.LanguageLabel("Product.Company")", width: "180px" },
{ field: "StateName", title: "#Html.LanguageLabel("State")", width: "150px" },
{ field: "PhoneNumber", title: "#Html.LanguageLabel("Product.PhoneNumber")", width: "120px" },
{ field: "EmailId", title: "#Html.LanguageLabel("Product.Email")", width: "250px" },
],
});
}
There is a known issue with Kendo Grid in which the date filtering does not ignore the timestamp (i.e. hours/minutes/seconds) and does not match the month/day/year only.
Related
I want to show to users subset of columns and allow them to add extra columns if needed. I am struggling to load only subset of columns on load. Please find the code below I have done.
<kendo-grid k-options="vm.mainGridOptions"
k-columns="vm.mainGridColumns"
k-sortable="true"
k-filterable="{mode: 'row'}"
k-column-menu="true"
k-serverFiltering="false"
k-pageSize="10"
k-pageable="{ pageSizes: [5, 10, 25, 50, 100] }"> </kendo-grid>
Controller code
var mainGridDataSource = new kendo.data.DataSource({
transport: { read: mainGridReadEventHandler, cache: true },
serverFiltering: false,
page: 1,
pageSize: 10,
schema: {
data: 'data',
total: 'total',
model: {
fields: {
customerName: { type: "string" },
serviceAccountStatus: { type: "string" },
customerNumber: { type: "string" },
serviceType: { type: "string" },
utilityAccountNumber: { type: "string" },
serviceAddress: { type: "string" },
billingAccountNumber: { type: "string" },
utility: { type: "string" },
phoneNumber: { type: "string" },
email: { type: "string" }
}
}
}
});
vm.mainGridColumns = [
{
field: "customerName",
title: "Name",
template:
"<a ui-sref='resiservice.account-search.customer-details({ customerId:${customerId}, serviceAccountId:${serviceAccountId} })'>${customerName}</a>"
},
{
field: "serviceAccountStatus",
title: "Status"
},
{
field: "customerNumber",
title: "NAP Customer #"
},
{
field: "serviceType",
title: "Commodity"
},
{
field: "utilityAccountNumber",
title: "Utility/Account #"
},
{
field: "serviceAddress",
title: "Service Address"
},
{
field: "billingAccountNumber",
title: "NAP Account #"
},
{
field: "utility",
title: "Utility"
},
{
field: "phoneNumber",
title: "Phone #"
},
{
field: "email",
title: "Email Address"
}
];
Currently columns list coming like this first time
And i want to achive like this
Use columns.hidden property to hide a column, i.e.
{
field: "utility",
title: "Utility",
hidden: true
},
{
field: "phoneNumber",
title: "Phone #",
hidden: true
},
{
field: "email",
title: "Email Address",
hidden: true
}
For example:
http://dojo.telerik.com/EzuFO
The column is still visible on the list of columns in menu.
I seem to be having an issue trying to bing my JSON result to my Kendo UI grid
This is my JSON result I get back from my web service:
"{
"Data":[{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-04-27T00:00:00",
"Name":"One",
"Number":"201504260952",
"Status":"Draft",
"Id":3
},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-08T11:04:00",
"Name":"fdasfdsa",
"Number":"20150708110209",
"Status":"Draft",
"Id":17},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-09T08:44:00",
"Name":"Two",
"Number":"20150709084329",
"Status":"Draft",
"Id":20
}],
"Groups":null,
"Total":3
}"
This is my Grid and data source set up:
$(function () {
var myGrid = $("#myGrid");
myGrid.kendoGrid({
groupable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
hidden: true,
field: "Id"
},
{
headerTemplate: ""
},
{
title: "Status",
field: "Status"
},
{
title: "Number",
field: "Number"
},
{
title: "Name",
field: "Name"
}]
});
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/somewhere.svc/Data",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'Data',
groups: 'Groups',
aggregates: 'Aggregates',
total: 'Total',
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Status: { type: 'string' },
Number: { type: 'string' },
Name: { type: 'string' },
ModifiedBy: { type: 'string' },
ModifiedDate: { type: 'date' }
}
}
},
pageSize: 5,
serverPaging: true,
serverGrouping: true,
serverSorting: true,
serverFiltering: true
});
myGrid.data("kendoGrid").setDataSource(myDataSource);
});
When the page loads I can see that I get the above JSON but I don't get any rows displayed in the grid.
What might I be doing wrong?
I want to use AmChart and getting data for charts from MySQL by JSON.
But it display not things.
This is my js source:
<script type="text/javascript">
var chart2;
$(document).ready(function(){
$.getJSON("data", function (data) {
chart2.dataProvider = data;
chart2.dataDateFormat = "YYYY-DD-MM";
chart2.validateData();
});
});
var chart2 = AmCharts.makeChart("chartdiv2", {
type: "stock",
theme: "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
title: "Participants",
fieldMappings: [{
fromField: "student",
toField: "student"
}],
categoryField: "date"
}
],
dataDateFormat: "YYYY-MM-DD",
panels: [{
showCategoryAxis: false,
title: "Student",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "student",
comparable: true,
compareField: "student",
balloonText: "[[title]]:<b>[[student]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[student]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.student.close]]%",
periodValueTextRegular: "[[value.close]]"
}
}],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth: true,
cursorAlpha: 0.1,
valueLineBalloonEnabled: true,
valueLineEnabled: true,
valueLineAlpha: 0.5
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});
</script>
The json file output from data function
[{"date":"2011-01-10","student":"100"},{"date":"2012-02-11","student":"122"}]
Anyone know the solution please help. Thanks.
Try to parse your data,
For Eg,
$.getJSON("data", function (data) {
newData=JSON.parse(data);
chart2.dataProvider = newData;
chart2.dataDateFormat = "YYYY-DD-MM";
chart2.validateData();
});
I have reviewed other answers to this question but none solve this problem. When using popup editor on the kendoGrid, cancel removes the row completely.
here's the code:
addWindow.element.find("#InventoryChecks").kendoGrid({
dataSource: {
data: checkCallDetail.InventoryChecks,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
BillOfLading: { type: "string" },
ReportedPieces: { type: "number" },
ReportedWeight: { type: "number" }
}
}
},
aggregate: [
{ field: "ReportedPieces", aggregate:"sum" },
{ field: "ReportedWeight", aggregate: "sum" }]
},
height: 200,
scrollable: true,
toolbar: ["create"],
columns: [
{ field: "BillOfLading", title: "BOL", width: "100px", footerTemplate: "Total: " },
{ field: "ReportedPieces", title: "Quantity", width: "70px", footerTemplate: " #= sum # " },
{ field: "ReportedWeight", title: "Weight", width: "70px", footerTemplate: " #= sum # " },
{ command: ["edit"], title: " "}
],
editable: {
mode: "popup",
}
})
Any suggestions?
Ok, so here is the thing... I have grid with 3 columns: Premises Order, Name and Postal Code
The first column Premises Order is editable(numericall). What I want to do is this: Make an onChange function to save the value of the new inserted number. I know I need a procedure for that I just want to know how to catch the value (in console), to know that I have it and than I'll do the procedure.
Here is the code
PremisesGrid2 = $("#assignedRoute").kendoGrid({
dataSource: {
type: "application/jsonp",
transport: {
read:
{
url: "http://" + servername + "/uBillingServices/Premise/Premise.svc/GetAllPremisesByRoute",
dataType: "json",
data: function () {
return {
Route_ID: selectedID,
UserName: userName,
WorkStation: workStation
}
}
}
}, pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
ID: { type: "string", validation: { required: true }, editable: false },
PostalCode: { type: "string", validation: { required: true }, editable: false },
Latitude: { type: "string", validation: { required: true }, editable: false },
Longitude: { type: "string", validation: { required: true }, editable: false },
IsMember: { type: "string", validation: { required: true }, editable: false },
Name: { type: "string", validation: { required: true }, editable: false },
RouteOrderBy: { type: "number", validation: { required: true }, editable: true, nullable: false, format: "{0:n2}" }
}
},
data: function (result) {
return result.rows || result;
},
total: function (result) {
var data = this.data(result);
return result.totalRows || result.length || 0; ;
}
}
},
change: onChange,
dataBound: function (e) {
e.sender.select(e.sender.tbody.find(">tr:first"));
},
selectable: "multiple",
scrollable: true,
filterable: true,
editable: true,
groupable: false,
pageable: {
numeric: true,
pageSizes: true,
previousNext: false
},
sortable: {
mode: "single",
allowUnsort: false
},
height: 400,
columns: [
{ field: "RouteOrderBy", title: "Premise Order", headerAttributes: {
style: "font-size:small; text-align:center"
}, attributes: { style: "text-align:right" }
},
{ field: "PostalCode", title: "Assigned Premises", headerAttributes: {
style: "font-size:small; text-align:center"
}
},
{ field: "Name", title: "Customer", headerAttributes: {
style: "font-size:small; text-align:center"
}
}
]
});
Thank you.
Instead of using change event, you should use save. change is fired when there is a change in the selection of a row not in the value.
For displaying the edited value, the HTML element containing the edited value and the item in the model, you can use:
save : function (e) {
console.log("The values entered by the user.", e.values);
console.log("The jQuery element which is in edit mode.", e.container);
console.log("The edited model.", e.model);
},