如何在 kendo 网格中切换欧元和百分比

Question

我有一个 kendo 网格，像这样：

@(Html.Kendo().Grid<SDB.Models.NettoVergelijking.Dienstverband>()
        .Name("overzicht-grid")
        .AutoBind(false)
        .Columns(columns =>
        {
            columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("<span title='${Naam}'>${Naam}</span>").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("<span title='${Contractvorm}'>${Contractvorm}</span>").Width(200).Filterable(ftb => ftb.Multi(true)); ;
            columns.Bound(d => d.Run1.Netto).Title("Periode 1").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;" });
            columns.Bound(d => d.Run2.Netto).Title("Periode 2").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.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()
        .Pageable(pager => pager.PageSizes(new List<object> { 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())
        )
)

我有一个开关切换按钮，像这样：

    $("#euro-switch").kendoMobileSwitch({
        onLabel: "%",
        offLabel: "€",
        change: function (e) {

            var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();
            var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");
            console.log(inpbox)
            inpbox.setOptions(
                {
                    format: "\" + label + "\ #",
                    decimals: 3
                });
            inpbox.value(inpbox.value());
        }

    });

因此您可以在欧元和百分之间切换。

我有一个 class 这样的：

public class Overzicht
    {
        [XmlArrayItem("Dvb")]
        public List<Dienstverband> 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
            {
                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; }
    }

你看一个方法：

verschil 和 verschilPercentage。所以现在我想在 Verschil 和 VerschilPercentage 方法之间切换。这样用户可以看到以欧元为单位的金额，但也可以更改百分比视图。

但是如何做到这一点？

谢谢

那么如何在网格中切换：d.Verschil和d.VerschilPercentage？

谢谢

我现在是这样的:

$("#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.hideColumn("Verschil");
                    grid.showColumn("VerschilPercentage");
                }
                else {
                    grid.hideColumn("VerschilPercentage");
                    grid.showColumn("Verschil");
                }            

                var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");               
                inpbox.setOptions(
                    {
                        format: "\" + label + "\ #",
                        decimals: 2
                    });
                inpbox.value(inpbox.value());
            }

        });

但 ProcentVerschil 列将不可见

Answer 1

生成两列，但一次只显示一列。

1) 更新网格视图，添加列（必要时进行调整）：

columns.Bound(d => d.VerschilPercentage).Hidden().Filterable(false).HtmlAttributes(new { style = "text-align:right;", @class = "NettoVergelijkingVerschil" }).ClientTemplate("# if (VerschilPercentage != 0) { #  #= kendo.toString(VerschilPercentage, 'n2') #  # } else { # 0,00  # } #").Width(165).Format("{0:#.00}").HeaderHtmlAttributes(new { style = "text-align:right;" });

2) 更新开关的更改处理程序：

change: function (e) {
    // Whatever the other bits do... probably keep them, and add:

    var grid = $("#overzicht-grid").data("kendoGrid");

    if (e.checked) {
        grid.hideColumn("Verschil");
        grid.showColumn("VerschilPercentage");
    }
    else {
        grid.hideColumn("VerschilPercentage");
        grid.showColumn("Verschil");
    }
}

当然未经测试。

更新

使用 Kendo Dojo

测试

如何在 kendo 网格中切换欧元和百分比

How to toggle between Euro and Procent in kendo grid

c#

asp.net-mvc

kendo-grid

kendo-asp.net-mvc

更新