We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Deatil template filtering

What is the correct way to filter records from data source in custom detail template?

Example below is from docs but it is using local data. I am using this but it does not filter - returns all records in source

function bindDetailData(args: DetailDataBoundEventArgs) {
    let data: Object = args.data;
    let sourceData: DataManager = new DataManager({url: '/fe/odata/sources', adaptor: new ODataV4Adaptor}, new Query().where('name', 'contains', 'ea').select('name'));
    let detail = new Grid({
        dataSource: sourceData,
        columns: [
            { field: 'name', headerText: 'Name' }
import { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
import { employeeData, data } from './datasource.ts';


let grid: Grid = new Grid({
    dataSource: employeeData.slice(2, 5),
    detailTemplate: '#detailtemplate',
    columns: [
        { field: 'FirstName', headerText: 'First Name', width: 140 },
        { field: 'LastName', headerText: 'Last Name', width: 140 },
        { field: 'Title', headerText: 'Title', width: 150 },
        { field: 'Country', headerText: 'Country', width: 150 }
    detailDataBound: (e: DetailDataBoundEventArgs) => {
        let detail = new Grid({
            dataSource: data.filter((item: Object) => item['EmployeeID'] === e.data['EmployeeID']).slice(0, 3),
            columns: [
                { field: 'OrderID', headerText: 'Order ID', width: 110 },
                { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }

1 Reply

JC Joseph Christ Nithin Issack Syncfusion Team December 19, 2022 05:53 PM UTC

Hi Alex,

  Greetings from Syncfusion support.

  Based on your query, you want to get the filtered records from the datasource using ODataV4Adapator. We have discussed the same in detail in the below documentation. Refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/documentation/data/adaptors/#odatav4-adaptor


Joseph I.

Live Chat Icon For mobile
Up arrow icon