This is a migrated thread and some comments may be shown as answers.

Format GridColumn of Decimal Field

1 Answer 256 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ujjwalkanti
Top achievements
Rank 1
Ujjwalkanti asked on 02 Mar 2017, 11:43 AM

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

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 06 Mar 2017, 07:47 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Ujjwalkanti
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or