or
3 answers
449 views
I have a HTML page that contains a kendo grid showing many pages. I need remember the grid page number inside the kendo grid in code so that I can go back to the grid page from other HTML pages. How can I access the grid page property when the grid page number is clicked?
Thanks in advance.
Thanks in advance.
Alexander Valchev
Telerik team
answered
on
02 Jul 2013
2 answers
410 views
Hi,
I am looking for a way to assign color to a legend field. Please take a look at http://jsfiddle.net/ashriva/Cke4n/3/
In the above example I am trying to assign green color to the "Short" legend element to match its value field; similarly "Long" should be blue and "Flat" red.
Any help is greatly appreciated.
Thanks!
I am looking for a way to assign color to a legend field. Please take a look at http://jsfiddle.net/ashriva/Cke4n/3/
In the above example I am trying to assign green color to the "Short" legend element to match its value field; similarly "Long" should be blue and "Flat" red.
Any help is greatly appreciated.
Thanks!
Iliana Dyankova
Telerik team
answered
on
02 Jul 2013
4 answers
508 views
I'm trying to do use the hierarchical aspect of the Kendo Grid. What I'm unable to find out is if when I make the Detail template do the children need to be already loaded from my repository? I thought since there was a Data-source it would make the call to the server get the children when it was loading. The Template grid has is null and there are no query strings (as followed by the example) Can I get some clarification on this please?
Alexander Valchev
Telerik team
answered
on
02 Jul 2013
2 answers
1.2K+ views
Is there a client-side method to force a tree node to clear and then re-load (or refresh) all child nodes? I am dynamically loading a tree view and it's child nodes via AJAX. When I add a node, I call another AJAX method to add the node to my database. I would like the treeview/node to then refresh itself and automatically call the dataSource.read method for the node.
Thank you.
*** EDIT ***
I have found a solution that mostly works:
var treeView = $('#catalogTreeView').data('kendoTreeView');
var selectedNode = treeView.select();
var selectedDataItem = treeView.dataItem(selectedNode);
treeView.collapse(selectedNode);
selectedDataItem.loaded(false);
treeView.expand(selectedNode);
However, the expand does not always work and the node stays collapsed. Is this the correct way to do this, or is there a preferred method?
Thank you.
*** EDIT ***
I have found a solution that mostly works:
var treeView = $('#catalogTreeView').data('kendoTreeView');
var selectedNode = treeView.select();
var selectedDataItem = treeView.dataItem(selectedNode);
treeView.collapse(selectedNode);
selectedDataItem.loaded(false);
treeView.expand(selectedNode);
However, the expand does not always work and the node stays collapsed. Is this the correct way to do this, or is there a preferred method?
0 answers
64 views
EDIT: solved with 2013Q1 by adding grid.wrapper.empty()
Sorry, I cannot get this working on jsBin but it works locally on my PC. It should be easy enough to assemble on your end.
In addition to grouping issue, the column-sort seems to have three modes: A-Z, Z-A, and random order.
Am I doing something wrong, or incompletely, when I destroy the grid in my SimulateSearchResults function?
NOTE: This problem is with 2012 version. When I use 2013 Q1, different issue -- a phantom column is created.
<body>
<div>
Wait until you see the both datasets created message before clicking these buttons.<br />
First click [First Dataset] button and try to group by City. Success. It works.<br />
Then click [Second Dataset] button and notice that grouping by City is disabled.<br />
<input type="button" onclick="javascript: SimulateSearchResults('one');" value="first dataset" />
<input type="button" onclick="javascript: SimulateSearchResults('two');" value="second dataset" />
<div id="grid">
</div>
</div>
</body>
file: ui.js
var datasets = {};
var points = [100, 120, 150, 220, 265, 340, 385, 388, 415, 426, 450, 471, 511, 522, 555, 616, 455, 483, 699, 700, 825, 850, 875, 900, 925, 935, 977, 1000];
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nigel", "Henry", "Harry", "Joe", "Tom", "Bill"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White", "Green", "Black", "Jones", "Reed"];
var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
var birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
function generatePeople(itemCount, which) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
//setTimeout(function () {
starttime = +new Date();
do {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear(),
point = points[Math.floor(Math.random() * points.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age,
Points: point
});
} while (data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
//callback(data);
datasets[which] = data;
alert('dataset ' + which + ' created');
}
//}, delay);
}
$(document).ready(function () {
generatePeople(1000, 'one');
generatePeople(1000, 'two');
});
function SimulateSearchResults(which) {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
configureGrid(datasets[which]);
}, 222);
}
function configureGrid(data) {
$("#grid").kendoGrid({
dataSource: {
data: data,
aggregate: [
{ field: "Points", aggregate: "sum" }
]
},
groupable: true,
sortable: true,
height: 400,
pageSize: 22,
columns: [{
field: "FirstName",
groupable: false,
width: "150px",
title: "firstname"
}, {
field: "LastName",
width: "200px",
title: "lastname",
groupable: false
}, {
width: "200px",
field: "City",
title: "city",
groupable: true
},
{
width: "125px",
field: "Points",
title: "points",
aggregates: ["sum"],
footerTemplate: "Points for all Cities: #: data.Points.sum #",
groupFooterTemplate: "Points: #: data.Points.sum #"
}
]
});
}
Sorry, I cannot get this working on jsBin but it works locally on my PC. It should be easy enough to assemble on your end.
In addition to grouping issue, the column-sort seems to have three modes: A-Z, Z-A, and random order.
Am I doing something wrong, or incompletely, when I destroy the grid in my SimulateSearchResults function?
NOTE: This problem is with 2012 version. When I use 2013 Q1, different issue -- a phantom column is created.
<body>
<div>
Wait until you see the both datasets created message before clicking these buttons.<br />
First click [First Dataset] button and try to group by City. Success. It works.<br />
Then click [Second Dataset] button and notice that grouping by City is disabled.<br />
<input type="button" onclick="javascript: SimulateSearchResults('one');" value="first dataset" />
<input type="button" onclick="javascript: SimulateSearchResults('two');" value="second dataset" />
<div id="grid">
</div>
</div>
</body>
file: ui.js
var datasets = {};
var points = [100, 120, 150, 220, 265, 340, 385, 388, 415, 426, 450, 471, 511, 522, 555, 616, 455, 483, 699, 700, 825, 850, 875, 900, 925, 935, 977, 1000];
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nigel", "Henry", "Harry", "Joe", "Tom", "Bill"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White", "Green", "Black", "Jones", "Reed"];
var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
var birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
function generatePeople(itemCount, which) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
//setTimeout(function () {
starttime = +new Date();
do {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear(),
point = points[Math.floor(Math.random() * points.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age,
Points: point
});
} while (data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
//callback(data);
datasets[which] = data;
alert('dataset ' + which + ' created');
}
//}, delay);
}
$(document).ready(function () {
generatePeople(1000, 'one');
generatePeople(1000, 'two');
});
function SimulateSearchResults(which) {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
configureGrid(datasets[which]);
}, 222);
}
function configureGrid(data) {
$("#grid").kendoGrid({
dataSource: {
data: data,
aggregate: [
{ field: "Points", aggregate: "sum" }
]
},
groupable: true,
sortable: true,
height: 400,
pageSize: 22,
columns: [{
field: "FirstName",
groupable: false,
width: "150px",
title: "firstname"
}, {
field: "LastName",
width: "200px",
title: "lastname",
groupable: false
}, {
width: "200px",
field: "City",
title: "city",
groupable: true
},
{
width: "125px",
field: "Points",
title: "points",
aggregates: ["sum"],
footerTemplate: "Points for all Cities: #: data.Points.sum #",
groupFooterTemplate: "Points: #: data.Points.sum #"
}
]
});
}
1 answer
228 views
Hi
I'm trying to convert my site to utilise Kendo Grid, I'm trying to add a <div> that calls a javascript onClick using Column template but the javascript isn't being called. I suspect that it might have to do with how the data is loaded. Any idea on how I can add a clickable div through column template.
Also, how do i utilise Template instead of ClientTemplate ? what are the differences ?
I'm trying to convert my site to utilise Kendo Grid, I'm trying to add a <div> that calls a javascript onClick using Column template but the javascript isn't being called. I suspect that it might have to do with how the data is loaded. Any idea on how I can add a clickable div through column template.
Also, how do i utilise Template instead of ClientTemplate ? what are the differences ?
<%: Html.Kendo().Grid<CIS.Models.Patients.PatientModel>() .Name("grid") .DataSource(dataSource => dataSource // Configure the grid data source .Ajax() // Specify that ajax binding is used .Read(read => read.Action("t1", "ttt")) // Set the action method which will return the data in JSON format .PageSize(25) ) .Columns(columns => { columns.Bound(p => p.ID).ClientTemplate( CIS.Models.Helpers.Controls.IconLink("Open", "ui-icon icon-folder-open", "ViewPatient", "Patients", new { patientID = "#= ID #" }) + "<div title=\"Edit\" class=\"ui-icon icon-pencil edit-patient-btn\" patientID=\"#= ID #\" style=\"display: inline-block\"> </div>"+ "<div title=\"Remove\" class=\"ui-icon icon-trash remove-patient-btn\" patientID=\"#= ID #\" style=\"display: inline-block\"> </div>" ).Title(""); columns.Bound(p => p.initials).Title("Initial"); columns.Bound(p => p.dateOfBirth).Format("{0:dd/MM/yy}").Title("Date of Birth"); columns.Bound(p => p.gender).Title("Gender"); }) .Pageable() .Sortable() %>
Iliana Dyankova
Telerik team
answered
on
01 Jul 2013
1 answer
308 views
Hi,
I want to diable in-cell editing. I.E., I do not want user to double click on the cell and edit it.
However, if i disable editable, I am not able to perform row remove.
I have added remove functionality and edit functionality in a column like in this example.
http://demos.kendoui.com/web/grid/editing-inline.html
I am not using editable: "inline", in stead I am using editable: "true"
Because I want to prevent default
(e.preventDefault) and write my own functionality.
Can you help me with this
All I want is
1. Non-Editable cells
2. Edit and Delete works as per above example
3. Edit default functionality to be overwritten with mine
Please help me with this
Thank you
I want to diable in-cell editing. I.E., I do not want user to double click on the cell and edit it.
However, if i disable editable, I am not able to perform row remove.
I have added remove functionality and edit functionality in a column like in this example.
http://demos.kendoui.com/web/grid/editing-inline.html
I am not using editable: "inline", in stead I am using editable: "true"
Because I want to prevent default
(e.preventDefault) and write my own functionality.
Can you help me with this
All I want is
1. Non-Editable cells
2. Edit and Delete works as per above example
3. Edit default functionality to be overwritten with mine
Please help me with this
Thank you
Kiril Nikolov
Telerik team
answered
on
01 Jul 2013
6 answers
67 views
I have mis-wired up my update call...so in firebug I see the ajax call just tank, however the client object updates perfectly fine...idea is there's no "save" button changes are reflected instantly.
Am I missing this option in the docs? autoSync doesn't seem to do it (or maybe is *causing* it)
Steve
Am I missing this option in the docs? autoSync doesn't seem to do it (or maybe is *causing* it)
Steve
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
Rank 2
Iron
Iron
Veteran
answered
on
01 Jul 2013
5 answers
302 views
Hi,
I've created a Scatter chart in ASP.NET MVC with the code below:
The above is calling a method in the Products controller below:
The chart will refresh when a new country is selected by the script below:
However, the page will freeze at times due to a "long running script". The DataSource of the chart calls the action GetProductsCountByCountry and groups the data. I want to do the grouping on the server side but I'm not sure how to change the code for my chart for dynamic series without doing what I'm currently doing.
This is the first time I'm using Kendo DataViz and I really could use some help.
Thanks!
I've created a Scatter chart in ASP.NET MVC with the code below:
@(Html.Kendo().Chart<GIPM.DAL.ViewModels.ProductsCountByCountryYear>() .Name("linechart") .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .DataSource(ds => ds .Read(read => read.Action("GetProductsCountByCountry", "Products", new { country = ""})) .Group(group => group.Add(model => model.Country)) .Sort(sort => sort.Add(model => model.Year).Ascending()) ) .Series(series => { series.ScatterLine(model => model.Year, model => model.Count) .Name("Country") .GroupNameTemplate("#= group.value #"); }) .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .YAxis(axis => axis.Numeric() .Labels(labels => labels .Format("{0}") ) .MajorUnit(1) ) .XAxis(axis => axis.Date() .Labels(labels => labels.Format("{0}")) .MajorUnit(1) ))public ActionResult GetProductsCountByCountry( string country)
{var query = _customsService.GetExportSeizedCountByCountry(country);return Json(query, JsonRequestBehavior.AllowGet);
}$("#chart").data("kendoChart").dataSource.read({ country: strcountry });However, the page will freeze at times due to a "long running script". The DataSource of the chart calls the action GetProductsCountByCountry and groups the data. I want to do the grouping on the server side but I'm not sure how to change the code for my chart for dynamic series without doing what I'm currently doing.
This is the first time I'm using Kendo DataViz and I really could use some help.
Thanks!
Sebastian
Telerik team
answered
on
01 Jul 2013
5 answers
256 views
Hi,
My Phonegap/Cordova app uses several remote views, many use a button to call a method to process user input and move on to a different remote view page. (i.e. <button class="btn-right" data-role="button" data-bind="click: chkInfoChangePage">Submit</button>) If I sooner or later programmatically navigate back to the page ( e.g. app.navigate("enteryourinfo.html");). the button that was originally touched to leave the page still shows the touch highlighting. I would like to reset that if I return to a page.
I tried setting data-reload="true" which does refresh the highlighting when it works, but I often get an error: "Uncaught TypeError: Cannot call method 'destroy' of undefined at file:///android_asset/www/js/kendo.mobile.min.js:13" Removing the data-reload="true" prevents the error.
I often use MVVM data binding to a simple JavaScript observable object, but it happens even to non-bound pages. Other than the persistent highlighting, I don't NEED to reload the page, but would like to have the option to do so.
Can someone point out what I am doing wrong; how do I untouch a button after I have processed the onclick event?
Thanks,
Kevin
My Phonegap/Cordova app uses several remote views, many use a button to call a method to process user input and move on to a different remote view page. (i.e. <button class="btn-right" data-role="button" data-bind="click: chkInfoChangePage">Submit</button>) If I sooner or later programmatically navigate back to the page ( e.g. app.navigate("enteryourinfo.html");). the button that was originally touched to leave the page still shows the touch highlighting. I would like to reset that if I return to a page.
I tried setting data-reload="true" which does refresh the highlighting when it works, but I often get an error: "Uncaught TypeError: Cannot call method 'destroy' of undefined at file:///android_asset/www/js/kendo.mobile.min.js:13" Removing the data-reload="true" prevents the error.
I often use MVVM data binding to a simple JavaScript observable object, but it happens even to non-bound pages. Other than the persistent highlighting, I don't NEED to reload the page, but would like to have the option to do so.
Can someone point out what I am doing wrong; how do I untouch a button after I have processed the onclick event?
Thanks,
Kevin
Meesha
Top achievements
Rank 1
Rank 1
answered
on
01 Jul 2013
