Post
Ask Question
albert albert

albert albert

  • NA
  • 524
  • 0

How to show percentage with Kendo switch with jquery?

Feb 12 2018 1:42 AM
I have a kendo NumericTextBox like this
 [code]
  1. I have a kendo NumericTextBox  like this   
  2.   
  3.     class="col-sm-2 form-group">  
  4.       
  5.           
  6.           
  7.         @(Html.Kendo().NumericTextBox()  
  8.                                     .Name("SignalThreshold")  
  9.                                     .Value(0)  
  10.                                     .Step(10)  
  11.                                     .Min(0)  
  12.                                     .Events(e => e.Change("FilterThresholdChange"))  
  13.                                  .Format("##.00")                                   
  14.         )  
  15.     
  
  •   
  • and I have a kendo switch, like this:  
  •   
  •     
    1. $("#euro-switch").kendoMobileSwitch({    
    2.         
    3.             onLabel: "%",    
    4.             offLabel: "€",    
    5.             change: function (e) {    
    6.         
    7.                 var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();    
    8.                 var grid = $("#overzicht-grid").data("kendoGrid");    
    9.         
    10.                 if (e.checked) {    
    11.                     grid.showColumn("VerschilPercentage");    
    12.                     grid.hideColumn('Verschil')    
    13.                 }    
    14.         
    15.                 else {    
    16.                     grid.hideColumn("VerschilPercentage");    
    17.                     grid.showColumn("Verschil");    
    18.                 }    
    19.         
    20.                 var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");    
    21.                 inpbox.setOptions(    
    22.                     {    
    23.                         round: true,    
    24.                         decimals: 0,    
    25.                             
    26.                             
    27.                     });    
    28.                 inpbox.value(inpbox.value());    
    29.             }            });      
  • So you can toggle between euro and percentage.    
  • YOu can filter in the numericTextbox the amount of euro's you want to see, for example you only want to see amount of euro's bigger then 50 euro. YOu do this with this method:       
    1. function FilterThresholdChange() {    
    2.            $('#overzicht-grid').data('kendoGrid').dataSource.filter({    
    3.        
    4.                operator: function (task) {    
    5.                    var thresholdAmount = $("#SignalThreshold").data("kendoNumericTextBox").value();    
    6.        
    7.                    if (thresholdAmount == 0) {    
    8.                        return true;    
    9.                    }    
    10.                    else {    
    11.                        return (task.Verschil >= thresholdAmount || (task.Verschil < 0 && task.Verschil <= thresholdAmount * -1));    
    12.                    }    
    13.                }    
    14.            });    
    15.        }        
  • But now you can switch to percentage, but then you will see the incorrect percentages, because you also see the percentages of 14 % or 20 %, but it has to of course bigger then 50 % in this case.     
  • So how to combine these two? that you will see euro's bigger then a amount and percentages bigger then a percentage?    
  • Thank you    
  • this is the model:  
  •          
    1. public class Overzicht    
    2.        {    
    3.            [XmlArrayItem("Dvb")]    
    4.            public List Dienstverbanden { get; set; }    
    5.        }    
    6.        
    7.        public class Dienstverband    
    8.        {    
    9.            [XmlAttribute("Id")]    
    10.            public int Id { get; set; }    
    11.        
    12.            public string Naam { get; set; }    
    13.        
    14.            public string Contractvorm { get; set; }    
    15.        
    16.            [XmlElement("Run1")]    
    17.            public RunGegevens Run1 { get; set; }    
    18.        
    19.            [XmlElement("Run2")]    
    20.            public RunGegevens Run2 { get; set; }    
    21.        
    22.            public decimal Verschil    
    23.            {    
    24.                get    
    25.                {    
    26.                    {    
    27.        
    28.                        return Run1.Netto - Run2.Netto;    
    29.                    }    
    30.                }    
    31.            }    
    32.            public decimal VerschilPercentage    
    33.            {    
    34.                get    
    35.                {    
    36.        
    37.                    if (Run1.Netto == 0 && Run2.Netto != 0)    
    38.                    {    
    39.                        return -100;    
    40.        
    41.                    }    
    42.                            
    1. public class Overzicht    
    2.        {    
    3.            [XmlArrayItem("Dvb")]    
    4.            public List Dienstverbanden { get; set; }    
    5.        }    
    6.        
    7.        public class Dienstverband    
    8.        {    
    9.            [XmlAttribute("Id")]    
    10.            public int Id { get; set; }    
    11.        
    12.            public string Naam { get; set; }    
    13.        
    14.            public string Contractvorm { get; set; }    
    15.        
    16.            [XmlElement("Run1")]    
    17.            public RunGegevens Run1 { get; set; }    
    18.        
    19.            [XmlElement("Run2")]    
    20.            public RunGegevens Run2 { get; set; }    
    21.        
    22.            public decimal Verschil    
    23.            {    
    24.                get    
    25.                {    
    26.                    {    
    27.        
    28.                        return Run1.Netto - Run2.Netto;    
    29.                    }    
    30.                }    
    31.            }    
    32.            public decimal VerschilPercentage    
    33.            {    
    34.                get    
    35.                {    
    36.        
    37.                    if (Run1.Netto == 0 && Run2.Netto != 0)    
    38.                    {    
    39.                        return -100;    
    40.        
    41.                    }    
    42.        
  • And this is the kendo overzicht-grid:  
  •   
  •     
    1. @(Html.Kendo().Grid()    
    2.             .Name("overzicht-grid")    
    3.             .AutoBind(false)    
    4.             .Columns(columns =>    
    5.             {    
    6.                 columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("${Naam}").Width(300)    
    7.                     .Filterable(f =>    
    8.                     {    
    9.                         f.Extra(false);    
    10.                         f.Operators(op =>    
    11.                         {    
    12.                             op.ForString(str =>    
    13.                             {    
    14.                                 str.Clear().Contains("Bevat");    
    15.                             });    
    16.                         });    
    17.                     });    
    18.                 columns.Bound(d => d.Contractvorm).Title("Contractvorm").ClientTemplate("${Contractvorm}").Width(200).Filterable(ftb => ftb.Multi(true)); ;    
    19.                 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;" });    
    20.         
    21.                 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;" });    
    22.         
    23.                 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();    
    24.         
    25.                 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;" });    
    26.             })    
    27.         .Filterable(f => f.Mode(GridFilterMode.Menu))    
    28.         .Sortable()    
    29.         .Events(e => e.DataBound("OngridDatabound"))    
    30.         .Pageable(pager => pager.PageSizes(new List<object>    
    31.             { 25, 50, 100, 200, 500 }))    
    32.             .ClientDetailTemplateId("overzicht-grid-details")    
    33.             .Excel(e => e.AllPages(true))    
    34.             .DataSource(dataSource => dataSource    
    35.             .Ajax()    
    36.             .PageSize(50)    
    37.             .ServerOperation(false)    
    38.             .Model(model =>    
    39.             {    
    40.                 model.Id(d => d.Id);    
    41.                 model.Field(f => f.Naam);    
    42.                 model.Field(f => f.Contractvorm);    
    43.                 model.Field(f => f.Run1.Netto);    
    44.                 model.Field(f => f.Run2.Netto);    
    45.             })    
    46.             .Read(r => r.Action("GetOverzicht", "NettoVergelijking").Data("getData"))    
    47.             .Sort(d => d.Add(a => a.Verschil).Descending()    
    48.             )    
    49.             )    
    50.     )   
  •  
  •   
  • So I try to combine the filters this:  
  •   
  •      operator: function (task) {} with this:  
  •     change: function (e) {}  
  •   
  • I try it like this:  
  •   
  •    
    1. $("#euro-switch").kendoMobileSwitch({    
    2.       
    3.                   onLabel: "%",    
    4.                   offLabel: "€",    
    5.                   change: function (e) {    
    6.       
    7.                       var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();    
    8.                       var grid = $("#overzicht-grid").data("kendoGrid");    
    9.       
    10.                       if (e.checked) {    
    11.                           grid.showColumn("VerschilPercentage");    
    12.                           grid.hideColumn('Verschil')    
    13.                       }    
    14.       
    15.                       else {    
    16.                           grid.hideColumn("VerschilPercentage");    
    17.                           grid.showColumn("Verschil");    
    18.                       }    
    19.       
    20.                       var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");    
    21.       
    22.                       if (inpbox == 0) {    
    23.                           return true;    
    24.                       }    
    25.                       else {    
    26.                           return (e.Verschil >= inpbox);    
    27.                       }    
    28.       
    29.       
    30.                       inpbox.setOptions(    
    31.                           {    
    32.                               round: true,    
    33.                               decimals: 0,    
    34.       
    35.       
    36.                           });    
    37.                       inpbox.value(inpbox.value());    
    38.                   }    
    39.               });    
  •   
  • But I get the message: Verschil undefined.  
  •   
  • So how I get the value: VerschilPercentage?  
  •   
  • Thank you  
    •  
    [/code] 
    and I have a kendo switch, like this:
    1. $("#euro-switch").kendoMobileSwitch({  
    2. onLabel: "%",  
    3. offLabel: "€",  
    4. change: function (e) {  
    5. var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();  
    6. var grid = $("#overzicht-grid").data("kendoGrid");  
    7. if (e.checked) {  
    8. grid.showColumn("VerschilPercentage");  
    9. grid.hideColumn('Verschil')  
    10. }  
    11. else {  
    12. grid.hideColumn("VerschilPercentage");  
    13. grid.showColumn("Verschil");  
    14. }  
    15. var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");  
    16. inpbox.setOptions(  
    17. {  
    18. round: true,  
    19. decimals: 0,  
    20. });  
    21. inpbox.value(inpbox.value());  
    22. }  
    23. });  
    So you can toggle between euro and percentage.
    YOu can filter in the numericTextbox the amount of euro's you want to see, for example you only want to see amount of euro's bigger then 50 euro. YOu do this with this method:
    1. function FilterThresholdChange() {  
    2. $('#overzicht-grid').data('kendoGrid').dataSource.filter({  
    3. operator: function (task) {  
    4. var thresholdAmount = $("#SignalThreshold").data("kendoNumericTextBox").value();  
    5. if (thresholdAmount == 0) {  
    6. return true;  
    7. }  
    8. else {  
    9. return (task.Verschil >= thresholdAmount || (task.Verschil < 0 && task.Verschil <= thresholdAmount * -1));  
    10. }  
    11. }  
    12. });  
    13. }  
    But now you can switch to percentage, but then you will see the incorrect percentages, because you also see the percentages of 14 % or 20 %, but it has to of course bigger then 50 % in this case.
    So how to combine these two? that you will see euro's bigger then a amount and percentages bigger then a percentage?
    Thank you
    this is the model:
    1. public class Overzicht  
    2. {  
    3. [XmlArrayItem("Dvb")]  
    4. public List Dienstverbanden { get; set; }  
    5. }  
    6. public class Dienstverband  
    7. {  
    8. [XmlAttribute("Id")]  
    9. public int Id { get; set; }  
    10. public string Naam { get; set; }  
    11. public string Contractvorm { get; set; }  
    12. [XmlElement("Run1")]  
    13. public RunGegevens Run1 { get; set; }  
    14. [XmlElement("Run2")]  
    15. public RunGegevens Run2 { get; set; }  
    16. public decimal Verschil  
    17. {  
    18. get  
    19. {  
    20. {  
    21. return Run1.Netto - Run2.Netto;  
    22. }  
    23. }  
    24. }  
    25. public decimal VerschilPercentage  
    26. {  
    27. get  
    28. {  
    29. if (Run1.Netto == 0 && Run2.Netto != 0)  
    30. {  
    31. return -100;  
    32. }  
    33. return Run1.Netto == 0 ? 0 : ((Run1.Netto - Run2.Netto) / Run1.Netto) * 100;  
    34. }  
    35. }  
    36. }  
    37. public class RunGegevens  
    38. {  
    39. public decimal Netto { get; set; }  
    40. public decimal Herr { get; set; }  
    41. }  
    And this is the kendo overzicht-grid:
    1. @(Html.Kendo().Grid()  
    2. .Name("overzicht-grid")  
    3. .AutoBind(false)  
    4. .Columns(columns =>  
    5. {  
    6. columns.Bound(d => d.Naam).Title("Medewerker").ClientTemplate("${Naam}").Width(300)  
    7. .Filterable(f =>  
    8. {  
    9. f.Extra(false);  
    10. f.Operators(op =>  
    11. {  
    12. op.ForString(str =>  
    13. {  
    14. str.Clear().Contains("Bevat");  
    15. });  
    16. });  
    17. });  
    18. columns.Bound(d => d.Contractvorm).Title("Contractvorm").ClientTemplate("${Contractvorm}").Width(200).Filterable(ftb => ftb.Multi(true)); ;  
    19. columns.Bound(d => d.Run1.Netto).Title("Periode 1").HeaderTemplate("  
    20. ").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;" });  
    21. columns.Bound(d => d.Run2.Netto).Title("Periode 2").HeaderTemplate("  
    22. ").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;" });  
    23. 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();  
    24. 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;" });  
    25. })  
    26. .Filterable(f => f.Mode(GridFilterMode.Menu))  
    27. .Sortable()  
    28. .Events(e => e.DataBound("OngridDatabound"))  
    29. .Pageable(pager => pager.PageSizes(new List  
    30. { 25, 50, 100, 200, 500 }))  
    31. .ClientDetailTemplateId("overzicht-grid-details")  
    32. .Excel(e => e.AllPages(true))  
    33. .DataSource(dataSource => dataSource  
    34. .Ajax()  
    35. .PageSize(50)  
    36. .ServerOperation(false)  
    37. .Model(model =>  
    38. {  
    39. model.Id(d => d.Id);  
    40. model.Field(f => f.Naam);  
    41. model.Field(f => f.Contractvorm);  
    42. model.Field(f => f.Run1.Netto);  
    43. model.Field(f => f.Run2.Netto);  
    44. })  
    45. .Read(r => r.Action("GetOverzicht", "NettoVergelijking").Data("getData"))  
    46. .Sort(d => d.Add(a => a.Verschil).Descending()  
    47. )  
    48. )  
    49. )  
    So I try to combine the filters this:
    operator: function (task) {} with this:
    change: function (e) {}
    I try it like this:
     
    1. $("#euro-switch").kendoMobileSwitch({  
    2. onLabel: "%",  
    3. offLabel: "€",  
    4. change: function (e) {  
    5. var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();  
    6. var grid = $("#overzicht-grid").data("kendoGrid");  
    7. if (e.checked) {  
    8. grid.showColumn("VerschilPercentage");  
    9. grid.hideColumn('Verschil')  
    10. }  
    11. else {  
    12. grid.hideColumn("VerschilPercentage");  
    13. grid.showColumn("Verschil");  
    14. }  
    15. var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");  
    16. if (inpbox == 0) {  
    17. return true;  
    18. }  
    19. else {  
    20. return (e.Verschil >= inpbox);  
    21. }  
    22. inpbox.setOptions(  
    23. {  
    24. round: true,  
    25. decimals: 0,  
    26. });  
    27. inpbox.value(inpbox.value());  
    28. }  
    29. });  
    But I get the message: Verschil undefined.
    So how I get the value: VerschilPercentage?
    Thank you