Format GridColumn of Decimal Field

[Ujjwalkanti]

Hi,

In our application, we have one  ("ShowDecimal") outside of the grid.

I want once the checkbox is checked, the data of grid column ("ElectricityBill") will be displayed in decimal format. If it's not checked it would not display in decimal format.

I can format the grid column like below way ,

{ field: "ElectricityBill", title: "Electricity Bill",  template: "#=kendo.toString(ElectricityBill, 'n2') #" },  

But, , how I can apply the "ShowDecimal" checked value in template syntax,

I have tried with following way but none of the options worked,

{ field: "ElectricityBill", title: "Electricity Bill",  template: "#= $('ShowDecimal').checked?kendo.toString(ElectricityBill, 'n2'): kendo.toString(ElectricityBill, 'n0')#" },

I have also tried to call one javascript function but I got the error like "Method not found".

Please help.

Regards,

Ujjwal

[Tsvetina]

Hello Ujjwal,

There isn't a direct way to do this type of format switching using the Grid API, but you can easily implement it in the template. You can define the template with both values rendered, but the decimal one hidden using CSS, for example:

{ field: "ElectricityBill", title: "Electricity Bill",  template: "<span class='decimalText hidden'>#=kendo.toString(ElectricityBill, 'n2') #</span><span class='integerText'>#=kendo.toString(ElectricityBill, 'n0') #</span>" },

Then, you can add CSS that hides the element having .hidden class assigned:

span.hidden {
   display: none;
}

And last, use JavaScript in your checkbox click/check event to toggle the .hidden class for the two elements:

$(".decimalText").toggleClass("hidden");
$(".integerText").toggleClass("hidden");

Give this approach a try and let me know if you have additional questions about this scenario.

Regards,
Tsvetina
Telerik by Progress