Questions on Kendo UI for jQuery Forum

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

583 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

121 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

162 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

196 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

230 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"
            }
        });

DatePicker

answered on 23 Jul 2013

1 answer

140 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

69 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

1 answer

133 views

Grid Drag and Drop indicator

Hi I would like to know if there is way in which I could show some kind of indicator, while doing drag and drop on grid, to let the user know where the row will e end up once drop it.

Thanks,.

Grid

answered on 23 Jul 2013

1 answer

82 views

Kendo Pager Breaking on 11th Page

I have the following method that sets up a kendo datasource and ties it to a pager and listview. As you'll see in the attached code, the pager itself is pretty bare bones, tie it to the datasource. The datasource sets the page size (10) and turns on serverside paging. Everything works great, until I try to page more than a certain, unknown, number of records. For example, with a page size of 10, I can break the pager by return 101 records. That initially led me to think maybe it was the idea of rendering more than 10 pages. Unfortunately, a page size of 100, and 1000 records also breaks. Any insight to what I am overlooking would be greatly appreciated. Thanks in advance.

var dsOpts = {

transport: {

read: {

url: function() {

if(displayMode == "items")

return "Coverage/GetFolderItemsByPage";

else if(displayMode == "filter")

return "Coverage/GetFilterItemsByPage";

},

dataType: "json",

data: function () {

if (displayMode == "items") {