如何用jquery用Kendo开关显示百分比?

我有像这样的kendo NumericTextBox


@(Html.Kendo().NumericTextBox() .Name("SignalThreshold") .Value(0) .Step(10) .Min(0) .Events(e => e.Change("FilterThresholdChange")) .Format("##.00") )

我有一个剑道开关,像这样:

 $("#euro-switch").kendoMobileSwitch({ onLabel: "%", offLabel: "€", change: function (e) { var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString(); var grid = $("#overzicht-grid").data("kendoGrid"); if (e.checked) { grid.showColumn("VerschilPercentage"); grid.hideColumn('Verschil') } else { grid.hideColumn("VerschilPercentage"); grid.showColumn("Verschil"); } var inpbox = $('#SignalThreshold').data("kendoNumericTextBox"); inpbox.setOptions( { round: true, decimals: 0, }); inpbox.value(inpbox.value()); } }); 

所以你可以在欧元和百分比之间切换。

你可以在numericTextbox中过滤你想看到的欧元金额,例如你只想看到欧元的金额大于50欧元。 你用这种方法做到这一点:

 function FilterThresholdChange() { $('#overzicht-grid').data('kendoGrid').dataSource.filter({ operator: function (task) { var thresholdAmount = $("#SignalThreshold").data("kendoNumericTextBox").value(); if (thresholdAmount == 0) { return true; } else { return (task.Verschil >= thresholdAmount || (task.Verschil < 0 && task.Verschil <= thresholdAmount * -1)); } } }); } 

但现在你可以切换到百分比,但是你会看到不正确的百分比,因为你也看到14%或20%的百分比,但在这种情况下它当然要大于50%。

那么如何将这两者结合起来呢? 你会看到欧元比一个数量和百分比大一个百分点大吗?

谢谢

这是模型:

 public class Overzicht { [XmlArrayItem("Dvb")] public List Dienstverbanden { get; set; } } public class Dienstverband { [XmlAttribute("Id")] public int Id { get; set; } public string Naam { get; set; } public string Contractvorm { get; set; } [XmlElement("Run1")] public RunGegevens Run1 { get; set; } [XmlElement("Run2")] public RunGegevens Run2 { get; set; } public decimal Verschil { get { { return Run1.Netto - Run2.Netto; } } } public decimal VerschilPercentage { get { if (Run1.Netto == 0 && Run2.Netto != 0) { return -100; } return Run1.Netto == 0 ? 0 : ((Run1.Netto - Run2.Netto) / Run1.Netto) * 100; } } } public class RunGegevens { public decimal Netto { get; set; } public decimal Herr { get; set; } } 

这是kendo overzicht-grid:

 @(Html.Kendo().Grid() .Name("overzicht-grid") .AutoBind(false) .Columns(columns => { columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("${Naam}").Width(300) .Filterable(f => { f.Extra(false); f.Operators(op => { op.ForString(str => { str.Clear().Contains("Bevat"); }); }); }); columns.Bound(d => d.Contractvorm).Title("Contractvorm").ClientTemplate("${Contractvorm}").Width(200).Filterable(ftb => ftb.Multi(true)); ; columns.Bound(d => d.Run1.Netto).Title("Periode 1").HeaderTemplate("
").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run1.Netto != 0) { # #= kendo.toString(Run1.Netto, 'n2') # # } #").HeaderHtmlAttributes(new { style = "text-align:right;text-align:right;" }); columns.Bound(d => d.Run2.Netto).Title("Periode 2").HeaderTemplate("
").Filterable(true).HtmlAttributes(new { style = "text-align:right;" }).Width(220).ClientTemplate("# if (Run2.Netto != 0) { # #= kendo.toString(Run2.Netto, 'n2') # # } #").HeaderHtmlAttributes(new { style = "text-align:right;" }); columns.Bound(d => d.VerschilPercentage).Title("Verschil").Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (VerschilPercentage != 0) { # #= kendo.toString(VerschilPercentage, 'n2') # % # } else { # 0 % # } #").Width(165).Format("{0:P}").HeaderHtmlAttributes(new { style = "text-align:right;" }).Hidden(); columns.Bound(d => d.Verschil).Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (Verschil != 0) { # € #= kendo.toString(Verschil, 'n2') # # } else { # € 0,00 # } #").Width(165).Format("{0: #.00}").HeaderHtmlAttributes(new { style = "text-align:right;" }); }) .Filterable(f => f.Mode(GridFilterMode.Menu)) .Sortable() .Events(e => e.DataBound("OngridDatabound")) .Pageable(pager => pager.PageSizes(new List { 25, 50, 100, 200, 500 })) .ClientDetailTemplateId("overzicht-grid-details") .Excel(e => e.AllPages(true)) .DataSource(dataSource => dataSource .Ajax() .PageSize(50) .ServerOperation(false) .Model(model => { model.Id(d => d.Id); model.Field(f => f.Naam); model.Field(f => f.Contractvorm); model.Field(f => f.Run1.Netto); model.Field(f => f.Run2.Netto); }) .Read(r => r.Action("GetOverzicht", "NettoVergelijking").Data("getData")) .Sort(d => d.Add(a => a.Verschil).Descending() ) ) )

所以我尝试将filter结合起来:

  operator: function (task) {} with this: change: function (e) {} 

我试试这样:

  $("#euro-switch").kendoMobileSwitch({ onLabel: "%", offLabel: "€", change: function (e) { var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString(); var grid = $("#overzicht-grid").data("kendoGrid"); if (e.checked) { grid.showColumn("VerschilPercentage"); grid.hideColumn('Verschil') } else { grid.hideColumn("VerschilPercentage"); grid.showColumn("Verschil"); } var inpbox = $('#SignalThreshold').data("kendoNumericTextBox"); if (inpbox == 0) { return true; } else { return (e.Verschil >= inpbox); } inpbox.setOptions( { round: true, decimals: 0, }); inpbox.value(inpbox.value()); } }); 

但我得到的消息是:Verschil未定义。

那么我如何获得价值:VerschilPercentage?

谢谢