Manipulating ListView as a grid layout in React ListView component

23 Jan 202524 minutes to read

In ListView, list items can be rendered in a grid layout with the following data manipulations:

  • Add Item
  • Remove Item
  • Sort Items
  • Filter Items

Grid Layout

In this section, we will discuss the rendering of list items in a grid layout.

  • Initialize and render ListView with a dataSource, which will initially render list items in a list layout.

  • Now, add the following CSS to the list items. This will make list items render in a grid layout:

#default-list .e-list-item {
        height: 100px;
        width: 100px;
        float: left;
}

In the sample below, we have rendered List items in a grid layout.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './index.css';
function App() {
    //Define an array of number
    let data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    function listtemplate() {
        return (<img id="listImage" src="https://ej2.syncfusion.com/documentation/code-snippet/listview/grid-layout-cs1/apple.png" alt="apple" />);
    };
    return (<ListViewComponent id='list' dataSource={data} template={listtemplate}>
    </ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {

  //Define an array of number
  let data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  function listtemplate(): JSX.Element {
    return (
      <img id="listImage" src="https://ej2.syncfusion.com/documentation/code-snippet/listview/grid-layout-cs1/apple.png" alt="apple" />
    )
  };

  return (
    <ListViewComponent id='list'
      dataSource={data}
      template={listtemplate as any} >
    </ListViewComponent>
  )
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#list {
  display: block;
  max-width: 303px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

#list .e-list-item {
  height: 100px;
  width: 100px;
  float: left;
  padding: 0;
}

#listImage {
  width: 55px;
  height: 55px;
  margin-left: 20px;
  margin-top: 20px;

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

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Data manipulation

In this section, we will discuss ListView data manipulations.

Add Item

We can add a list item using the addItem API. This will accept an array of data as an argument.

 listViewInstance.addItem([{text: 'Apricot', id: '32'}]);

In the below sample, you can add new fruit item by clicking add button which will open dialog box with fruit name and image URL text box. After entering the item details, click the add button. This will add your new fruit item.

Remove item

We can remove a list item using removeItem API. This will accept fields with id or list item element as argument.

 listViewInstance.removeItem({id: '32'});

In the below sample, you can remove fruit by hovering the fruit item which will show delete button and click that delete button to delete that fruit from your list.

Sort Items

ListView can be sorted either in Ascending or Descending order. To enable sorting in your ListView, set sortOrder as Ascending or Descending.

<ListViewComponent id='list' sortOrder= 'Ascending'></ListViewComponent>

We can also set sorting after component initialization.

listViewInstance.sortOrder = 'Ascending'

In the below sample, we have sorted fruits in Ascending order. To sort it in descending, click on sort order icon and vice versa.

Filter Items

ListView data can be filtered with the help of dataManager. After filtering the data, update ListView dataSource with filtered data.

let value = filterInput.value;  //input text box value
let filteredData = new DataManager(listdata).executeLocal(
        new Query().where("text", "startswith", value, true)
);

listViewInstance.dataSource = filteredData;

In the sample below, you can filter fruit items using the search text box. This will filter fruit items based on your input. Here we used startswith of input text to filter data in DataManager.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { closest } from '@syncfusion/ej2-base';
import { DataManager, Query } from "@syncfusion/ej2-data";
import { DialogComponent } from '@syncfusion/ej2-react-popups';
function App() {
    let ascClass = "e-sort-icon-ascending";
    let desClass = "e-sort-icon-descending";
    //Define an array of JSON data
    let fruitsdata = [
        { text: "Date", id: "1", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/dates.jpg" },
        { text: "Fig", id: "2", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/fig.jpg" },
        { text: "Apple", id: "3", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/apple.png" },
        { text: "Apricot", id: "4", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/apricot.jpg" },
        { text: "Grape", id: "5", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/grape.jpg" },
        { text: "Strawberry", id: "6", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/strawberry.jpg" },
        { text: "Pineapple", id: "7", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/pineapple.jpg" },
        { text: "Melon", id: "8", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/melon.jpg" },
        { text: "Lemon", id: "9", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/lemon.jpg" },
        { text: "Cherry", id: "10", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/cherry.jpg" }
    ];
    let add = null;
    let search = null;
    let sort = null;
    let imgURL = null;
    let name = null;
    let dialogInstance = null;
    let listviewInstance = null;
    let buttonObj = [
        {
            click: dlgButtonClick.bind(this),
            buttonModel: { content: "Add", isPrimary: true }
        }
    ];
    function addItem() {
        if (name)
            name.value = "";
        if (imgURL)
            imgURL.value = "";
        if (dialogInstance)
            dialogInstance.show();
    }
    //Here we are removing list item
    function onDeleteBtnClick(e) {
        e.stopPropagation();
        let li = closest(e.currentTarget, ".e-list-item");
        let data = listviewInstance.findItem(li);
        listviewInstance.removeItem(data);
        new DataManager(fruitsdata).remove("id", { id: data["id"] });
    }
    //Here we are adding list item
    function dlgButtonClick() {
        if (listviewInstance && dialogInstance) {
            let name = document.getElementById('name').value;
            let url = document.getElementById('imgurl').value;
            let id = Math.random() * 10000;
            listviewInstance.addItem([{ text: name, id: id, imgUrl: url }]);
            fruitsdata.push({ text: name, id: id, imgUrl: url });
            dialogInstance.hide();
        }
    }
    //Here we are sorting list item
    function sortItems() {
        if (listviewInstance && sort) {
        let ele = sort.firstElementChild;
        let isDescending = ele.classList.toggle(desClass);
        ele.classList.toggle(ascClass, !isDescending);
        
        listviewInstance.sortOrder = isDescending ? "Descending" : "Ascending";
        listviewInstance.dataBind();
      }
    }
    //Here, the list items are filtered using the DataManager instance.
    function onKeyUp() {
        if (listviewInstance) {
            let value = search.value;
            let data = new DataManager(fruitsdata).executeLocal(new Query().where("text", "startswith", value, true));
            if (!value) {
                listviewInstance.dataSource = fruitsdata.slice();
            }
            else {
                listviewInstance.dataSource = data;
                listviewInstance.dataBind();
            }
        }
    }
    function content(data) {
        return (<div id="listDialog">
        <div className="input_name">
          <label htmlFor="name">Fruit Name: </label>
          <input id="name" ref={scope => {
                name = scope;
            }} className="e-input" type="text" placeholder="Enter fruit name"/>
        </div>
        <div>
          <label htmlFor="imgurl">Fruit Image: </label>
          <input id="imgurl" ref={scope => {
                imgURL = scope;
            }} className="e-input" type="text" placeholder="Enter image url"/>
        </div>
      </div>);
    }
    function listtemplate(data) {
        return (<div className="fruits">
        <div className="first">
          <img id="listImage" src={data.imgUrl} alt="fruit"/>
          <button className="delete e-control e-btn e-small e-round e-delete-btn e-primary e-icon-btn" data-ripple="true">
            <span className="e-btn-icon e-icons delete-icon" onClick={onDeleteBtnClick.bind(this)}/>
          </button>
        </div>
        <div className="fruitName">{data.text}</div>
      </div>);
    }
    return (<div id="container">
      <div className="headerContainer">
        <div className="e-input-group">
          <input id="search" ref={scope => {
            search = scope;
        }} className="e-input" type="text" onKeyUp={onKeyUp.bind(this)} placeholder="Search fruits"/>
          <span className="e-input-group-icon e-icons e-input-search"/>
        </div>

        <button id="sort" className="e-control e-btn e-small e-round e-primary e-icon-btn" ref={scope => {
            sort = scope;
        }} title="Sort fruits" onClick={sortItems.bind(this)} data-ripple="true">
          <span className="e-btn-icon e-icons e-sort-icon-ascending"/>
        </button>

        <button id="add" className="e-control e-btn e-small e-round e-primary e-icon-btn" ref={scope => {
            add = scope;
        }} onClick={addItem.bind(this)} title="Add fruit" data-ripple="true">
          <span className="e-btn-icon e-icons e-add-icon"/>
        </button>
      </div>

      <ListViewComponent id="list" dataSource={fruitsdata.slice()} template={listtemplate.bind(this)} sortOrder="Ascending" ref={scope => {
            listviewInstance = scope;
        }}/>

      <DialogComponent id="dialog" header="Add fruit" content={content.bind(this)} visible={false} buttons={buttonObj} ref={dialog => (dialogInstance = dialog)} width={"300px"} showCloseIcon={true}/>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { closest, enableRipple, MouseEventArgs } from '@syncfusion/ej2-base';
import { DataManager, Query } from "@syncfusion/ej2-data";
import { DialogComponent } from '@syncfusion/ej2-react-popups';

function App() {
  let ascClass: string = "e-sort-icon-ascending";
  let desClass: string = "e-sort-icon-descending";
  //Define an array of JSON data
  let fruitsdata: { [key: string]: Object }[] = [
    { text: "Date", id: "1", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/dates.jpg" },
    { text: "Fig", id: "2", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/fig.jpg" },
    { text: "Apple", id: "3", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/apple.png" },
    { text: "Apricot", id: "4", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/apricot.jpg" },
    { text: "Grape", id: "5", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/grape.jpg" },
    { text: "Strawberry", id: "6", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/strawberry.jpg" },
    { text: "Pineapple", id: "7", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/pineapple.jpg" },
    { text: "Melon", id: "8", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/melon.jpg" },
    { text: "Lemon", id: "9", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/lemon.jpg" },
    { text: "Cherry", id: "10", imgUrl: "https://ej2.syncfusion.com/documentation/code-snippet/listview/manipulation-cs1/cherry.jpg" }
  ];

  let add: HTMLElement | null = null;
  let search: HTMLInputElement | null = null;
  let sort: HTMLElement | null = null;
  let imgURL: HTMLInputElement | null = null;
  let name: HTMLInputElement | null = null;
  let dialogInstance: DialogComponent | null = null;
  let listviewInstance: ListViewComponent | null = null;
  let buttonObj = [
    {
      click: dlgButtonClick.bind(this),
      buttonModel: { content: "Add", isPrimary: true }
    }
  ];

  function addItem() {
    if (name) name.value = "";
    if (imgURL) imgURL.value = "";
    if (dialogInstance) dialogInstance.show();
  }

  //Here we are removing list item
  function onDeleteBtnClick(e: any) {
    e.stopPropagation();
    let li: Element = closest(e.currentTarget, ".e-list-item");
    let data = (listviewInstance as any).findItem(li);
    (listviewInstance as any).removeItem(data);
    new DataManager(fruitsdata).remove("id", { id: data["id"] });
  }

  //Here we are adding list item
  function dlgButtonClick() {
    if (listviewInstance && dialogInstance) {
      let name: string = (document.getElementById('name') as any).value;
      let url: string = (document.getElementById('imgurl') as any).value;
      let id: number = Math.random() * 10000;
      listviewInstance.addItem([{ text: name, id: id, imgUrl: url }]);
      fruitsdata.push({ text: name, id: id, imgUrl: url });
      dialogInstance.hide();
    }
  }

  //Here we are sorting list item
  function sortItems() {
    if (listviewInstance && sort) {
      let ele = sort.firstElementChild as HTMLElement;
      let isDescending = ele.classList.toggle(desClass);
      ele.classList.toggle(ascClass, !isDescending);
      
      listviewInstance.sortOrder = isDescending ? "Descending" : "Ascending";
      listviewInstance.dataBind();
    }
  }

  //Here, the list items are filtered using the DataManager instance.
  function onKeyUp() {
    if (listviewInstance) {
      let value: string = (search as any).value;
      let data: Object[] = new DataManager(fruitsdata).executeLocal(
        new Query().where("text", "startswith", value, true)
      );
      if (!value) {
        listviewInstance.dataSource = fruitsdata.slice();
      } else {
        listviewInstance.dataSource = data as { [key: string]: Object }[];
        listviewInstance.dataBind();
      }
    }
  }

  function content(data: any): JSX.Element {
    return (
      <div id="listDialog">
        <div className="input_name">
          <label htmlFor="name">Fruit Name: </label>
          <input
            id="name"
            ref={scope => {
              name = scope;
            }}
            className="e-input"
            type="text"
            placeholder="Enter fruit name"
          />
        </div>
        <div>
          <label htmlFor="imgurl">Fruit Image: </label>
          <input
            id="imgurl"
            ref={scope => {
              imgURL = scope;
            }}
            className="e-input"
            type="text"
            placeholder="Enter image url"
          />
        </div>
      </div>
    );
  }

  function listtemplate(data: any): JSX.Element {
    return (
      <div className="fruits">
        <div className="first">
          <img id="listImage" src={data.imgUrl} alt="fruit" />
          <button
            className="delete e-control e-btn e-small e-round e-delete-btn e-primary e-icon-btn"
            data-ripple="true"
          >
            <span
              className="e-btn-icon e-icons delete-icon"
              onClick={onDeleteBtnClick.bind(this)}
            />
          </button>
        </div>
        <div className="fruitName">{data.text}</div>
      </div>
    );
  }
  return (
    <div id="container">
      <div className="headerContainer">
        <div className="e-input-group">
          <input
            id="search"
            ref={scope => {
              search = scope;
            }}
            className="e-input"
            type="text"
            onKeyUp={onKeyUp.bind(this)}
            placeholder="Search fruits"
          />
          <span className="e-input-group-icon e-icons e-input-search" />
        </div>

        <button
          id="sort"
          className="e-control e-btn e-small e-round e-primary e-icon-btn"
          ref={scope => {
            sort = scope;
          }}
          title="Sort fruits"
          onClick={sortItems.bind(this)}
          data-ripple="true"
        >
          <span className="e-btn-icon e-icons e-sort-icon-ascending" />
        </button>

        <button
          id="add"
          className="e-control e-btn e-small e-round e-primary e-icon-btn"
          ref={scope => {
            add = scope;
          }}
          onClick={addItem.bind(this)}
          title="Add fruit"
          data-ripple="true"
        >
          <span className="e-btn-icon e-icons e-add-icon" />
        </button>
      </div>

      <ListViewComponent
        id="list"
        dataSource={fruitsdata.slice()}
        template={listtemplate.bind(this) as any}
        sortOrder="Ascending"
        ref={scope => {
          listviewInstance = scope;
        }}
      />

      <DialogComponent
        id="dialog"
        header="Add fruit"
        content={content.bind(this) as any}
        visible={false}
        buttons={buttonObj}
        ref={dialog => (dialogInstance = dialog)}
        width={"300px"}
        showCloseIcon={true}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#listImage {
    width: 55px;
    height: 55px;
    margin-left: 25px;
}

#container {
    max-width: 440px;
    margin: auto;
    box-shadow: 0 3px 6px lightgray;
}

.headerContainer {
    height: 48px;
    line-height: 48px;
    background: rgb(2, 120, 215);
    color: white;
    margin-bottom: 3px;
}

.headerContainer .e-input-group {
    margin-left: 20px;
    width: 200px;
    background: white;
    height: 31px;
}

.headerContainer #search {
    height: 21px;
    margin-left: 10px;
}

#listDialog .input_name {
    margin-bottom: 20px;
}

.headerContainer #add,
.headerContainer #sort {
    float: right;
    margin-right: 15px;
    margin-top: 7px;
    background: white;
    color: black
}

.headerContainer .e-input-search::before {
    content: '\e993';
    margin-top: 3px;
}

.headerContainer .e-input-group .e-input-search {
    padding: 0 10px 0 10px;
}

#list .e-list-item {
    height: 110px;
    width: 110px;
    float: left;
    padding: 0;
    position: relative;
    user-select: none;
}

#list .e-delete-btn {
    float: right;
    visibility: hidden;
    margin-top: -10px;
    width: 2em;
    height: 2em;
}

#list .e-round .delete-icon {
    font-size: 9px;
}

#list .e-list-item:hover .e-delete-btn {
    visibility: visible;
    background: red;
    border-radius: 50%;
}

#list .fruits {
    height: inherit;
    width: inherit;
    padding: 10px 0 10px 0;
}

#list .fruitName {
    text-align: center;
}

.headerContainer .e-add-icon::before {
    content: '\e823';
}

#list .delete-icon::before {
    content: '\e7fc';
    color: white;
}

.headerContainer .e-sort-icon-ascending::before {
    content: '\e840';
}

.headerContainer .e-sort-icon-descending::before {
    content: '\e83f';
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>