Kendo grid filter is not working for array of array data in the grid

4 posts, 0 answers
  1. Sana
    Sana avatar
    5 posts
    Member since:
    Feb 2016

    Posted 18 May 2016 Link to this post

    I am trying to apply filter for my grid. It is working fine for normal data in the grid but it is not working for array of array data in the grid. I am using template for rendering the grid data.

    Kindly suggest some way to resolve this issue as soon as possible. In below example filter is working for productnumberlist but not working for daterangelist and intelWwlist.

     

    var _daterangelist = [];
    var _productnumberlist = [];
    var _intelWwlist = [];

    this.setDaterangelist = function(input){
    _daterangelist = input;
    }
    this.setProductnumberlist = function(input) {
    _productnumberlist = input;
    }
    this.setIntelWwlist = function(input){
    _intelWwlist = input;
    }
    this.assuranceGridOptions = function () {
    var selectTemplate = '<input type="checkbox" class="wom-md-checkbox"/>',
    customerPartNumberTemplate = '',
    intelProductNumberTemplate = '<span>{{dataItem.productNumber | trimLeadingZero}}</span>',
    intelProductNameTemplate = '',
    intelProcessorNumberTemplate = '',
    intelWwTemplate = '#ln=availablelist.length;for (var i = 0; i< ln; i++) {#<span>#="WW"+(availablelist[i].workweek).slice(4)#</span><br>#}#',
    dateRangeTemplate = '#ln=availablelist.length;for (var i = 0; i< ln; i++) {#<span>#=availablelist[i].startdate + " To " + availablelist[i].enddate#</span><br>#}#',
    requestedQtyTemplate = '#ln=availablelist.length;for (var i = 0; i< ln; i++) {#<span>#=availablelist[i].quantity#</span><br>#}#',
    plantTemplate = '#ln=availablelist.length;for (var i = 0; i< ln; i++) {#<span>#=availablelist[i].plant#</span><br>#}#';


    var columnStyle = "text-align: center; font-size: 14px; white-space: normal; overflow: visible",
    headerStyle = 'text-align: center; font-size: 14px; overflow: visible';

    var searchResultsGrid = {
    columns: [
    {
    field: '',
    title: '',
    width: '50px',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: selectTemplate
    },
    {
    field: 'cpn',
    title: 'Customer Part #',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: customerPartNumberTemplate
    },
    {
    field: 'prodNum',
    title: 'Intel Product #',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: intelProductNumberTemplate,
    filterable: {ui: productnumberFilter}
    },
    {
    field: 'productName',
    title: 'Intel Product Name',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: intelProductNameTemplate
    },
    {
    field: 'processorNumber',
    title: 'Processor #',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: intelProcessorNumberTemplate
    },
    {
    field: 'intelWw',
    title: 'Intel WW',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: intelWwTemplate,
    filterable: {ui: intelWwFilter}
    },
    {
    field: 'dateRange',
    title: 'Date Range',
    width: 210,
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: dateRangeTemplate,
    filterable: {ui: dateRangeFilter}
    },
    {
    field: 'quantity ',
    title: 'Qty',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: requestedQtyTemplate
    },
    {
    field: 'plant',
    title: 'Plant',
    headerAttributes: {style: headerStyle},
    attributes: {style: columnStyle},
    template: plantTemplate
    }
    ],
    columnMenu: true,
    pageable: true,
    noRecords: {
    template: "No record found. Please contact your Intel representative for supply assurance information."
    },
    filterable: {
    extra: false,
    operators: {
    string: {
    contains: "Contains",
    startswith: "Starts with",
    eq: "Is equal to",
    neq: "Is not equal to"
    }
    }
    },
    dataSource: new kendo.data.DataSource({
    selectable: "",
    transport: {
    read: {
    dataType: "json",
    cache: false
    }
    },
    schema: {
    parse: function (d) {
    for (var i = 0; i < d.length; i++) {
    if (d[i]) {
    return d[i];
    }
    }
    return [];
    },
    },
    filter: {

    }
    })
    };
    return searchResultsGrid;
    }

    this.getEmptyLineItem = function () {
    return {
    orderID: "",
    cpn: "",
    intelProductNumber: "",
    intelProductName: "",
    intelProcessorNumber: "",
    intelWw: "",
    dateRange: "",
    requestedQty: "",
    plant: ""
    }
    }

    function productnumberFilter(element) {
    element.kendoDropDownList({
    dataSource: _productnumberlist,
    optionLabel: "--Select Value--"
    });
    }

    function dateRangeFilter(element) {
    element.kendoDropDownList({
    dataSource: _daterangelist,
    optionLabel: "--Select Value--"
    });
    }
    function intelWwFilter(element){
    element.kendoDropDownList({
    dataSource: _intelWwlist,
    optionLabel: "--Select Value--"
    });
    }

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1982 posts

    Posted 20 May 2016 Link to this post

    Hello Sana,

     

    The dataSource is designed to operate with flat data which is why there is no specified type for 'object' or 'array'. The filtering is handled internally against the original data and it assumes that the data is flat. The columns.template only customizes what is displayed in the cell but the underlying data remains the same. 

     

    I am afraid that filtering for array of array of data is not supported by the Kendo UI Grid. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Morten
    Morten avatar
    309 posts
    Member since:
    Jul 2012

    Posted 04 Apr in reply to Boyan Dimitrov Link to this post

    Hello Support

    any update on filtering arrays or elegant work-a-rounds?

    I've searched but not found any good examples.

    /Morten

  4. Stefan
    Admin
    Stefan avatar
    1660 posts

    Posted 06 Apr Link to this post

    Hello, Morten,

    Currently, this could be achieved server filtering an using filter logic on the server to find all of the items that contain the chosen value.

    The Grid will send the filter value in the request parameters and then the developer can use different approaches the find the matching arrays values and retund then to the Grid.

    Please have in mind that the logic which arrays have to be returned has to be implemented manually.

    For now, we do not have any short or mid-term plans to support it, but I can suggest making a feature request for it and based on its popularity we may implement it in a future release:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-beta-feedback?category_id=170280

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top