I refresh the kendo grid for every 10 seconds, I used following code and I used the kendo.all.min.js
$(document).ready(function () {
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
},
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
This code gives me the output like following screenshot in system chrome,
But in mobile [All devices]
It appends with the old grid, instead of rebinding like following screenshot
I dont know what is problem here, I have googled and used $("#grid").data("kendoGrid").refresh(); this code too. Nothing happend, Any help will be highly appreciable.
Thanks,
Guna
#gitsitgo 's comment, I changed the code as following way, for avoid the re initialization of the grid, and now its working fine.
var myDataSource = new kendo.data.DataSource({
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true },
{ ID: '1003', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
});
$(document).ready(function () {
initGrid();
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
$("#grid").data("kendoGrid").setDataSource(myDataSource);
$("#grid").data("kendoGrid").refresh();
}
function initGrid() {
var grid = $("#grid").kendoGrid({
dataSource: myDataSource,
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
Thanks,
Guna
Related
I'm using jquery-querybuilder to build out a query. I'm currently having an issue with adding in selectize as a plugin to allow for autocomplete inside the select inputs. I'm logging the data in the for loop and it prints out the correct data so I know its physically getting the data, but when typing in the input box, there is still no autocomplete and I'm not quite sure where I went wrong.
let totalMachines = [];
var rules_basic = {
condition: 'AND',
rules: [{
}, {
condition: 'OR',
rules: [{
}, {
}]
}]
};
let options = {
plugins: [],
allow_empty: true,
filters: [
{
id: 'machineName',
label: 'Machine Name',
type: 'string',
input: 'text',
operators: ['equal'],
plugin: 'selectize',
values: {
},
plugin_config: {
valueField: 'id',
labelField: 'machineName',
searchField: 'machineName',
sortField: 'machineName',
create: false,
maxItems:3,
plugins: ['remove_button'],
onInitialize: function() {
var that = this;
totalMachines.forEach(function(item) {
that.addOption(item);
console.log(item)
});
}
},
valueSetter: function(rule, value) {
rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
}
},
]
}
$.ajax({
url: '/api-endpoint',
type: 'GET',
contentType: 'application/json',
dataType: 'json',
success: function(response){
console.log(response)
response.forEach((res) => {
totalMachines.push(res[0])
})
console.log(totalMachines)
}
})
.then(() => {
// Fix for Selectize
$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
if (rule.filter.plugin == 'selectize') {
rule.$el.find('.rule-value-container').css('min-width', '200px')
.find('.selectize-control').removeClass('form-control');
}
});
$('#builder').queryBuilder(options)
})
It would be extremely helpful if someone could help me figure out how to properly configure this plugin, I've looked at every thread and haven't been able to figure it out.
Here is a simple example, using a local datasource, the namesList array
<script>
$(document).ready(function() {
let namesList = [{ id: '1', name: 'andrew' }, { id: '2', name: 'bob' }, { id: '3', name: 'charles' }, { id: '4', name: 'david' }];
let pluginConfig = {
preload: true,
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: namesList,
items: ['2'],
allowEmptyOption: true,
plugins: ['remove_button'],
onInitialize: function () { },
onChange: function (value) {
console.log(value);
},
valueSetter: function (rule, value) {
rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
},
valueGetter: function (rule) {
var val = rule.$el.find('.rule-value-container input')[0].selectize.getValue();
return val.split(',');
}
}
let filterList = [{
id: 'age',
type: 'integer',
input: 'text'
},
{
id: 'id',
label: 'name',
name: 'name',
type: 'string',
input: 'text',
plugin: 'selectize',
plugin_config: pluginConfig
}];
let options = {
allow_empty: true,
operators: ['equal', 'not_equal', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
filters: filterList
}
$('#builder').queryBuilder(options);
// Fix for Selectize
$('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) {
if (rule.filter.plugin == 'selectize') {
rule.$el.find('.rule-value-container').css('min-width', '200px').find('.selectize-control').removeClass('form-control');
}
});
});
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I'm getting array of properties and I want to show all of them in grid.
How to do it? Is it possible?
This is my code:
function StartBuild(ProfileProperties) {
var details = [];
for (i = 0; i < ProfileProperties.length; i++) {
details[i]=[{ name: ProfileProperties[i][0], email: ProfileProperties[i][1], phoneWork: ProfileProperties[i][2], Mobile: ProfileProperties[i][3], ManagerName: ProfileProperties[i][4] }];
}
$(document).ready(function () {
var datasource = new kendo.data.DataSource({
transport: {
type:"odata",
read: function (e) {
e.success(details);
},
pageSize: 10,
batch: false,
schema: {
model: {
fields: {
name: { editable: false },
Fname: { editable: false }
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: datasource,
pegable: true,
sortable: {
mode: "single",
allowUnsort: false
},
columns: [{
field: "name",
title: "name",
filterable: {
cell: {
enabled:true
}
}
}, {//[Bild, nameP, email,phonework, Mobile, ManagerName]
field: "email",
title: "email"
}, {
field: "phoneWork",
title: "phoneWork"
}, {
field: "Mobile",
title: "Mobile"
}, {
field: "Manager",
title: "Manager"
}],
filterable: {
mode: "row"
},
});
});
}
Only if I write details[0] it shows the first properties otherwise it doesn't show anything.
It looks like there are a couple of problems.
http://dojo.telerik.com/#Stephen/uVOjAk
First, the transport setup is incorrect. pageSize, batch, and schema are not part of the transport configuration...you need to take them out of the transport block and just have them in the datasource block.
You want:
var datasource = new kendo.data.DataSource({
transport: {
type:"odata",
read: function (e) {
e.success(details);
}
},
pageSize: 10,
batch: false,
schema: {
model: {
fields: {
name: { editable: false },
Fname: { editable: false }
}
}
}
});
Instead of(what you have):
var datasource = new kendo.data.DataSource({
transport: {
type:"odata",
read: function (e) {
e.success(details);
},
pageSize: 10,
batch: false,
schema: {
model: {
fields: {
name: { editable: false },
Fname: { editable: false }
}
}
}
}
});
Second, the details needs to be an array of objects, not an array of an array of an object.
You want:
var details = [];
for (i = 0; i < ProfileProperties.length; i++) {
details.push({ name: ProfileProperties[i][0], email: ProfileProperties[i][1], phoneWork: ProfileProperties[i][2], Mobile: ProfileProperties[i][3], ManagerName: ProfileProperties[i][4] });
}
Instead of:
var details = [];
for (i = 0; i < ProfileProperties.length; i++) {
details[i]=[{ name: ProfileProperties[i][0], email: ProfileProperties[i][1], phoneWork: ProfileProperties[i][2], Mobile: ProfileProperties[i][3], ManagerName: ProfileProperties[i][4] }];
}
Two other issues that are not directly causing a problem, but are incorrect are:
Your dataSource.schema configuration does not match your actual data at all. The schema really needs to match the fields of the actual data otherwise it cannot match up the configuration.
You spelled "pageable" wrong in the grid configuration.
I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)
I am trying to create a grid builder object. This grid builder has a method, buildGrid, which I've designed to expect an object defining a bunch of paramaters for a grid:
buildOrdersGrid: function () {
var ordersGrid = buildGrid({
gridElementID: 'OrdersGrid',
gridPagerElementID: 'OrdersGridPager',
colNames: ['Order ID', 'Project Subcode', 'Incident Number', 'Cost Center', 'Name', 'Customer'],
colModel: [
{ name: 'ID', hidden: true },
{ name: 'ProjectSubcode' },
{ name: 'IncidentNumber' },
{ name: 'CostCenter' },
{ name: 'Name' },
{ name: 'Customer' }
],
defaultCaption:'Orders: no filter applied',
});
return ordersGrid;
}
function buildGrid(data) {
var grid = $('#' + data.gridElementID);
var gridPager = $('#' + data.gridPagerElementID);
grid.jqGrid({
datatype: 'local',
colNames: data.colNames,
colModel: data.colModel,
gridview: true,
height: 'auto',
pager: gridPager,
viewrecords: true,
multiselect: true,
defaultCaption: data.defaultCaption,
caption: data.defaultCaption,
shrinkToFit: false
});
return grid;
}
Something like that, but it's really new code, so open to advice on how to improve.
Now, I would like to extend this buildGrid method such that it can take non-predefined properties and give them to the jqGrid. Something like:
buildTaskGrid: function () {
var tasksGrid = buildGrid({
gridElementID: 'TasksGrid',
gridPagerElementID: 'TasksGridPager',
colNames: ['Order', 'Task ID', 'Task #', 'Type', 'Status', 'Assignee', 'Current Location', 'Dest Location', 'Change No', 'Net Patched', 'SAN Patched'],
colModel: [
{ name: 'Order' },
{ name: 'TaskID', hidden: true },
{ name: 'TaskNo' },
{ name: 'Type' },
{ name: 'Status' },
{ name: 'Assignee' },
{ name: 'CurrentLocation' },
{ name: 'DestLocation' },
{ name: 'ChangeNo' },
{ name: 'NetPatched' },
{ name: 'SANPatched' }
],
defaultCaption:'Tasks: no filter applied',
//Decorate with task-specific properties.
grouping: true,
groupingView: {
groupField: ['Order'],
groupColumnShow: [false]
},
ondblClickRow: function (rowid) {
$(this).trigger('taskDoubleClicked', selector.getRowData(rowid));
}
});
return tasksGrid;
}
I'm not sure how I should best 'find' the unanticipated properties and give them to the grid. Any ideas?
I think you can use this http://api.jquery.com/jQuery.extend/