Tips for refining the data displayed on your Kendo Grid

I have implemented a Kendo grid in my view and I am looking to apply filters to the data displayed on the grid. The grid is populated from a list within my model.

@(Html.Kendo().Grid(Model.list)
    .Name("listgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("Name");
        columns.Bound(p => p.status).Title("status");
    })
    .Sortable()
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource)
)

Specifically, I am trying to filter the grid based on the 'Name' field. I attempted the following:

var datasource = new kendo.data.DataSource({
    data: [{name: "sasdas"}],
    filter: {
        logic: "or",
        filters:[
            { field: "Name", operator: "eq", value: "null" },
            { field: "Name", operator: "eq", value: "" }
        ]
    }
});

However, I seem to be missing something in my approach. Can anyone point out what I might be doing wrong here?

Answer №1

When considering separate rows for filters:

  @(Html.Kendo().Grid(Model.list)
        .Name("listgrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Title("Name").Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
            columns.Bound(p => p.status).Title("status").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
        })
        .Sortable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Resizable(resize => resize.Columns(true))
        .DataSource(dataSource => dataSource)
    )

If customizing the Filter Menu:

@(Html.Kendo().Grid(Model.list)
        .Name("listgrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Name).Title("Name");
            columns.Bound(p => p.status).Title("status");
        })
        .Sortable()
        .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )   
        .Resizable(resize => resize.Columns(true))
        .DataSource(dataSource => dataSource)
    )

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

I'm just starting to delve into React and I am eager to transform my regular JavaScript code into a React format. However, I am not quite sure how to

In my React JavaScript, I am trying to insert some regular JavaScript code. I attempted to use the {} brackets, but it did not work as expected. import './App.css'; function App() { return ( <> <div className=" ...

How to assign a global variable in Angular 2 from within a promise

I have encountered a strange issue while trying to assign a response to a global variable inside an observable. Here's the logic of my program: Fetch the latest playlists IDs from elastic search (using a type definition file for elastic search). T ...

Error: Trying to assign a value to a null property

I am facing an issue while trying to dynamically create "iframe's textarea" and insert the value of a variable. Unfortunately, I keep encountering an error. Any suggestions on how to resolve this problem? P.S: Using Google Chrome as the browser ...

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

Could javascript be considered insufficient for conducting complex fluid simulations due to its speed limitations?

Currently, I am tackling the challenge of implementing a small fluid simulation in P5js. My attempt involved rendering 20,000 squares with random colors, but I only achieved a frame rate of 2.xxx. var sim; var xdim = 200; var xLength; var ydim = 100; var ...

Encountered an ERESOLVE error when attempting to install a package, unable to resolve the dependency tree

After attempting to install the necessary dependencies for my project with npm install, an error message came up that I am unable to decipher: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: &l ...

Error: The function _this[("render" + data.type)] is not defined as a valid function

https://i.stack.imgur.com/Y5Dz5.jpg I encountered an error in the console that I can't seem to figure out. Despite following the Syncfusion library's documentation, the error persists. Here is the code snippet that I implemented: import React f ...

Comparing JSON files in JavaScript to identify and extract only the new objects

I need a way to identify and output the newly added objects from two JSON files based on their "Id" values. It's important for me to disregard changes in object positions within the files and also ignore specific key-value changes, like Greg's ag ...

Animating background images using a single data attribute

I'm attempting to create a smooth animation between different background images stored in a single data attribute. The goal is for each image to load sequentially, with the first one appearing immediately and the rest following after a 5-second delay. ...

Utilizing WebXR controllers for interactive button actions in three.js

Exploring the realm of mapping out controls for the Oculus Quest and other devices using three.js and webXR is an intriguing challenge I am currently facing. The current code I have developed successfully allows me to manipulate the controller, attach cyli ...

In JavaScript, I'm facing an issue where I can't seem to use ' ' for line breaks for some reason. It's not functioning as expected, and I'm

It seems that I have been struggling with writing a new line in my code using "\n". Despite multiple attempts, the desired outcome has not been achieved. Below is my source code along with a screenshot of the result: var ary3 = new Array('seve ...

Steps to resolve the error message 'Argument of type 'number' is not assignable to parameter of type 'string | RegExp':

Is there a way to prevent users from using special symbols or having blank spaces without any characters in my form? I encountered an error when trying to implement this in my FormGroup Validator, which displayed the message 'Argument of type 'nu ...

Phaser encountering a null window.computedStyle() error in Firefox (while dealing with a hidden Iframe)

I'm experiencing issues with Phaser game-engine games crashing specifically in Firefox. The error that keeps popping up is related to a hidden iframe containing the game, which is hidden due to a pre-game video ad being displayed. I keep getting a ...

Access an object's property from within a callback function

I have an async.series() function that is calling a method from another Javascript object: main.js var obj1 = require('./obj1'); var obj2 = require('./obj2'); async.series([ obj1.myFunc1, obj2.anotherFunc ]); obj1.js module ...

How can I retrieve the contents of input fields and showcase them in a dialog box?

<dialog> label id="show" label label id="show1" label </dialog> var x = document.getElementById("name").value; x = document.getElementById("show").innerHTML; var y = document.getElementById("matrix").value; y = document.getElementById("sho ...

reactjs error: Attempting to utilize the toLowerCase method on an undefined property during double mapping

My issue involves a JSON structure that requires mapping a function twice in a loop to access objects within an array. Once mapped, I need a textbox for searching the data list. However, I am encountering the following error: TypeError: Cannot read proper ...

Methods to troubleshoot problem of angular component loading issue in firefox with ViewEncapsulation.Native

I am encountering a problem with loading an angular component using ViewEncapsulation.Native in firefox, edge, and ipad chrome. Interestingly, there is no issue on safari on mac, chrome on windows, or chrome on android. Error: hostEl.createShadowRoot is ...

What are the best practices for managing live notifications with WebSocket technology?

I have developed a real-time chat application in React.js with Socket.io, but I want to implement a new feature. Currently, User A and User B can only communicate if they both have the chat open. I would like to notify User B with a popup/notification wh ...

When implementing components, Material UI encounters errors in trying to read properties of null

Currently, I am facing a challenge in displaying text using MUI in Next.js. I initialized my Next app using npx create-next-app. To troubleshoot the issue, I have attempted deleting node-modules and running npm i, repeating the process in the parent direct ...

Image Placement Based on Coordinates in a Graphic Display

Placing dots on a map one by one using CSS positions stored in arrays. var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}]; var ...