title: How to toggle between Euro and Procent in kendo grid
body: <p>I have a kendo grid, like this:</p>
  
  <pre><code>@(Html.Kendo().Grid&lt;SDB.Models.NettoVergelijking.Dienstverband&gt;()
          .Name("overzicht-grid")
          .AutoBind(false)
          .Columns(columns =&gt;
          {
              columns.Bound(d =&gt; d.Naam).Title("Medewerker").ClientTemplate("&lt;span title='${Naam}'&gt;${Naam}&lt;/span&gt;").Width(300)
                  .Filterable(f =&gt;
                  {
                      f.Extra(false);
                      f.Operators(op =&gt;
                      {
                          op.ForString(str =&gt;
                          {
                              str.Clear().Contains("Bevat");
                          });
                      });
                  });
              columns.Bound(d =&gt; d.Contractvorm).Title("Contractvorm").ClientTemplate("&lt;span title='${Contractvorm}'&gt;${Contractvorm}&lt;/span&gt;").Width(200).Filterable(ftb =&gt; ftb.Multi(true)); ;
              columns.Bound(d =&gt; 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 =&gt; 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 =&gt; 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 =&gt; f.Mode(GridFilterMode.Menu))
          .Sortable()
          .Pageable(pager =&gt; pager.PageSizes(new List&lt;object&gt; { 25, 50, 100, 200, 500 }))
          .ClientDetailTemplateId("overzicht-grid-details")
          .Excel(e =&gt; e.AllPages(true))
          .DataSource(dataSource =&gt; dataSource
              .Ajax()
              .PageSize(50)
              .ServerOperation(false)
              .Model(model =&gt;
              {
                  model.Id(d =&gt; d.Id);
                  model.Field(f =&gt; f.Naam);
                  model.Field(f =&gt; f.Contractvorm);
                  model.Field(f =&gt; f.Run1.Netto);
                  model.Field(f =&gt; f.Run2.Netto);
              })
              .Read(r =&gt; r.Action("GetOverzicht", "NettoVergelijking").Data("getData"))
              .Sort(d =&gt; d.Add(a =&gt; a.Verschil).Descending())
          )
  )
  </code></pre>
  
  <p>and I have a switch toggle button, like this:</p>
  
  <pre><code>    $("#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());
          }
  
      });
  </code></pre>
  
  <p>So you can toggle between euro and procent.</p>
  
  <p>I have a class like this:</p>
  
  <pre><code>public class Overzicht
      {
          [XmlArrayItem("Dvb")]
          public List&lt;Dienstverband&gt; 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; }
      }
  </code></pre>
  
  <p>you see a method:</p>
  
  <p>verschil and verschilPercentage. So now I want to toggle between the methods Verschil and VerschilPercentage. So that the user can see the amount in Euro's but can also change the view in percentage.</p>
  
  <p>But how to do this?</p>
  
  <p>Thank you</p>
  
  <p>So how to switch in the grid between: <code>d.Verschil</code> and <code>d.VerschilPercentage</code>?</p>
  
  <p>Thank you</p>
  
  <p>I have it now like this:</p>
  
  <pre><code>$("#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());
              }
  
          });
  </code></pre>
  
  <p>But the ProcentVerschil column will not be visible</p>