Show kendo.toString as 0

I'm facing an issue with my kendoGrid setup. Here's the problem: I have a 0 in my database, but when I use kendo.tostring in the template for kendoGrid, it doesn't display the 0. However, when I have 0.2, the kendo.tostring displays 0.2. How can I make it display only 0?

Here is my JavaScript code:

$("#tab_intensite").kendoGrid({
    dataSource: intensite_data,
    scrollable: true,
    sortable: true,
    pageable: false,
    detailInit: function(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                data: intensite,
                filter: {
                    field: "idDepart",
                    operator: "eq",
                    value: e.data.idDepart
                }
            },
            columns: [{
                field: "intituledep",
                title: "D&EacuteSIGNATION"
            }]
        });
    },
    editable: true,
    height: 400,
    change: function() {
        console.log($this);
        $this.attr("font-weight", "bold");
    },
    save: function() {
        $("#tableau_saisie_intensite").data("kendoGrid").dataSource.update;
        $("#tableau_saisie_intensite").data("kendoGrid").refresh();
        $("#tableau_saisie_intensite").data("kendoGrid").dataSource.bind("change", function(e) {
            setdatasourcessss();
        });
    },
    columns: [{
        field: "cel",
        title: "D&Eacute;PART",
        width: 50,
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "date_releve",
        title: "Date Relev&eacute;",
        width: 50,
        format: "{0:dd/MM/yyyy }",
        attributes: {
            style: "text-align: center;"
        },
        headerAttributes: {
            style: "text-align: center;"
        },
        footerTemplate: "<div id='date_intensite_total' style='width:98%;position:relative;text-align: center;'  ></div> "
    }, {
        field: "n",
        title: "N",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#= (n) ? kendo.toString(n)+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph1",
        title: "PH1",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph2",
        title: "PH2",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#=(ph2) ?kendo.toString(ph2)+ ' A': ''# <span style='float: right;' class='k-icon k-edit'></span> ",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph3",
        title: "PH3",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#=(ph3) ?kendo.toString(ph3, 'n')+ ' A' : ''# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }],
});

If anyone has suggestions or solutions, they would be greatly appreciated! Thank you in advance!!

Answer №1

There doesn't seem to be any issue with the kendo.toString() functions in your code. However, there is a problem with the ternary operation within the template field.

template: (n) ? kendo.toString(n) + ' A' : ''

In the ternary statement above, when n equals to 0, it returns '' because 0 evaluates as a falsy value. To resolve this issue, you should change the empty string '' to '0'.

The necessary changes must be applied to the template fields for columns n, ph1, ph2, and ph3.

columns: [
    ....
    {
        field: "n",
        template: "#= (n) ? kendo.toString(n)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        ...
    },
    {
        field: "ph1",
        template: "#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        ...
    },
    {
        field: "ph2",
        template: "#=(ph2) ?kendo.toString(ph2)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span> ",
        ...
    },
    {
        field: "ph3",
        template: "#=(ph3) ? kendo.toString(ph3, 'n')+ ' A' : '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        ...
    },
],

You can find the complete fixed code snippet below, execute it to observe the result.

var data = [{
    "cel": "a",
    "date_releve": "a",
    "n": 0.2,
    "ph1": 0,
    "ph3": 0.2,
    "ph2": 0.5
}]

$("#grid").kendoGrid({
    dataSource: data,
    scrollable: true,
    sortable: true,
    pageable: false,
    detailInit: function(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                data: intensite,
                filter: {
                    field: "idDepart",
                    operator: "eq",
                    value: e.data.idDepart
                }
            },
            columns: [{
                field: "intituledep",
                title: "D&EacuteSIGNATION"
            }]
        });
    },
    editable: true,
    height: 400,
    change: function() {
        console.log($this);
        $this.attr("font-weight", "bold");
    },
    save: function() {
        $("#tableau_saisie_intensite").data("kendoGrid").dataSource.update;
        $("#tableau_saisie_intensite").data("kendoGrid").refresh();
        $("#tableau_saisie_intensite").data("kendoGrid").dataSource.bind("change", function(e) {
            setdatasourcessss();
        });
    },
    columns: [{
        field: "cel",
        title: "D&Eacute;PART",
        width: 50,
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "date_releve",
        title: "Date Relev&eacute;",
        width: 50,
        format: "{0:dd/MM/yyyy }",
        attributes: {
            style: "text-align: center;"
        },
        headerAttributes: {
            style: "text-align: center;"
        },
        footerTemplate: "<div id='date_intensite_total' style='width:98%;position:relative;text-align: center;'  ></div> "
    }, {
        field: "n",
        title: "N",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#= (n) ? kendo.toString(n)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph1",
        title: "PH1",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#= (ph1) ? kendo.toString(ph1, 'n')+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph2",
        title: "PH2",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#=(ph2) ?kendo.toString(ph2)+ ' A': '0'# <span style='float: right;' class='k-icon k-edit'></span> ",
        headerAttributes: {
            style: "text-align: center;"
        }
    }, {
        field: "ph3",
        title: "PH3",
        width: 50,
        attributes: {
            style: "text-align: center;"
        },
        footerTemplate: "#= kendo.toString(sum, 'n') # A",
        template: "#=(ph3) ?kendo.toString(ph3, 'n')+ ' A' : '0'# <span style='float: right;' class='k-icon k-edit'></span>",
        headerAttributes: {
            style: "text-align: center;"
        }
    }],
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<div id="grid"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a MongoDB schema for scheduling interview time slots

I am in the process of developing a website that allows administrators to create interviews by choosing participants, start times, and end times. I have categorized the participants into two groups - Applicants and Team_Members. Initially, I considered cre ...

Cascading autocomplete has encountered an error with the selected word or has not been chosen

I am facing an issue with my autocomplete input box. The problem is that when I select an option from the dropdown, the code only captures the text I typed in and not the selected entry. For example, if I type "TE" and the dropdown shows "TEST" and "TESTS" ...

Error: the function document.title is not defined and cannot be executed, occurring on line 31

I am currently working on a notification script using JavaScript, but when I try to run the js, I encounter the following error: Uncaught TypeError: document.title is not a function This is my script: function notification() { $.ajaxSetup({ cache: ...

"Cross-Origin Resource Sharing issues in Internet Explorer versions 10 and 11 with Status Code

Having trouble with an IE bug that's puzzling me. I'm only focusing on supporting IE 10 and 11, so I thought this code would work just fine. The issue arises when I make an AJAX request: $.ajax({ type: {method}, url: {url}, cache: ...

Extract data from JSON in Google Sheets

UPDATE: entry.content.$t is actually not the correct field to access individual cells. The proper method is using entry.gsx$[cell column header]. Thank you for pointing out this mistake and assisting in finding a solution. Initial inquiry: I am currently ...

MongoDb Mongoose's aggregatePagination feature occasionally displays duplicated documents across various pages

Currently, I am encountering an issue related to pagination in mongodb and mongoose. My goal is to search through a group of Tutors based on certain criteria and have the results paginated and sorted by their updated date. However, the problem arises when ...

Guide on using an obfuscator-loader on TypeScript files alongside ts-loader

I am looking to compile my TypeScript code into JavaScript and then apply an obfuscation loader to further secure it. Despite trying various approaches, I have been unable to successfully achieve this task. I attempted setting up an entry point for the b ...

The timer freezes briefly at 1:60 before switching to 1:01

I'm in the process of creating a website for Rubik's cube scrambling and timing, and everything seems to be working well so far. I have implemented a scrambler, a timer, and a list of recorded times (still a work in progress). The timer is functi ...

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

Error message: The variable "data" is not defined in next.js

Being new to React, I recently used getStaticprops to retrieve data from an API for a filter gallery project. However, I encountered an issue when trying to access the {props: data} outside of the blog function - it resulted in a Reference Error stating th ...

Issue encountered when attempting to retrieve text input from text box within a C# (ASP.NET gridview) segment

Every time I attempt to retrieve a value from a textbox, I encounter this error (as shown in the image) and I am at a loss as to how to resolve it. My code is as follows: protected void Button3_Click(object sender, EventArgs e) { _controller = ...

Dynamic AngularJS Content Loader

I am attempting to utilize angularJS in order to dynamically load content from my HTML using ajax calls. My goal is to create a single method that can handle different parameters to specify the ajax/REST uri and display the results in various components. B ...

What is the best way to retrieve a specific value from a nested array that is within an array of objects

My goal is to extract a specific field value from a nested array within an object array. Using the map method, I attempted to achieve this but ended up with two empty arrays nested inside two empty objects. Though I am aware of this mistake, it indicates t ...

Best practices for invoking Javascript to determine the scrollHeight of an element

Currently, I'm facing an issue with a page that contains an iframe. The parent site is built using php and the child site is in asp.net 2.0, both residing on separate domains that I manage. Most of the functionality relies on actions within the iframe ...

Break down for me what Json is in a way that a five-year-old could understand

Let me clarify one thing, I may not be a Javascript expert but I'm far from being 5 years old. Json is one concept that's been confusing me lately as I dive into the world of programming. Can someone please explain json to me in a simplified mann ...

assign a class to an element as you scroll

Is it possible to add a .class to an element when a user scrolls the page, and then remove it when scrolling stops? Specifically, I would like to apply the font awesome icon class fa-spin only while the page is being scrolled, and have the icon stop spinn ...

A guide on utilizing JavaScript to fetch data from a database and generate an array

Looking for help with extracting product names from a database table called Product_table. The table consists of three columns: product_name, product_info, and product_cost. I want to execute the SQL query 'SELECT product_name FROM product_table&apos ...

internet explorer 11 not properly aligning text to center

I've encountered an issue with center-aligning a canvas and overlapping image on different browsers. While Chrome and Firefox display it correctly, Internet Explorer does not cooperate. The canvas is not centered, but the image is. I've tried var ...

Ways to display a variable prior to making an axios request

I have a get request that saves the result in a variable named name_student. How can I access this variable in other methods? Or how should I declare it? Here is the code snippet: getStudent(){ axios.get('https://backunizoom.herokuapp.com/student/2 ...

Is there a way to make Outlook show only the caption of a link instead of the entire URL?

In my PDF file, I have set up a button for sending an email. The email is a request that needs approval or denial. I want the recipient to respond with just 2 clicks: Click on either "Approve" or "Deny" (a new email will pop up) Click on "send" - and it& ...