or
1 answer
123 views
In many of my posts I can't mark the post as answered. I get a 500 server error:
Here's an example, clicking the Mark as ANswered here throws the error
http://www.kendoui.com/forums/kendo-ui-dataviz/chart/make-columns-fat-when-few-used-in-mvc.aspx
Here's an example, clicking the Mark as ANswered here throws the error
http://www.kendoui.com/forums/kendo-ui-dataviz/chart/make-columns-fat-when-few-used-in-mvc.aspx
Ralitsa Peneva
Telerik team
answered
on
24 Jul 2013
1 answer
639 views
Hi
I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?
Note - there will always be four ranges, its just where these start and stop is where I want to regulate.
I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?
Note - there will always be four ranges, its just where these start and stop is where I want to regulate.
@(Html.Kendo().RadialGauge().Name("testRadialGauge").Pointer(pointer => pointer.Value(0).Color("Blue")).Scale(scale => scale.MinorUnit(200).StartAngle(-30).EndAngle(210).Max(5000).Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels.Visible(true)
).Ranges(ranges =>{ranges.Add().From(0).To(800).Color("#c20000");ranges.Add().From(800).To(1600).Color("#ff7a00");ranges.Add().From(1600).To(2000).Color("#ffc700");ranges.Add().From(2000).To(5000).Color("green");}))
)
Iliana Dyankova
Telerik team
answered
on
24 Jul 2013
4 answers
93 views
I have a simple set of charts that are in Windows working great under 2013.2. I upgraded to 2013.3 and now the Windows appears and the chart's X and Y axis, legend and labels on the axis appear, but the data is not rendered, the charts are empty. See attached image. It was working fine in 2013.2 but after I ran the 2013.3 update it stopped working. In the html output, the data is there serialized in json, it's just the lines and bars of the chart no longer appear.
I have experimented by removing as much of the settings for a chart and window as I can, but still, no data appears.
.Name(windowId)
.Width(680)
.Height(430)
.Title(Model.ChartTitle)
.Visible(false)
.Modal(true)
.Draggable(true)
.Content(@<text>
Here's the data Kendo's MVC wrapper writes to HTML:
I have experimented by removing as much of the settings for a chart and window as I can, but still, no data appears.
Html.Kendo().Window().Width(680)
.Height(430)
.Title(Model.ChartTitle)
.Visible(false)
.Modal(true)
.Draggable(true)
.Content(@<text>
@{ Html.Kendo().Chart<AccountPerformance>(Model.Results) .Name("chartPCT") .Title("% Return") .Series(series => series.Column(model => model.Metrics.Return) .Name(Model.ColumnTitle)) .ValueAxis(axis => axis.Numeric()) .CategoryAxis(axis => axis.Date().Categories(model => model.Observation)) .Render();}Here's the data Kendo's MVC wrapper writes to HTML:
<div class="k-chart" id="chartPCT"></div><script> jQuery(function(){jQuery("#chartPCT").kendoChart({"title":{"text":"% Return"},"series":[{"name":"Month","type":"column","field":"Metrics.Return"}],"categoryAxis":[{"type":"Date","categories":["2013/01/31 00:00:00","2013/02/28 00:00:00","2013/03/31 00:00:00","2013/04/30 00:00:00","2013/05/31 00:00:00"]}],"dataSource":{"schema":{"model":{"fields":{"Granularity":{"type":"number"},"GranularityName":{"editable":false,"type":"string"},"Observation":{"type":"date"},"ObservationDescription":{"type":"string"},"IsTimeSeries":{"type":"boolean"},"Metrics":{"type":"object"},"ObservationDisplay":{"editable":false,"type":"string"}}}},"data":[{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1359619200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370505.870000,"NetInvested":494.280000,"Return":2.740981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"January"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1362038400000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":373901.670000,"NetInvested":284.740000,"Return":0.839149,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"February"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1364713200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":370930.070000,"NetInvested":0.000000,"Return":-0.794754,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"March"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1367305200000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":361961.050000,"NetInvested":0.000000,"Return":-2.417981,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"April"},{"Granularity":0,"GranularityName":"Monthly","Observation":"\/Date(1369983600000)\/","ObservationDescription":null,"IsTimeSeries":true,"Metrics":{"MarketValue":368352.560000,"NetInvested":0.000000,"Return":1.765800,"HasMarketValue":true,"HasNetInvested":true},"ObservationDisplay":"May"}]}});});</script> </div><script> jQuery(function(){jQuery("#window_Monthly").kendoWindow({"modal":true,"iframe":false,"draggable":true,"pinned":false,"title":"Monthly Performance - Account ","resizable":false,"content":null,"width":680,"height":430,"actions":["Close"]});});</script>
T. Tsonev
Telerik team
answered
on
24 Jul 2013
2 answers
342 views
Hello,
On a form submission I am dynamically creating a chart in javascript, using remote datasource (json/GET). When user clicks a "Close" button, I destroy the chart, and empty the DOM element. When a user submits the form again with different data, I create the chart again and load it with the new data.
The problem is this: after I destroyed the chart, when the form is submitted and I create a chart again - it instantly animates with the previous search data, as if the series have been cached! (Datasource ajax request is shown as Pending at this time on the Network tab in Chrome) Two seconds later, when the ajax request is complete, the chart is refreshed with the new set of data.
Here is my code. Chart creation function:
Chart destroy function:
HTML:
I am using JQuery 1.9.1 and KendoUI v2013.1.514, in Chrome.
Could you please advise? Thankyou, Kate.
On a form submission I am dynamically creating a chart in javascript, using remote datasource (json/GET). When user clicks a "Close" button, I destroy the chart, and empty the DOM element. When a user submits the form again with different data, I create the chart again and load it with the new data.
The problem is this: after I destroyed the chart, when the form is submitted and I create a chart again - it instantly animates with the previous search data, as if the series have been cached! (Datasource ajax request is shown as Pending at this time on the Network tab in Chrome) Two seconds later, when the ajax request is complete, the chart is refreshed with the new set of data.
Here is my code. Chart creation function:
function createChart(id, search_type, breakdown) { // Read data from the form
var data = $('#form-search_analytics').serialize(); $("#loading"+id).show(); $('#'+id).kendoChart({ dataSource: { transport: { read: { url: '<?php echo $this->url('analytics/default', array('controller'=>'index', 'action'=>'ajax-get-chart-data')) ?>?type='+search_type+'&'+data, dataType: "json", type: "GET", cache: false } } }, dataBound: function(){ console.log('#loading-'+id); $('#loading-'+id).hide(); }, seriesClick: function(e) { console.log(e.series.name); loadSeriesBreakdownPanel(e.series.name, search_type, data); }, title: { text: search_type }, legend: { position: "right" }, seriesDefaults: { type: "area", //type: "line" stack:true }, series: series[search_type], categoryAxis: { field: "Date", labels: { rotation: -30 } }, valueAxis: { labels: { format: "N0" } }, tooltip: { visible: true, format: "N0", template: "#: series.name #: #: value #" } });}function handleCloseClick() { $('.analytics-chart.k-chart').each(function(){ var id = $(this).attr('id'); var chart = $('#'+id).data("kendoChart"); chart.destroy(); $('#'+id).empty(); });}<div id="results"> <div class="chart-panel"> <h3>Breakdown by Document</h3> <div class="analytics-chart" id="chart-Document" data-type="Document"></div> <div id="loading-chart-Document"></div> </div></div>Could you please advise? Thankyou, Kate.
Hristo Germanov
Telerik team
answered
on
24 Jul 2013
3 answers
1.6K+ views
In MVC, can the DropDownList have its width changed?
I've seen posts on how to do it on the client, but would rather have it at the MVC level.
I've seen posts on how to do it on the client, but would rather have it at the MVC level.
Iliana Dyankova
Telerik team
answered
on
24 Jul 2013
1 answer
4.3K+ views
Currently to get the value of the selected item in the onSelect event I do this:
My MVC DropDownList value data is bound to the "AccountNumberId" field.
Is this the proper way to do it, or is there an easier .GetValue() I can call the the "e" passed to onSelect perhaps?
var onSelect = function (e) { var dataItem = this.dataItem(e.item.index()); CCCOnline.changeAccount(dataItem.AccountNumberId);};$("#clientAcctsMenuKendo").data("kendoDropDownList").bind("select", onSelect);My MVC DropDownList value data is bound to the "AccountNumberId" field.
Is this the proper way to do it, or is there an easier .GetValue() I can call the the "e" passed to onSelect perhaps?
Marco Antonio
Top achievements
Rank 1
Rank 1
answered
on
24 Jul 2013
1 answer
620 views
I'm porting an existing site. in MVC
When the DropDownList Change event fires, I need the DDL to call an existing Function:
This DLL works, but the Change doesn't work, but lets you see the function I need to call:
So the DLL needs to send itself to "CCCOnline.changeAccount(this);"
When the DropDownList Change event fires, I need the DDL to call an existing Function:
This DLL works, but the Change doesn't work, but lets you see the function I need to call:
@(Html.Kendo().DropDownList() .Name("clientMenu") .BindTo(Model.ClientAccountList) .DataValueField("Serialized") .DataTextField("Display") .Events(e => e.Change("CCCOnline.changeAccount(this);")) .Value(selected))So the DLL needs to send itself to "CCCOnline.changeAccount(this);"
Marco Antonio
Top achievements
Rank 1
Rank 1
answered
on
24 Jul 2013
1 answer
151 views
I have two grids, each with a detail template, all pulling from different data sources.
If I comment out one or the other, I get no errors on either. If have them both render, the second grid gives an error 'PaymentId' is not defined when try to expand the row into detail. There is no PaymentId in any of the code for the second grid. I'm including the code for both grids is below.
Any help is greatly appreciated as I've been trying to hunt it down for hours but having no luck.
-- Second Grid ---
If I comment out one or the other, I get no errors on either. If have them both render, the second grid gives an error 'PaymentId' is not defined when try to expand the row into detail. There is no PaymentId in any of the code for the second grid. I'm including the code for both grids is below.
Any help is greatly appreciated as I've been trying to hunt it down for hours but having no luck.
@model Domain.Loan@(Html.Kendo().Grid<AmortizationScheduleGridModel>() .Name("AmortizationScheduleGrid") .Columns(columns => { columns.Bound(p => p.AmortizationLineId).Visible(false); columns.Bound(p => p.LineNumber); columns.Bound(p => p.PrincipalPaid).Title("Principal").Format("{0:c}") .ClientTemplate("# if (!IsPrincipalSatisfied) { #" + "<span class='not-satisfied'>" + "#=PrincipalPaid#" + "</span>" + "<span class='expected'> (#=PrincipalExpected#)</span>" + "# } else { #" + "<span class='satisfied'>" + "#=PrincipalPaid#" + "</span>" + " <span class='expected'>(#=PrincipalExpected#)</span>" + "# } #") .ClientFooterTemplate("<b>#=sum#</b><input id='pmtTotal' type='hidden' value='#=sum#' />"); columns.Bound(p => p.InterestPaid).Format("{0:c}"); columns.Bound(p => p.LateFeesPaid).Format("{0:c}"); columns.Bound(p => p.SpecialFeesPaid).Format("{0:c}"); columns.Bound(p => p.SpecialFeesComments); columns.Bound(p => p.AmortizationPrincipalBalance); columns.Bound(p => p.ActualPrincipalBalance); }) .ClientDetailTemplateId("paymentApplicationTemplate") .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Aggregates(agg => { agg.Add(al => al.PrincipalPaid).Sum(); }) .Read(read => read.Action("CustomerAmortizationScheduleRead", "Payments", new { loanId = Model.Id })) ) .Events(ev => ev.DataBound("amoritzationDataBound")) .ToolBar(tb => { tb.Custom().Action<PaymentsController>(pc => pc.PrintLoanPayments(Model.Id)).Text("Print").Name("Print"); tb.Template("<button type='button' class='k-button k-button-icontext' onclick='toggleAmortizationPayments()'>Toggle Open</button>"); }) )<script id="paymentApplicationTemplate" type="text/kendo-tmpl"> @(Html.Kendo().Grid<PaymentApplicationModel>() .Name("paymentApplication_#=AmortizationLineId#") .Columns(columns => { columns.Bound(p => p.PaymentApplicationId).Visible(false); columns.Bound(p => p.DueDate).Title("Due").Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.AmortizationLineNumber).Title("Line"); columns.Bound(p => p.PrincipalApplied).Title("Principal").Format("{0:c}") .ClientTemplate("\\# if (!IsPrincipalSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + "<span class='expected'> (\\#=PrincipalExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + " <span class='expected'>(\\#=PrincipalExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.InterestApplied).Title("Interest").Format("{0:c}") .ClientTemplate("\\# if (!IsInterestSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + "<span class='expected'> (\\#=InterestExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + " <span class='expected'>(\\#=InterestExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.LateFeesApplied).Title("Late").Format("{0:c}") .ClientTemplate("\\# if (!IsLateFeeSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=LateFeesExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=LateFeesExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.SpecialFeesApplied).Title("Special Fees").Format("{0:c}").ClientTemplate("\\# if (!IsSpecialFeeSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=SpecialFeesExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=SpecialFeesExpected\\#)</span>" + "\\# } \\#"); }) .DataSource(dataSource => dataSource .Ajax() .PageSize(5) .Read(read => read.Action("PaymentApplicationsReadByAmortizationLine", "Payments", new { amortizationLineId = "#=AmortizationLineId#" })) ) .ToClientTemplate() )</script><script type="text/javascript"> var amortizationPaymentsExpanded = false; function amoritzationDataBound() { } function toggleAmortizationPayments() { var paymentHistoryGrid = $("#AmortizationScheduleGrid").data("kendoGrid"); if (!amortizationPaymentsExpanded) { paymentHistoryGrid.expandRow(paymentHistoryGrid.tbody.find("tr.k-master-row")); amortizationPaymentsExpanded = true; } else { paymentHistoryGrid.collapseRow(paymentHistoryGrid.tbody.find("tr.k-master-row")); amortizationPaymentsExpanded = false; } }</script>-- Second Grid ---
@model Tristate.Domain.Loan<style> .k-grid td { font-size: 12px; }</style>@(Html.Kendo().Grid<AmortizationScheduleGridModel>() .Name("AmortizationScheduleGrid") .Columns(columns => { columns.Bound(p => p.AmortizationLineId).Visible(false); columns.Bound(p => p.LineNumber); columns.Bound(p => p.PrincipalPaid).Title("Principal").Format("{0:c}") .ClientTemplate("# if (!IsPrincipalSatisfied) { #" + "<span class='not-satisfied'>" + "#=PrincipalPaid#" + "</span>" + "<span class='expected'> (#=PrincipalExpected#)</span>" + "# } else { #" + "<span class='satisfied'>" + "#=PrincipalPaid#" + "</span>" + " <span class='expected'>(#=PrincipalExpected#)</span>" + "# } #") .ClientFooterTemplate("<b>#=sum#</b><input id='pmtTotal' type='hidden' value='#=sum#' />"); columns.Bound(p => p.InterestPaid).Format("{0:c}"); columns.Bound(p => p.LateFeesPaid).Format("{0:c}"); columns.Bound(p => p.SpecialFeesPaid).Format("{0:c}"); columns.Bound(p => p.SpecialFeesComments); columns.Bound(p => p.AmortizationPrincipalBalance); columns.Bound(p => p.ActualPrincipalBalance); }) .ClientDetailTemplateId("paymentApplicationTemplate") .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Aggregates(agg => { agg.Add(al => al.PrincipalPaid).Sum(); }) .Read(read => read.Action("CustomerAmortizationScheduleRead", "Payments", new { loanId = Model.Id })) ) .Events(ev => ev.DataBound("amoritzationDataBound")) .ToolBar(tb => { tb.Custom().Action<PaymentsController>(pc => pc.PrintLoanPayments(Model.Id)).Text("Print").Name("Print"); tb.Template("<button type='button' class='k-button k-button-icontext' onclick='toggleAmortizationPayments()'>Toggle Open</button>"); }) )<script id="paymentApplicationTemplate" type="text/kendo-tmpl"> @(Html.Kendo().Grid<PaymentApplicationModel>() .Name("paymentApplication_#=AmortizationLineId#") .Columns(columns => { columns.Bound(p => p.PaymentApplicationId).Visible(false); columns.Bound(p => p.DueDate).Title("Due").Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.AmortizationLineNumber).Title("Line"); columns.Bound(p => p.PrincipalApplied).Title("Principal").Format("{0:c}") .ClientTemplate("\\# if (!IsPrincipalSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + "<span class='expected'> (\\#=PrincipalExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + " <span class='expected'>(\\#=PrincipalExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.InterestApplied).Title("Interest").Format("{0:c}") .ClientTemplate("\\# if (!IsInterestSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + "<span class='expected'> (\\#=InterestExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + " <span class='expected'>(\\#=InterestExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.LateFeesApplied).Title("Late").Format("{0:c}") .ClientTemplate("\\# if (!IsLateFeeSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=LateFeesExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=LateFeesExpected\\#)</span>" + "\\# } \\#"); columns.Bound(p => p.SpecialFeesApplied).Title("Special Fees").Format("{0:c}").ClientTemplate("\\# if (!IsSpecialFeeSatisfied) { \\#" + "<span class='not-satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=SpecialFeesExpected\\#)</span>" + "\\# } else { \\#" + "<span class='satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=SpecialFeesExpected\\#)</span>" + "\\# } \\#"); }) .DataSource(dataSource => dataSource .Ajax() .PageSize(5) .Read(read => read.Action("PaymentApplicationsReadByAmortizationLine", "Payments", new { amortizationLineId = "#=AmortizationLineId#" })) ) .ToClientTemplate() )</script><script type="text/javascript"> var amortizationPaymentsExpanded = false; function amoritzationDataBound() { } function toggleAmortizationPayments() { var paymentHistoryGrid = $("#AmortizationScheduleGrid").data("kendoGrid"); if (!amortizationPaymentsExpanded) { paymentHistoryGrid.expandRow(paymentHistoryGrid.tbody.find("tr.k-master-row")); amortizationPaymentsExpanded = true; } else { paymentHistoryGrid.collapseRow(paymentHistoryGrid.tbody.find("tr.k-master-row")); amortizationPaymentsExpanded = false; } }</script>2 answers
189 views
My HTML has 7 charts, so for every chart, I call a function that creates a datasource and binds the datasource to the chart. I'm including the code.
After much testing and no support from Kendo, I noticed that when I use JSONP and callback, the charts become erratic in the sense that all of them are never rendered. For example, sometimes 3 charts are seen, then when I refresh, 4 are filled, then maybe 2, so on.
If I move the HTML to the same domain where my wcf resides and I use JSON (no callback), all the charts are displayed.
Why would this happen? On cross-domain, if I only use JSONP and no "callback", then the nothing is displayed. So I have to use both jsonp and callback.
Thanks.
After much testing and no support from Kendo, I noticed that when I use JSONP and callback, the charts become erratic in the sense that all of them are never rendered. For example, sometimes 3 charts are seen, then when I refresh, 4 are filled, then maybe 2, so on.
If I move the HTML to the same domain where my wcf resides and I use JSON (no callback), all the charts are displayed.
Why would this happen? On cross-domain, if I only use JSONP and no "callback", then the nothing is displayed. So I have to use both jsonp and callback.
Thanks.
<!DOCTYPE html><html><head> <title></title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.rtl.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head><body> <div id="example" class="k-content absConf"> <table class="history" > <tr> <td class="spark" style="border: 1px solid red"><span id="Old1T"></span></td> <td class="spark" style="border: 1px solid red"><span id="Old2T"></span></td> <td class="spark" style="border: 1px solid red"><span id="New1T"></span></td> <td class="spark" style="border: 1px solid red"><span id="New2T"></span></td> <td class="spark" style="border: 1px solid red"><span id="New3T"></span></td> <td class="spark" style="border: 1px solid red"><span id="New4T"></span></td> <td class="spark" style="border: 1px solid red"><span id="New5T"></span></td> </tr> </table> <script> function bindChart(tech, Side) { var rowDataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetLaunchedSites?Technology=" + tech + "&Side=" + Side, type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#" + tech + Side + "T").kendoSparkline({ dataSource: rowDataSource, series: [{ field: "count", color: "Green" }], seriesDefaults: { type: "area" }, }); } function drawChart() { bindChart("Old", 1); bindChart("Old", 2); bindChart("New", 1); bindChart("New", 2); bindChart("New", 3); bindChart("New", 4); bindChart("New", 5); } $(document).ready(drawChart); $(document).bind("kendo:skinChange", drawChart); </script> <style scoped> .chart-wrapper { width: 200px; height: 100%; margin: 0 auto 30px auto; padding: 0 0 30px 0; font-weight: bold; text-transform: uppercase; } .history td.spark { text-align: left; line-height: 50px; padding: 0 5px; } </style> </div></body></html>
Vaughn Myers
Top achievements
Rank 1
Rank 1
answered
on
23 Jul 2013
1 answer
242 views
Hello, I have a problem with reload data in the treeview
there are 2 controls
DropDownList (with roles)
Treeview (with some hierarchy)
When DropDownList.Onchange event fired the Treeview should be filled with another data (for another role). Event was successfully fired, and Model was passed to the View. But Treeview not reloaded.
VIEW
Controller
there are 2 controls
DropDownList (with roles)
Treeview (with some hierarchy)
When DropDownList.Onchange event fired the Treeview should be filled with another data (for another role). Event was successfully fired, and Model was passed to the View. But Treeview not reloaded.
VIEW
@using (Html.BeginForm("Security", "Security", FormMethod.Post)){ <label for="roles" class="field-label">Securities by Role:</label> @(Html.Kendo().DropDownList() .Name("roles") .DataTextField("RoleName") .DataValueField("ID") .Events(e => e.Change("rolesChange")) .DataSource(ds => ds.Read("GetRoles", "Security")) ) <a href="#" id="saveButton" class="k-button k-button-icontext"><span class="k-icon k-update"></span>Save</a> <div class="treeview-back"> @(Html.Kendo().TreeView() .Name("treeview") .DataTextField("Text") .AutoBind(false) .Checkboxes(checkboxes => checkboxes.CheckChildren(true)) .Items(tv => { var list = Model.ToList(); foreach (var client in list) { tv.Add().Text(client.Name) .Id("cvm" + client.ID) .Items(root => { foreach (var campaign in client.Campaigns) { root.Add() .Text(campaign.CampaignName) .Id(campaign.ID.ToString()) .Checked(campaign.IsSelected); } }); } })) </div> }
<script>
var treeview = $("#treeview").data("kendoTreeView");
function rolesChange(e) {
var treeview = $("#treeview").data("kendoTreeView");
var value = this.value();
if (value) {
var url = '@Url.Action("Security", "Security")' + "?roleId=" + value;
$.ajax({
url: url,
type: 'POST',
});
}
}
</script>
Controller
public class SecurityController : BaseGridCrudController<SecurityDataMapper, SecurityViewModel>{ public ActionResult Security(int roleId = 0) { return View(GetTreeViewData(roleId == 0 ? (int?)null : roleId)); } protected override string ClassName { get { return "SecurityController"; } } public List<ClientViewModel> GetTreeViewData(int? id) { int? roleId = id; if (!roleId.HasValue) { var roleViewModels = RoleDataMapper.Instance.List().OrderBy(r => r.RoleName); RoleViewModel roleViewModel = roleViewModels.First(); roleId = roleViewModel.ID; } return _dataMapper.LoadByRoleId(roleId.Value); } public ActionResult GetRoles() { var roles = RoleDataMapper.Instance.List().OrderBy(r => r.RoleName); return Json(roles, JsonRequestBehavior.AllowGet); }}
Daniel
Telerik team
answered
on
23 Jul 2013
