Questions on Kendo UI for jQuery Forum

2 answers

276 views

Bug? Datasource data not cleared after chart is destroyed

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:

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 #"

}

});

}

Chart destroy function:

function handleCloseClick() {

$('.analytics-chart.k-chart').each(function(){

var id = $(this).attr('id');

var chart = $('#'+id).data("kendoChart");

chart.destroy();

$('#'+id).empty();

});

}

HTML:

<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>

I am using JQuery 1.9.1 and KendoUI v2013.1.514, in Chrome.

Could you please advise? Thankyou, Kate.

Charts

answered on 24 Jul 2013

3 answers

1.6K+ views

DropDownList Width in MVC

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.

DropDownList

answered on 24 Jul 2013

1 answer

4.2K+ views

DropDownList Getting ClientSide Value on Selected Item in MVC

Currently to get the value of the selected item in the onSelect event I do this:

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?

DropDownList

answered on 24 Jul 2013

1 answer

559 views

DropDownList in MVC Setting Change Event

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:

@(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);"

DropDownList

answered on 24 Jul 2013

1 answer

116 views

multiple grids, each with detail templates giving error

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.

@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>

Grid

answered on 23 Jul 2013

2 answers

152 views

Several datasources with callback and JSONP in one HTML??

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.

<!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>

Charts

answered on 23 Jul 2013

1 answer

185 views

Treeview doesn't reload data

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

@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);

    }

}

TreeView

answered on 23 Jul 2013

3 answers

219 views

Validation message does not always use custom message in IE 9

Hello,
When I try the validation with a wrong input it some times gives me "Created is invalid". But I do expect the message to be "Invalid Format. Use: mm/dd/yyyy" instead. It appears that Kendo validator does it's own validation even if I returns false. What am I missing here?. it works well in Chrome and Firefox but not in IE

Thanks for your answer and looking forward to it.

Note: Code is written in Razor under MVC

        $("#Created").kendoValidator({
            rules: {
                dateValidation: function (e) {
                    if (!$(e).val())
                        return true;
                   var currentDate = kendo.parseDate($(e).val());
                    if (!currentDate) {
                    return false;
                    }
                    return true;
                }
            },
            messages: {
                dateValidation: "Invalid format. Use: mm/dd/yyyy"
            }
        });

Date/Time Pickers

answered on 23 Jul 2013

1 answer

132 views

Newb: Need Architecture Overview

I'm an experienced ASP.NET developer and have worked with the Telerik controls for years. I’m interested in developing a mobile web application and would like to use the Kendo framework for its cross-device support. I’m having a hard time getting my head around the architecture for building an app that will access remote data and perform some simple authentication. The app needs to:

1)       Post to a remote URL and consume the simple XML response for authentication
2)       Retrieve remote data from a SQL database
3)       Potentially interact with a server file system
4)       Serve selected PDF files natively to the device

Can someone give me a high-level idea of how we’d accomplish the following using the client-side library? My experience tells me to write server-side scripts that output the JavaScript code that Kendo uses, but I’m pretty sure that’s old-school thinking. Any advice would be helpful, I’m having a tough time getting my head around how to get started.

General Discussions

answered on 23 Jul 2013

0 answers

65 views

Grid keyboard navigation - disabled cells

I have a grid with incell editing enabled and keyboard navigation.

Based on business rules we are disabling some cells based on the values on some other columns.

The problem is that when navigation through each cell, when you move
into a cell disable with closeCell method using the edit client event.,
the grid lost focus, and page

scroll up and focus into some of the headers elements.

Thanks in advance,

Gon

Grid

asked on 23 Jul 2013