Display a specific template in the detail grid of the Kendo Grid depending on certain conditions

I've been using the Kendo Grid and it's been working well for me. I have a requirement to check each row in my grid to see if it contains a specific value, and based on that, bind data using different templates. Is this feasible? Below is the code snippet:

function detailInit(e) {
        var isCreateGrid = true;
        var masterRowId = e.data.uid;
        var data = [];
        $.ajax({
            type: "GET",
            url: 'https://www.domain.com/details?&transactionId=' + e.data.TransactionId,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            headers: { 'ccode': compCode },
            cache: false,
            async: false,
            success: function (result) {
                var jsonResult = JSON.parse(result);
                for (var i = 0; i < jsonResult.length; i++) {
                    if (jsonResult[i]["OldValue"] == null || jsonResult[i]["OldValue"] == '')
                        isCreateGrid = true;
                    else {
                        isCreateGrid = false;
                        break;
                    }
                }
                if (isCreateGrid) {
                    for (var i = 0; i < jsonResult.length; i++) {
                        data.push({ FieldUpdated: jsonResult[i]["ChangeColumns"], Value: jsonResult[i]["NewValue"] });
                    }
                } else {
                    for (var i = 0; i < jsonResult.length; i++) {
                        data.push({ FieldUpdated: jsonResult[i]["ChangeColumns"], Was: jsonResult[i]["OldValue"], Now: jsonResult[i]["NewValue"] });
                    }
                }
            }
        });
        var dataSource = new kendo.data.DataSource({ data: data });
        if (data.length == 0) {
            var grid = $("#logs").data("kendoGrid");
            grid.collapseRow("[data-uid='" + masterRowId + "']");
            grid.dataSource.read();
        } else {
            if (isCreateGrid) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: dataSource,
                    filter: { field: e.data.Log, operator: "contains", value: 'has created' },
                    columns:
                        [{ field: "FieldUpdated", title: "Field Updated", width: "50px" },
                        { field: "Value", title: "Value", width: "50px" }]
                });
            } else {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: dataSource,
                    filter: { field: e.data.Log, operator: "contains", value: 'has created' },
                    columns:
                        [{ field: "FieldUpdated", title: "Field Updated", width: "50px" },
                        { field: "Was", title: "Was", width: "50px" },
                        { field: "Now", title: "Now", width: "50px" }]
                });

            }
        }
    }

However, it seems like the condition isCreateGrid might be redundant because if one row doesn't meet the criteria, then all rows will use the template associated with the false condition.

Answer №1

Absolutely, you have the capability to do so. Here is the code snippet for your reference.

  $(gridId).kendoGrid({
    dataSource: {
        data: datasource
    },
    scrollable: true,
    sortable: true,
    resizable: true,
    columns: [
     { field: "MetricName", title: "Metric", width: "130px" },
     { field: "OnTrack", title: "On Track", template:'#:changeTemplate(OnTrack)#', width: "130px", attributes: { style: "text-align: center !important;" } },
     { field: "CurrentAmount", title: "Current", template: '$ #:parseFloat(CurrentAmount).toFixed(2)#', width: "130px" },
     { field: "RequiredAmount", title: "Required", template: '$ #:parseFloat(RequiredAmount).toFixed(2)#', width: "130px" }
    ]
});

function changeTemplate(value)
{
   Conditions based on Your Business Logic
if ()
    return "HTML Content Here";
else
    return "HTML Content Here";
}

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

Data vanishing in upcoming authentication session in test environment

I have encountered an issue with next auth in my next.js project. During development, the session data is lost if the server refreshes or if I switch to another tab and return to it. This forces me to sign out and then sign back in to restore the session d ...

Issue with OnChange Not Triggering

Why isn't the onchange property firing when typing in my textbox? Check out the code below: VB.NET Dim textBoxUrlYoutube As New TextBox divUrlTextBoxContainer.Controls.Add(textBoxUrlYoutube) textBoxUrlYoutube.CssClass = "textboxyo ...

Efficient PHP login process enhanced by jQuery

After a user logs out on my website, they are redirected to the home page. However, if they navigate back in their browser, it still shows them as logged in (although logged in features don't work). I am considering implementing a solution where I us ...

Looking to exit the application by utilizing the Home Button click?

Every time my app starts, it downloads JSON files. However, when the app goes into the background after clicking the home button and is resumed on another day, the JSON data appears incorrect causing the app to close with an error message. I want the app ...

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

Transferring the state from a parent component to a child function

I'm having trouble passing a state from a component to a function. I was able to pass the state from Home to ListHome, but I'm struggling to continue passing it to a function within ListHome (Slider) because it's a function. Even after revi ...

What are the ways to activate an element in vue js?

Is there a way to modify the code so that the function triggers with just one click instead of two? export default { methods: { remove(){ $('.remove-me button').click( function() { removeItem(this); }); ...

PassportJS ensuring secure authentication across all routes

Currently, I am implementing passportJS to secure my API Endpoints within an Express application. So far, the following code is functioning properly. app.get("/route1", passport.authenticate('basic', { session: false }), (req, res) => { ...

Show a specific item when selecting an option from a dropdown menu

Hey there, I have a question regarding creating a theme for the Genesis Framework. Right now, I'm facing a challenge with one particular element. Here's the situation: I've got two drop-down lists, but I only want the second one to be visib ...

I encountered a NullPointer exception while attempting to convert a Java ArrayList into a JSON object and store it within a single JSON array. Further details will be provided in the explanation section

Using ArrayLists as an example: list1 [lst1, lst2, lst3..] list2 [l1, l2, l3, ....] The desired outcome is as follows: [ { "key1": lst1, "key2": l1 } { "key1": lst2, "key2": l2 } ] I attempted the following code, but it resulted in a nullPointerExcepti ...

FireFox is unresponsive to OPTIONS requests

I have a webpage that is accessed through HTTP. The client-side code is making AJAX requests for authorization to the same domain, but using HTTPS, which causes CORS issues. When using FireFox, the request looks like this: // domains and cookies are chang ...

typescriptUsing redux: prevent parent component from accessing redux props

I'm currently using redux and typescript in my webapp project. What's the best approach for defining props in a component that receives redux-actions through @connect, as well as props from its parent? // mychild.tsx export namespace MyChildCom ...

How can I make a Java API request using JsonReader?

Having trouble figuring this out: I need to call the openweather api in java and display the result on the console. Can't seem to find any helpful tutorials, they all focus on parsing JSON from a file... Not sure if I'm on the right track? Tryin ...

HashRouter prevents the Framer Motion exit animation from functioning properly

Unfortunately, the exact same question was posted here. Despite no answers provided, I will share my problem as well: Originally, I was using BrowserRouter for routing, but faced issues with refreshing, so I switched to a simple solution using HashRouter ...

Locates every document where an array field includes a document that meets specific criteria

I am currently working with a MongoDB collection that stores all user data. Each document in my collection is represented in JSON format as follows: { "_id" : ObjectId("542e67e07f724fc2af28ba75"), "id" : "", "email" : "<a href="/cdn-cgi/l/ ...

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...

Are the SystemIndexes in MongoDB influenced by the database contents, or do they remain fixed regardless of changes in the configuration

Currently, we are utilizing full text search functionality on mongo 2.6 by creating indexes using the db.ensureIndex commands. After creating these indexes, we save them as systemIndexes so that developers can import test data with the necessary indexes in ...

Inject various JavaScript data into different div containers

The issue at hand is quite straightforward. Here is a sample for displaying a single variable in a div with the "container" ID: let first = 5; document.getElementById('container').innerHTML = first; <div id="container"></div> How ...

jQuery is unable to manipulate newly added DOM elements that have been loaded via AJAX

Having trouble with jquery ajax. Unable to interact with newly added element through ajax. Code snippet: $(".yorum_input").keypress(function(e) { if (e.keyCode == 13) { e.preventDefault(); var alt_id = $(this).attr('yorum_id'); va ...