Virtualization in React Kanban component

29 Aug 202324 minutes to read

Kanban allows you to load a large amount of data without any performance degradation. This feature can be enabled by setting the enableVirtualization property in the Kanban to true.

Virtual scrolling

Virtual scrolling optimizes data rendering within each column when using large datasets. Only a subset of cards that are visible and about to be loaded on the screen are rendered. The number of records displayed in the Kanban is determined implicitly by the height of the Kanban area and the card height. The cardHeight property of Kanban can be used to set the cards’ height in pixel value. By default, the card height will be auto.

When the Kanban column is scrolled, the virtual scrolling feature dynamically loads additional data on demand into view and unloads the data that is no longer visible.

[Class-component]

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
    constructor() {
        super(...arguments);
    }
    generateKanbanDataVirtualScrollData() {
        var kanbanData = [];
        var BUG_TASKS = [
            'UI component not displaying images in IE browser',
            'Button not responding on hover action',
            'Text overlapping in mobile view',
            'Dropdown menu not functioning properly',
            'Form validation error',
            'Alignment issue in tables',
            'Column not loading completely',
            'Broken UI Designs',
            'Font size inconsistency',
            'UI element misaligned on scroll'
        ];
        var FEATURE_TASKS = [
            'Implement new user registration flow',
            'Add pagination to search results',
            'Improve accessibility for visually impaired users',
            'Create custom dashboard for users',
            'Develop user profile editing functionality',
            'Integrate with third-party API for weather data',
            'Implement social media sharing for articles',
            'Add support for multiple languages',
            'Create onboarding tutorial for new users',
            'Implement push notifications for mobile app'
        ];
        var EPIC_TASKS = [
            'Revamp UI design for entire application',
            'Develop mobile application for iOS and Android',
            'Create API for integration with external systems',
            'Implement machine learning algorithms for personalized recommendations',
            'Upgrade database infrastructure for scalability',
            'Integrate with payment gateway for subscription model',
            'Develop chatbot for customer support',
            'Implement real-time collaboration features for team projects',
            'Create analytics dashboard for administrators',
            'Introduce gamification elements to increase user engagement',
        ];
        var assignee = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack'];
        var status = ['Open', 'InProgress', 'Review', 'Testing', 'Close'];
        var priority = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low'];
        var types = ['Epic', 'Bug', 'Story'];
        var tagsField = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing'];
        var storyPoints = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8'];
        var count = 600000;
        for (let a = 500000, id = 500000; a < count; a++) {
            var typeValue = types[Math.floor(Math.random() * types.length)];
            var summary = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] :
                typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] :
                    EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)];
            kanbanData.push({
                Id: id,
                Type: typeValue,
                Priority: priority[Math.floor(Math.random() * priority.length)],
                Status: status[Math.floor(Math.random() * status.length)],
                Assignee: assignee[Math.floor(Math.random() * assignee.length)],
                StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)],
                Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]],
                Title: 'Task ' + id,
                Summary: summary,
            });
            id++;
        }
        return kanbanData;
    }
    render() {
        return <KanbanComponent id="KanbanVirtualScrolling" enableVirtualization={true} keyField="Status" dataSource={this.generateKanbanDataVirtualScrollData()} enableTooltip={true}
            cardSettings={{ headerField: "Id", contentField: "Summary", selectionType: 'Multiple' }}
            dialogSettings={{
                fields: [
                    { key: 'Id', text: 'ID', type: 'TextBox' },
                    { key: 'Status', text: 'Status', type: 'DropDown' },
                    { key: 'StoryPoints', text: 'Story Points', type: 'Numeric' },
                    { key: 'Summary', text: 'Summary', type: 'TextArea' }
                ]
            }} >
            <ColumnsDirective>
                <ColumnDirective headerText="To Do" keyField="Open" />
                <ColumnDirective headerText="In Progress" keyField="InProgress" />
                <ColumnDirective headerText="Code Review" keyField="Review" />
                <ColumnDirective headerText="Done" keyField="Close" />
            </ColumnsDirective>
        </KanbanComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";

class App extends React.Component<{}, {}>{
  constructor() {
    super(...arguments);
  }
  private generateKanbanDataVirtualScrollData(): Record<string, any>[] {
    const kanbanData: Record<string, any>[] = [];
    const BUG_TASKS: string[] = [
      'UI component not displaying images in IE browser',
      'Button not responding on hover action',
      'Text overlapping in mobile view',
      'Dropdown menu not functioning properly',
      'Form validation error',
      'Alignment issue in tables',
      'Column not loading completely',
      'Broken UI Designs',
      'Font size inconsistency',
      'UI element misaligned on scroll'
    ];
    const FEATURE_TASKS: string[] = [
      'Implement new user registration flow',
      'Add pagination to search results',
      'Improve accessibility for visually impaired users',
      'Create custom dashboard for users',
      'Develop user profile editing functionality',
      'Integrate with third-party API for weather data',
      'Implement social media sharing for articles',
      'Add support for multiple languages',
      'Create onboarding tutorial for new users',
      'Implement push notifications for mobile app'
    ];
    const EPIC_TASKS: string[] = [
      'Revamp UI design for entire application',
      'Develop mobile application for iOS and Android',
      'Create API for integration with external systems',
      'Implement machine learning algorithms for personalized recommendations',
      'Upgrade database infrastructure for scalability',
      'Integrate with payment gateway for subscription model',
      'Develop chatbot for customer support',
      'Implement real-time collaboration features for team projects',
      'Create analytics dashboard for administrators',
      'Introduce gamification elements to increase user engagement',
    ];

    const assignee: string[] = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack'];
    const status: string[] = ['Open', 'InProgress', 'Review', 'Testing', 'Close'];
    const priority: string[] = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low'];
    const types: string[] = ['Epic', 'Bug', 'Story'];
    const tagsField: string[] = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing'];
    const storyPoints: string[] = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8'];
    const count: number = 60000;
    for (let a: number = 50000, id: number = 50000; a < count; a++) {
      const typeValue: string = types[Math.floor(Math.random() * types.length)];
      const summary: string = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] :
        typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] :
          EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)];
      kanbanData.push({
        Id: id,
        Type: typeValue,
        Priority: priority[Math.floor(Math.random() * priority.length)],
        Status: status[Math.floor(Math.random() * status.length)],
        Assignee: assignee[Math.floor(Math.random() * assignee.length)],
        StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)],
        Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]],
        Title: 'Task ' + id,
        Summary: summary,
      });
      id++;
    }
    return kanbanData;
  }
  render() {
    return <KanbanComponent id="KanbanVirtualScrolling" enableVirtualization={true} keyField="Status" dataSource={this.generateKanbanDataVirtualScrollData()} enableTooltip={true}
      cardSettings={{ headerField: "Id", contentField: "Summary", selectionType: 'Multiple' }}
      dialogSettings={{
        fields: [
          { key: 'Id', text: 'ID', type: 'TextBox' },
          { key: 'Status', text: 'Status', type: 'DropDown' },
          { key: 'StoryPoints', text: 'Story Points', type: 'Numeric' },
          { key: 'Summary', text: 'Summary', type: 'TextArea' }
        ]
      }} >
      <ColumnsDirective>
        <ColumnDirective headerText="To Do" keyField="Open" />
        <ColumnDirective headerText="In Progress" keyField="InProgress" />
        <ColumnDirective headerText="Code Review" keyField="Review" />
        <ColumnDirective headerText="Done" keyField="Close" />
      </ColumnsDirective>
    </KanbanComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('kanban'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Local Data</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Local Data" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='kanban'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

[Functional-component]

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
  return (<KanbanComponent id="KanbanVirtualScrolling" enableVirtualization={true} keyField="Status"
    dataSource={generateKanbanDataVirtualScrollData()} enableTooltip={true}
    cardSettings={{ headerField: "Id", contentField: "Summary", selectionType: 'Multiple' }}
    dialogSettings={{
      fields: [
        { key: 'Id', text: 'ID', type: 'TextBox' },
        { key: 'Status', text: 'Status', type: 'DropDown' },
        { key: 'StoryPoints', text: 'Story Points', type: 'Numeric' },
        { key: 'Summary', text: 'Summary', type: 'TextArea' }
      ]
    }}>
    <ColumnsDirective>
      <ColumnDirective headerText="To Do" keyField="Open" />
      <ColumnDirective headerText="In Progress" keyField="InProgress" />
      <ColumnDirective headerText="Code Review" keyField="Review" />
      <ColumnDirective headerText="Done" keyField="Close" />
    </ColumnsDirective>
  </KanbanComponent>);
  function generateKanbanDataVirtualScrollData() {
    var kanbanData = [];
    var BUG_TASKS = [
      'UI component not displaying images in IE browser',
      'Button not responding on hover action',
      'Text overlapping in mobile view',
      'Dropdown menu not functioning properly',
      'Form validation error',
      'Alignment issue in tables',
      'Column not loading completely',
      'Broken UI Designs',
      'Font size inconsistency',
      'UI element misaligned on scroll'
    ];
    var FEATURE_TASKS = [
      'Implement new user registration flow',
      'Add pagination to search results',
      'Improve accessibility for visually impaired users',
      'Create custom dashboard for users',
      'Develop user profile editing functionality',
      'Integrate with third-party API for weather data',
      'Implement social media sharing for articles',
      'Add support for multiple languages',
      'Create onboarding tutorial for new users',
      'Implement push notifications for mobile app'
    ];
    var EPIC_TASKS = [
      'Revamp UI design for entire application',
      'Develop mobile application for iOS and Android',
      'Create API for integration with external systems',
      'Implement machine learning algorithms for personalized recommendations',
      'Upgrade database infrastructure for scalability',
      'Integrate with payment gateway for subscription model',
      'Develop chatbot for customer support',
      'Implement real-time collaboration features for team projects',
      'Create analytics dashboard for administrators',
      'Introduce gamification elements to increase user engagement',
    ];
    var assignee = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack'];
    var status = ['Open', 'InProgress', 'Review', 'Testing', 'Close'];
    var priority = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low'];
    var types = ['Epic', 'Bug', 'Story'];
    var tagsField = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing'];
    var storyPoints = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8'];
    var count = 600000;
    for (let a = 500000, id = 500000; a < count; a++) {
      var typeValue = types[Math.floor(Math.random() * types.length)];
      var summary = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] :
        typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] :
          EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)];
      kanbanData.push({
        Id: id,
        Type: typeValue,
        Priority: priority[Math.floor(Math.random() * priority.length)],
        Status: status[Math.floor(Math.random() * status.length)],
        Assignee: assignee[Math.floor(Math.random() * assignee.length)],
        StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)],
        Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]],
        Title: 'Task ' + id,
        Summary: summary,
      });
      id++;
    }
    return kanbanData;
  }
}
ReactDOM.render(<App />, document.getElementById('kanban'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";

function App() {
  return (
    <KanbanComponent id="KanbanVirtualScrolling" enableVirtualization={true} keyField="Status"
      dataSource={generateKanbanDataVirtualScrollData()} enableTooltip={true}
      cardSettings={{ headerField: "Id", contentField: "Summary", selectionType: 'Multiple' }}
      dialogSettings={{
        fields: [
          { key: 'Id', text: 'ID', type: 'TextBox' },
          { key: 'Status', text: 'Status', type: 'DropDown' },
          { key: 'StoryPoints', text: 'Story Points', type: 'Numeric' },
          { key: 'Summary', text: 'Summary', type: 'TextArea' }
        ]
      }}>
      <ColumnsDirective>
        <ColumnDirective headerText="To Do" keyField="Open" />
        <ColumnDirective headerText="In Progress" keyField="InProgress" />
        <ColumnDirective headerText="Code Review" keyField="Review" />
        <ColumnDirective headerText="Done" keyField="Close" />
      </ColumnsDirective>
    </KanbanComponent>
  );
  function generateKanbanDataVirtualScrollData(): Record<string, any>[] {
    const kanbanData: Record<string, any>[] = [];
    const BUG_TASKS: string[] = [
      'UI component not displaying images in IE browser',
      'Button not responding on hover action',
      'Text overlapping in mobile view',
      'Dropdown menu not functioning properly',
      'Form validation error',
      'Alignment issue in tables',
      'Column not loading completely',
      'Broken UI Designs',
      'Font size inconsistency',
      'UI element misaligned on scroll'
    ];
    const FEATURE_TASKS: string[] = [
      'Implement new user registration flow',
      'Add pagination to search results',
      'Improve accessibility for visually impaired users',
      'Create custom dashboard for users',
      'Develop user profile editing functionality',
      'Integrate with third-party API for weather data',
      'Implement social media sharing for articles',
      'Add support for multiple languages',
      'Create onboarding tutorial for new users',
      'Implement push notifications for mobile app'
    ];
    const EPIC_TASKS: string[] = [
      'Revamp UI design for entire application',
      'Develop mobile application for iOS and Android',
      'Create API for integration with external systems',
      'Implement machine learning algorithms for personalized recommendations',
      'Upgrade database infrastructure for scalability',
      'Integrate with payment gateway for subscription model',
      'Develop chatbot for customer support',
      'Implement real-time collaboration features for team projects',
      'Create analytics dashboard for administrators',
      'Introduce gamification elements to increase user engagement',
    ];

    const assignee: string[] = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack'];
    const status: string[] = ['Open', 'InProgress', 'Review', 'Testing', 'Close'];
    const priority: string[] = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low'];
    const types: string[] = ['Epic', 'Bug', 'Story'];
    const tagsField: string[] = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing'];
    const storyPoints: string[] = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8'];
    const count: number = 60000;
    for (let a: number = 50000, id: number = 50000; a < count; a++) {
      const typeValue: string = types[Math.floor(Math.random() * types.length)];
      const summary: string = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] :
        typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] :
          EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)];
      kanbanData.push({
        Id: id,
        Type: typeValue,
        Priority: priority[Math.floor(Math.random() * priority.length)],
        Status: status[Math.floor(Math.random() * status.length)],
        Assignee: assignee[Math.floor(Math.random() * assignee.length)],
        StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)],
        Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]],
        Title: 'Task ' + id,
        Summary: summary,
      });
      id++;
    }
    return kanbanData;
  }
}
ReactDOM.render(<App />, document.getElementById('kanban'));

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Local Data</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Local Data" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='kanban'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Configure the remote data service

When the remote data is configured for the dataSource, the service method will receive an additional KanbanVirtualization parameter to handle the initial data load for Kanban Virtualization.

To handle Kanban virtual scrolling, the server-side code needs to handle the Where and Take queries differently using the KanbanVirtualization parameter. The following is the example code for handling Kanban virtualization’s initial data load using the KanbanVirtualization parameter.

public IActionResult LoadCard([FromBody] ExtendedDataManagerRequest dm)
{
    kanbanData = _context.KanbanCards.ToList();
    IEnumerable<KanbanCard> DataSource = kanbanData.AsEnumerable();
    DataOperations operation = new DataOperations();
    // For normal kanban data load `Where` query handling.
    if (dm.Where != null && dm.Where.Count > 0 && dm.KanbanVirtualization != "KanbanVirtualization")
    {
        dm.Where[0].value = dm.Where[0].value.ToString();
        DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
    }
    if (dm.Skip != 0)
    {
        DataSource = operation.PerformSkip(DataSource, dm.Skip);
    }
    // For normal Kanban data load `Take` query handling.
    if (dm.Take != 0 && dm.KanbanVirtualization != "KanbanVirtualization")
    {
        DataSource = operation.PerformTake(DataSource, dm.Take);
    }
    // For Kanban virtual scrolling data load `Where` and `Take` query handling.
    var columnCount = new List<KeyValuePair<string, int>>();
    if (dm.KanbanVirtualization == "KanbanVirtualization" && dm.Where != null && dm.Where.Count > 0 && dm.Take != 0)
    {
        IEnumerable<KanbanCard> currentData = new List<KanbanCard>();
        List<WhereFilter> currentFilter = new List<WhereFilter>();
        for (int i = 0; i < dm.Where.Count; i++)
        {
            dm.Where[i].value = dm.Where[i].value.ToString();
            currentFilter.Add(dm.Where[i]);
            var filterData  = operation.PerformFiltering(DataSource, currentFilter, dm.Where[i].Operator);
            columnCount.Add(new KeyValuePair<string, int>(dm.Where[i].value.ToString(), filterData.Count()));
            filterData = operation.PerformTake(filterData, dm.Take);
            currentData = currentData.Concat(filterData);
            currentFilter.Clear();
        }
        DataSource = currentData;
    }
    // To return the data for Kanban virtual scrolling.
    if (dm.KanbanVirtualization == "KanbanVirtualization") {
        return Json(new { result = DataSource, count = columnCount });
    }
    // To return the data for Kanban virtual scrolling.
    else
    {
        return Json(DataSource);
    }
}

Limitations for virtual scrolling

• When virtualization is enabled in a Kanban board and the card height is not explicitly set, it will not default to auto height. Instead, a fixed height of 100px will be applied to the cards. It’s important to note that the card height should be specified in pixel values, as percentage values are not accepted.
• When a card is dragged and dropped, the index position of the card will not be preserved when scrolling through the column.
• Virtualization is not supported for swimlanes in the Kanban board.