Results 1 to 8 of 8

Thread: grid remote filtering not working.

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default grid remote filtering not working.

    Dear all,

    i am new to EXT Js. i have seen lot of examples regarding remote filtering of grid but nothing works for me. i am using asp.net/IIS as server side request processing engine. i am pasting my html/javascript code below if anyone member help me out i will be highly thankful.
    <!-- below link and scripts are added to work with Ext Js -->
    <link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ext-all-debug.js" type="text/javascript"></script>
    <script src="Scripts/FiltersFeature.js" type="text/javascript"></script>
    <script src="Scripts/FilterRow.js" type="text/javascript"></script>
    <script src="Scripts/Function.js" type="text/javascript"></script>
    <!-- below is my javascript to render grid -->

    <script type="text/javascript" language="javascript">

    function pctChange(val) {
    if (val % 2 == 0) {
    return '<span style="color:green;">' + val + '%</span>';
    } else {
    return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
    }
    var itemsPerPage = 20;
    Ext.Loader.setConfig({ enabled: true });
    Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.FiltersFeature', ]);

    Ext.onReady(function () {

    var encode = false;
    var local = false;

    var myStore = Ext.create('Ext.data.Store', {
    id: 'myStore',
    autoLoad: false,
    remoteSort: true,
    remoteFilter: true,
    fields: ['Agency_Name', 'Agency_CODE', 'AGREEMENT_VERSION', 'Agency_ID', { name: 'APPOINTMENT_DATE', type: 'date' }, { name: 'Phone_1', type: 'string' }, { name: 'FAX', type: 'string'}],
    pageSize: itemsPerPage,
    sorters: [{ property: 'Agency_Name', direction: 'ASC'}],
    proxy: {
    type: 'ajax',
    url: 'DataHandler.ashx?gl=0',
    reader: {
    type: 'json',
    root: 'myDataSet',
    totalProperty: 'TotalRecords'
    }
    }
    });
    myStore.load({ params: { start: 0, limit: itemsPerPage} });

    var filters = {
    ftype: 'filters',
    encode: encode,
    local: local,
    filters: [
    { type: 'string', dataIndex: 'Agency_Name', disabled: true },
    { type: 'string', dataIndex: 'Agency_CODE' },
    { type: 'string', dataIndex: 'AGREEMENT_VERSION' },
    { type: 'numeric', dataIndex: 'Agency_ID' },
    { type: 'date', dataIndex: 'APPOINTMENT_DATE' },
    { type: 'string', dataIndex: 'Phone_1', disabled: true }
    ]
    };

    var sampleGridColumns = [
    { xtype: 'actioncolumn', width: 50, items: [

    { icon: 'resources/themes/images/drop-add.gif', tooltip: 'Edit', handler: function (grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("Edit " + rec.get('Agency_Name')); } },
    { icon: 'resources/themes/images/drop-no.gif', tooltip: 'Delete', handler: function (grid, rowIndex, colIndex) {
    var rec = grid.getStore().getAt(rowIndex);

    var processDeleteAction = function (btn) {
    if (btn == 'yes') {
    var conn = new Ext.data.Connection();
    conn.request
    ({
    url: 'DeleteHandler.ashx?unique_ID=' + rec.get('Agency_ID'),
    params:
    { unique_ID: rec.get('Agency_ID'), row: rec.row, limit: itemsPerPage },
    success: function (resp, opt) {
    myStore.load();
    },
    failure: function (resp, opt) {
    Ext.Msg.alert('Error', 'Unable to delete record');
    }
    })
    }
    }
    Ext.Msg.show({
    title: "Delete",
    msg: 'Are you sure you want to delete"' + rec.get('Agency_Name') + '"?',
    buttons: Ext.MessageBox.YESNO,
    closable: false,
    fn: processDeleteAction,
    icon: Ext.MessageBox.ERROR
    })
    }
    }
    ]
    },
    { header: 'Name', dataIndex: 'Agency_Name', filterable: true, filter: { type: 'string'} },
    { header: 'Email', dataIndex: 'Agency_CODE', flex: 1, filter: { type: 'string' }, renderer: function (value) { return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value); } },
    { header: 'Phone', dataIndex: 'AGREEMENT_VERSION', width: 100, hidden: true, filter: { type: 'string'} },
    { header: 'My ID', dataIndex: 'Agency_ID', sortable: false, hideable: false, renderer: pctChange, filter: { type: 'numeric'} },
    { header: 'DOB', dataIndex: 'APPOINTMENT_DATE', xtype: 'datecolumn', format: 'M/d/Y', filter: { type: 'date'} }, /*d/m/Y*/
    {header: 'Full Name', xtype: 'templatecolumn', tpl: '{Phone_1}, {FAX}', flex: 2, filter: { type: 'string' }, filterable: false }
    ]

    Ext.create('Ext.grid.Panel', {
    title: '007 Suretec',
    store: myStore, //Ext.data.StoreManager.lookup('FNStore'),
    columns: sampleGridColumns,
    //dockedItems: [{ xtype: 'pagingtoolbar', store: myStore, dock: 'bottom', dispalyInfo: true}], /*for paging*/
    features: [filters],
    height: 400,
    width: 600,
    renderTo: 'divGrid',
    loadMask: true,
    columnLines: true,
    bbar: new Ext.PagingToolbar(
    { pageSize: itemsPerPage, store: myStore, displayInfo: true, displayMsg: 'Displaying agencies {0} - {1} of {2}', emptyMsg: "No agency found" })
    });
    });
    </script>

  2. #2
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

    In the case of remote filtering the filters should be processed by your server side application and only the filtered result should be returned.

    Do you use ASP, ASP.NET or ASP.NET MVC?

    Can you elaborate on what does not work for you?

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default grid remote filtering working / but extra request are send to server

    i am using asp.net on server side, finally remote filtering is working for me. i successfully send filters to server and parse the filters to convert them into proper sql WHERE clasue. but now i have one problem. when i provide some search criteria in 2 text boxes and add the search criteria in store filter object using following syntax

    jsonDataStore.filter('Name', $get('&lt;%= this.txtName.ClientID %&gt;').value);
    jsonDataStore.filter('FName', $get('&lt;%= this.txtFName.ClientID %&gt;').value);

    request is send to server twice (number of request is equal to number of filters added). how is avoid extra request send to server.

    regards,
    Xeta

  4. #4
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

    You can set multiple filters by supplying an array of filters to filter method as explained here.

    BTW You are not using Ext JS textfields? Why the $get('<%= this.txtName.ClientID %>')?

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    finally i fixed the issue with the following code


    jsonDataStore.filter(
    [
    {property: 'UNDERWRITER.UNDERWRITER_ID', value: simpleUnderwriter.items.getAt(0).value },
    {property: 'BRANCH_NAME', value: simpleBranch.items.getAt(0).rawValue }
    ]
    );

    hope so it might be help full for some one other.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    9

    Default

    thanks dear i am using asp.net controls with it now i replace all the asp.net server side controls with Ext Js textfields.

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    43

    Default

    I have a similar problem. I tried all approaches to get this working. I dint succeed.

    http://www.sencha.com/forum/showthre...213#post920213

    I have dead line of couple of days.

  8. #8
    Sencha User
    Join Date
    Apr 2011
    Posts
    43

    Default

    where exactly did you put the piece of code. jsonstore.filter(...)
    Inside beforeLoad of store??

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •