or
2 answers
1.3K+ 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
104 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
277 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
350 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
109 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
338 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
320 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
1 answer
188 views
Dear KendoUI Team!
I hope you can help me out. I want to update some Editor Templates from the old Telerik Controls. I am using ASP.Net MVC 4.
My Editor Template looks like this
What I want to do is to set the value of the Textbox in the Change Event of the Combo-Box. My Approach is using .val()
$(elementName).val(e.sender.dataItem().Value);
The value displayed in the Textbox is changed then. BUT: The value transfered to the server is the old value of the Textbox.
Example:
The field has the value "US". I edit the row. I change the value to "CN" using the Combobox. "CN" is now displayed in the textbox in edit mode. When I want to update the row, "US" is provided as the value for the field in the model.
Is there a way to make kendoUI transfer the values that are displayed?
brgds
Malcolm Howlett?
I hope you can help me out. I want to update some Editor Templates from the old Telerik Controls. I am using ASP.Net MVC 4.
My Editor Template looks like this
@model string@using System.Collections<div style="white-space:nowrap;"> @Html.TextBoxFor(m => m, new { onclick = "setInvisible(\"SplitCountryList#=Rid#\")", onfocus = "setInvisible(\"SplitCountryList#=Rid#\")", id = "CoPrefSplit#=Rid#" }) <button id="SplitCountryDisplay" onclick="setVisibleAndFocus('\\#SplitCountryList#=Rid#','\\#SplitCountryCombo-input')" style="background-color:White; width: 20px; height:22px; font-size: 6pt">...</button></div><div id="SplitCountryList#=Rid#" style="position: absolute; overflow:visible; width:250px; z-index:99; margin-top: 0px; visibility:hidden;">@(Html.Kendo().ComboBox .Name("SplitCountryCombo#=Rid#") .BindTo(new SelectList((IEnumerable)ViewData["Countries"], "Code", "DisplayName")) .HtmlAttributes(new {@ArticleID = "#=Rid#"}) .Filter(FilterType.Contains) .Events(events => events .Change("onSplitCountryChanged") ) )</div>What I want to do is to set the value of the Textbox in the Change Event of the Combo-Box. My Approach is using .val()
$(elementName).val(e.sender.dataItem().Value);
The value displayed in the Textbox is changed then. BUT: The value transfered to the server is the old value of the Textbox.
Example:
The field has the value "US". I edit the row. I change the value to "CN" using the Combobox. "CN" is now displayed in the textbox in edit mode. When I want to update the row, "US" is provided as the value for the field in the model.
Is there a way to make kendoUI transfer the values that are displayed?
brgds
Malcolm Howlett?
2 answers
183 views
Hi there,
After successfully creating a sparkline with localdata, i am trying to then change the data in the spark line and refresh it.
I have tried setting the data directly and then using refresh as well as using the setDataSource method but have had no luck so far.
I have created an example in the link below which demonstrates the issue.
So when you click the "refresh new data" the data in the sparkline does not change.
http://jsbin.com/atezoj/36/edit
Is it possible to do this or do i need to dispose of the sparkline and create a new one with new data?
Thanks,
Rob
After successfully creating a sparkline with localdata, i am trying to then change the data in the spark line and refresh it.
I have tried setting the data directly and then using refresh as well as using the setDataSource method but have had no luck so far.
I have created an example in the link below which demonstrates the issue.
So when you click the "refresh new data" the data in the sparkline does not change.
http://jsbin.com/atezoj/36/edit
Is it possible to do this or do i need to dispose of the sparkline and create a new one with new data?
Thanks,
Rob
1 answer
822 views
Hello
I'm trying to solve some annoying issues related to Grid Pop-up Editing Validation:
1. Most annoying is validation errors are hiding my fields so user cannot edit anything - see screen shots. I need to display this error message in more user friendly way - e.g on the right side of input, but I cannot achieve that.
2. All validations are based on custom validation so when focus is lost it is not fired - how to force such validation.
My template is looking like that:
java script for e.g. sortcode validation is - this part of dataSource schema:
The validation messages are only show on Update button.
3. Errors from server - how to display them in the same way as client side validation messages. (I'm using MVC- but usually with plain JavaScript without wrappers). I'm parsing errors in following way and display them in alert, I want to display them in line and prevent close form on update.
I'm trying to solve some annoying issues related to Grid Pop-up Editing Validation:
1. Most annoying is validation errors are hiding my fields so user cannot edit anything - see screen shots. I need to display this error message in more user friendly way - e.g on the right side of input, but I cannot achieve that.
2. All validations are based on custom validation so when focus is lost it is not fired - how to force such validation.
My template is looking like that:
<div> <div class="k-edit-label">Sort Code: </div> <div class="k-edit-field"> <input class="k-input k-textbox" type="text" name="SortCode" data-bind="value: SortCode" data-sortcodelength-msg="Sort Code should be empty or have 6 digits." onkeypress="return isNumber(event)" pattern="[0-9]*" type="tel"> </div> </div> <div> <div class="k-edit-label">Account Number: </div> <div class="k-edit-field"> <input class="k-input k-textbox" type="text" name="AccountNumber" data-bind="value: AccountNumber" data-accountnumberlength-msg="Account Number should be empty or between 8-10 digits." data-accountnumbervalid-msg="Account Number is invalid." onkeypress="return isNumber(event)" pattern="[0-9]*" type="tel"> </div> </div> <div> <div class="k-edit-label">Action: </div> <div class="k-edit-field"> <input name="Success" required="required" data-text-field="text" data-value-field="value" data-bind="value: Success" data-required-msg="Action is required." /> </div> </div>SorCode: { type: "string", nullable: true, validation: { sortCodeLength: function (input) { if (input.attr("name") == "SortCode") { var strSortCode = input.val(); if (strSortCode.length === 0) { return true; } if (!isNum.test(strSortCode)) { return false; } if (strSortCode.length != 6) { return false; } } return true; } } },3. Errors from server - how to display them in the same way as client side validation messages. (I'm using MVC- but usually with plain JavaScript without wrappers). I'm parsing errors in following way and display them in alert, I want to display them in line and prevent close form on update.
error: function (e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } else { //alert("An error occured during saving call back."); } }
Daniel
Telerik team
answered
on
01 Jul 2013
