Customize the field type in Kendo UI Grid based on specific row criteria

Dealing with a predicament that is proving to be quite challenging. I have a kendo grid that is being populated with data from a JSON file.

The issue lies in the fact that the JSON file contains a field with varying types across different elements.

Allow me to illustrate this with an example:

"listaPreguntas": [
    {
        "idPregunta": 1126,
        "idTipificacion": 1712,
        "tipoPregunta": "E",
        "pregunta": "¿DE QUE COLOR ES?",
        "numeroOrden": 2,
        "respuestasPosibles": [
            {
                "idRespuestaPosible": 1066,
                "respuestaPosible": "HOSPITAL"
            },
            ...
        ],
        "idTipoEnumerado": 1
    },
    ...

The JSON file contains three objects, each with a different type: "E" (enumerated values), "T" (text), and "F" (boolean).

My objective is to display a column in the grid whose type dynamically changes based on the type of data present in the JSON. This means having the ability to show text values, checkboxes, and dropdown boxes as needed.

I hope my explanation was clear.

Thank you for your assistance.

javascriptangularjsjsonkendo-ui

Answer №1

Check out this example for a personalized editor on the Telerik documentation

$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    editor: function(container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     input.appendTo(container);

     if(options.model.tipoPregunta == 'E')
     {
         input.kendoDropDownList( ... );
     }
     if(options.model.tipoPregunta == 'T')
     {
          ....
     }
     if(options.model.tipoPregunta == 'F')
     {
          ....
     }
    }
  } ],
  editable: true,
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

options.model represents a row's dataItem

Answer №2

To implement a template for a column in your grid configuration, follow these steps:

columns: [{
  field: "potentialAnswers",
  template: function(entry){
    if ( (entry.questionType === 'E') && $.isArray(entry.potentialAnswers) ){
      var result = '';
      $.each(entry.potentialAnswers, function(index, answer){
        result += answer.answerText + '(' + answer.answerId + ')<br>';
      });
      return result;
    }
    else{
      // The cell will display a dash
      return '-';
    }
  }, ....
]

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

styled(MyComponent) will display MyComponent as is, without any extra styling applied

Two React components I have are utilizing styled-components. The first one named Div simply renders a basic div: import React from "react"; import styled from "styled-components"; export default function Div(props) { return <StyledDiv>{props.chil ...

javascriptreactjsstyled-components

Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS? function myFunction() { alert("Record Save"); } Thank you in advance! ...

javascriptcss

Using $.ajax() to store data in the database

Is there a way to save dynamically generated elements from my application.js file into the database? Would the code be similar to this example?: $.ajax({ type: "POST", data: { title: 'oembed.title', thumbnail_url: 'oembed.thumbnail_ur ...

javascriptruby-on-railsajaxjquery

Utilizing Jquery or Javascript to Establish a Fresh Perspective for CylinderGeometry with Three.js

I'm attempting to change the dimensions of a cylinder created using examples from Three.js at runtime, but my code doesn't seem to be working. Here is the code snippet I am using: HTML <script src="http://www.html5canvastutorials.com/librari ...

javascriptjquerythree.js

Leveraging ng-switch with ng-repeat in AngularJS to dynamically apply HTML based on conditions

I have a paginated list of video thumbnails that I want to showcase in a Bootstrap fluid grid. To achieve this, I am utilizing a nested ng-repeat loop to iterate through each list for pagination purposes. Within the inner loop, another ng-repeat is used to ...

javascripttwitter-bootstrapangularjs

Find all objects in an array of objects that contain at least one value that matches a given string

I am currently integrating search functionality in my application. The UI search results are generated from an array of objects. My goal is to loop through the name, custNumber, and sneak values in each object and display only the ones that contain a subst ...

javascriptarrayssortingvue.jsfiltering

Incorporating personalized attributes into an ejs template

Within my nodejs project, I am utilizing the ejs template engine to output a text element using this code snippet <%- text_field_tag('empId', '', {id: 'empId', Class: 'some_class', type: 'text'}) %> ...

angularjsnode.jsejs

Prevent scripts from loading using particular URLs

I have an HTML document and I am loading a script inside it like this: <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorX ...

javascripthtml

d3 split bar chart with a horizontal layout

https://i.sstatic.net/P6qck.png I am interested in creating a split difference bar chart using d3 similar to the image provided. I have two input arrays - one for y-axis labels and one for data as shown below: data = [[35,90], [60,45], [80,90], [95,90]] m ...

javascripttypescriptd3.jsdata-visualizationdata-science

Creating Secure JWT Tokens

Hello there! I'm currently in need of assistance with generating JWT tokens that include three headers: alg, kid, and typ. The format I am looking for is as follows: { "alg": "RS256", "kid": "vpaas-magic-cookie-1 ...

javascriptjwtjitsijitsi-meet

Nested List in Vuetify Components

I am struggling to create a deeply nested list with more than three levels in Vue.js. When I attempt to nest children items inside a child item using v-list, nothing is displayed. Is it even feasible to have such a complex nested list structure in Vuetify ...

javascripthtmlvue.jsvuetify.js

How can I serialize a Dictionary containing Enumerations using JSON.Net?

How can I use JSON.Net to Serialize a Dictionary with two enumerations in MyClass? Alternatively, how do I serialize a Dictionary where MyClass has two enumerations? ...

json

What's the reason for seeing "1:powershell" in the terminal when using react.js?

Can anyone explain why the terminal shows "1:powershell" in react.js? https://i.sstatic.net/1LyHe.png https://i.sstatic.net/5K95B.png ...

javascriptreactjsvisual-studio-codeterminalreact-router

Instead of using an ID in javaScript, opt for $(this) instead

Is there a way to utilize $(this) instead of an ID in the option select function in javaScript? var tot = 5 * ($( "#firstOne option:selected" ).text()); In the scenario mentioned above, I aim to substitute $(this) for #firstOne, allowing this functional ...

javascriptjquery

A guide on organizing items with matching property values in NodeJS

I have 3 separate JSON arrays that contain error details categorized by type 1, 2, and 3. const data1 = [ { "ErrorType": "Error-1A", "Error": "wrong ip address for 1A", "SERVER_COUNT": 9 }, ...

javascriptnode.jsjsoncollectionshashmap

Issue accessing member value in inherited class constructor in Typescript

My situation involves a class named A, with another class named B that is inherited from it. class A { constructor(){ this.init(); } init(){} } class B extends A { private myMember = {value:1}; constructor(){ super(); ...

javascripttypescriptoopinheritanceecmascript-6

Having trouble getting my initial Vue.js code to function properly alongside basic HTML

I am in need of assistance with this code as it does not seem to be working properly. I am using an external js file named app.js for the Vue JS code in the index.html file. Here is the code from index.html: new vue({ el: '#app', data: { ...

javascripthtmlvue.js

Is there a way to continuously switch a CSS animation class without needing a second click?

I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...

javascriptcssanimationcss-animations

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

javascripthtmljavascript-objects

Utilizing Jquery for ASP.NET, an AJAX call dynamically populates a list

My user interface is designed to populate a select dropdown menu using data retrieved from a database through an AJAX call. The C# web method responsible for this operation is structured as follows: private static List<List<string>> componentT ...

javascriptc#jqueryasp.netajax