[CLOSED] FilterHeader : High light searched text

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] FilterHeader : High light searched text

    Hi
    I take https://examples2.ext.net/#/GridPane.../Custom_Field/ as example form company column I select * and search with co how can I highlight co in grid with this example.
    Last edited by Daniil; Apr 14, 2015 at 9:52 AM. Reason: [CLOSED]
  2. #2
    FilterHeader has no such functionality, you can try it manually but it has no sense imho because each filtered row will have searching string

    You can try the following snippet (i did not test it, you need to update this script for your case)
    var grid = MyGrid1;
    grid.store.each(function(record, idx) {
    	 var td = Ext.fly(grid.view.getNode(idx)).down(grid.view.cellSelector),
    		 cell, matches, cellHTML,
    		 tagsRe = /<[^>]*>/gm,
    		 tagsProtect = '\x0f',
    		 searchRegExp = new RegExp("search_string", 'g');
    		 
    	 while (td) {
    		 cell = td.down(grid.view.innerSelector);
    		 matches = cell.dom.innerHTML.match(tagsRe);
    		 cellHTML = cell.dom.innerHTML.replace(tagsRe, tagsProtect);		 
    		 
    		 cellHTML = cellHTML.replace(searchRegExp, function(m) {			
    			return '<span class="myMatchCssRule">' + m + '</span>';
    		 });		 
    		 Ext.each(matches, function(match) {
    			cellHTML = cellHTML.replace(tagsProtect, match); 
    		 });		 
    		 cell.dom.innerHTML = cellHTML;
    		 td = td.next();
    	 }
     }, grid);
    'myMatchCssRule' css rule can be defined like this
    .myMatchCssRule {    font-weight: bold;    background-color: yellow;}
  3. #3
    I use your code .its run with big performance issue,I think for the 2 loops is used in code .after type in search box browser hang .
    Is there any way to solve this?
    can we mix live search functionality with filter header?
  4. #4
    Please clarify how do you use that code? I mean what event do you use to execute that code? Do you use buffer for event handler?
  5. #5
    I call the function inside custom filter header function.

    .ColumnModel(
                            Html.X().RowNumbererColumn().Width(35),
                             Html.X().Column()
                            .DataIndex("EmployeeCode")
                            .Text("Emp code")
                                .HeaderItems(
                                    X.Container().Layout(LayoutType.HBox).Margin(2)
                                    .Items(
                                            X.TextField().Flex(1)
                                            
                                            .Plugins(X.ClearButton())
                                                    .Listeners(l =>
                                                    {
                                                        l.Change.Handler = "this.up('grid').filterHeader.onFieldChange(this.up('container'));";
                                                        
                                                    })
                                    )
                            .CustomConfig(cc => cc.Add(new ConfigItem { Name = "getValue", Value = "customFilterHeader", Mode = ParameterMode.Raw, }))
                                )
    var customFilterHeader = function () {
    
                var value = this.getComponent(0).getValue();
                highlight(value)
                return (Ext.isEmpty(value) ? "" : "*") + value;
            }
            var highlight = function (search_string) {
                var grid = App.GridPanel1;
                grid.store.each(function (record, idx) {
                    var td = Ext.fly(grid.view.getNode(idx)).down(grid.view.cellSelector),
                        cell, matches, cellHTML,
                        tagsRe = /<[^>]*>/gm,
                        tagsProtect = '\x0f',
                        searchRegExp = new RegExp(search_string, 'g');
    
                    while (td) {
                        cell = td.down(grid.view.innerSelector);
                        matches = cell.dom.innerHTML.match(tagsRe);
                        cellHTML = cell.dom.innerHTML.replace(tagsRe, tagsProtect);
    
                        cellHTML = cellHTML.replace(searchRegExp, function (m) {
                            return '<span class="myMatchCssRule">' + m + '</span>';
                        });
                        Ext.each(matches, function (match) {
                            cellHTML = cellHTML.replace(tagsProtect, match);
                        });
                        cell.dom.innerHTML = cellHTML;
                        td = td.next();
                    }
                }, grid);
            }
    Click image for larger version. 

Name:	Untitled.png 
Views:	4 
Size:	39.3 KB 
ID:	23161
    Last edited by matrixwebtech; Mar 30, 2015 at 3:02 AM.
  6. #6
    Hello!

    I can suggest this.
    <ext:FilterHeader runat="server">
        <Listeners>
            <Filter Fn="onFilter" />
        </Listeners>
    </ext:FilterHeader>
    var onFilter = function (filterHeader) {
        highlight(filterHeader.grid, filterHeader.fields[0].child("textfield").getValue());
    };
  7. #7
    Hi Daniil,Thanks. code change as per you and performance issue solved.

    @{
    
        var X = Html.X();
    }
    <style>
        .myMatchCssRule {
            font-weight: bold;
            background-color: yellow;
        }
    </style>
    <script>
        var highlight = function (mygrid, search_string) {
            var grid = mygrid;
            grid.store.each(function (record, idx) {
                var td = Ext.fly(grid.view.getNode(idx)).down(grid.view.cellSelector),
                    cell, matches, cellHTML,
                    tagsRe = /<[^>]*>/gm,
                    tagsProtect = '\x0f',
                    searchRegExp = new RegExp(search_string, 'g');
    
                while (td) {
                    cell = td.down(grid.view.innerSelector);
                    matches = cell.dom.innerHTML.match(tagsRe);
                    cellHTML = cell.dom.innerHTML.replace(tagsRe, tagsProtect);
    
                    cellHTML = cellHTML.replace(searchRegExp, function (m) {
                        return '<span class="myMatchCssRule">' + m + '</span>';
                    });
                    Ext.each(matches, function (match) {
                        cellHTML = cellHTML.replace(tagsProtect, match);
                    });
                    cell.dom.innerHTML = cellHTML;
                    td = td.next();
                }
            }, grid);
        }
    
        var onFilter = function (filterHeader) {
            highlight(filterHeader.grid, filterHeader.fields[0].child(0).getValue());
        };
        var customFilterHeader = function () {
    
            var value = this.getComponent(0).getValue();
    
            return (Ext.isEmpty(value) ? "" : "*") + value;
        }
    </script>
    @X.ResourceManager()
    @(Html.X().GridPanel()
                .ID("GridPanel1")
                .Title("test")
                .Frame(true)
                .Height(400)
    
    
                .Store
                (
                    Html.X().Store()
                    .ID("Store1")
                    .AutoLoad(true)
                    .Model
                    (
                        Html.X().Model()
                        .IDProperty("MaterialID")
                        .Fields
                        (
                                Html.X().ModelField().Name("col1").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("col2").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("col3").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("col4").Type(ModelFieldType.String),
                                Html.X().ModelField().Name("col5").Type(ModelFieldType.String)
    
    
                       )
                    )
                    .Proxy(X.AjaxProxy()
                    .Url(Url.Action("reloadgrid", "FilterHeader"))
                    .Reader(X.JsonReader().Root("data"))
                )
    
                     
                .PageSize(30)
             )
                  .Plugins(
                        Html.X().FilterHeader().Remote(false)
                        .Listeners(l =>
                        {
                            l.Filter.Fn = "onFilter";
                        })
                    )
             .ColumnModel
                (
            //---- Grid Design Column ---
    
    
                                    Html.X().Column()
                                    .DataIndex("col1")
                                    .Text("Material Name")
                                    .Flex(1)
                                         .HeaderItems(
                                        X.Container().Layout(LayoutType.HBox).Margin(2)
                                        .Items(
                                                X.TextField().Flex(1)
    
                                                .Plugins(X.ClearButton())
                                                        .Listeners(l =>
                                                        {
                                                            l.Change.Handler = "this.up('grid').filterHeader.onFieldChange(this.up('container'));";
    
                                                        })
                                        )
                                .CustomConfig(cc => cc.Add(new ConfigItem { Name = "getValue", Value = "customFilterHeader", Mode = ParameterMode.Raw, }))
                                    )
                                   ,
                                        Html.X().Column()
                                    .DataIndex("col2")
                                    .Text("Category")
                                    .Flex(1)
                                         .HeaderItems(
                                        X.Container().Layout(LayoutType.HBox).Margin(2)
                                        .Items(
                                                X.TextField().Flex(1)
    
                                                .Plugins(X.ClearButton())
                                                        .Listeners(l =>
                                                        {
                                                            l.Change.Handler = "this.up('grid').filterHeader.onFieldChange(this.up('container'));";
    
                                                        })
                                        )
                                .CustomConfig(cc => cc.Add(new ConfigItem { Name = "getValue", Value = "customFilterHeader", Mode = ParameterMode.Raw, }))
                                    )
                                    ,
    
                                     Html.X().Column()
                                    .DataIndex("col3")
                                    .Text("UOM Name")
                                    .Flex(1)
                                    .Wrap(true)
                                    .Filterable(false)
                                    ,
    
                                        Html.X().Column()
                                    .DataIndex("col4")
                                    .Text("Manufacturer")
                                        .Filterable(false)
                                  ,
                                       Html.X().NumberColumn()
                                        .DataIndex("col5")
                                        .Text("c5")
                                         .Align(Alignment.Left)
                                             .Filterable(false)
    
                 )
    
                .SelectionModel
                (
                    X.CheckboxSelectionModel()
                    .ID("s")
                    .Mode(SelectionMode.Multi)
    
                )
            
                .BottomBar(
                    Html.X().PagingToolbar()
                       
                )
    
    )
    public class FilterHeaderController : Controller
        {
            //
            // GET: /FilterHeader/
    
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult reloadgrid()
            {
               
                //-- Add namespace using System.Linq;
                var o = filterheaderData.gettestdate();
                return this.Store(o);
    
                
    
            }
    
        }
    
        public class filterheaderData
        {
            public string col1 { get; set; }
            public string col2 { get; set; }
            public string col3 { get; set; }
            public string col4 { get; set; }
            public Int32 col5 { get; set; }
    
            public static List<filterheaderData> gettestdate()
            {
                List<filterheaderData> _filterheaderData = new List<filterheaderData>();
    
    
                for (int i = 0; i <= 100; i++)
                {
                    var l = new filterheaderData
                    {
                        col1 = "COL1 -" + i.ToString(),
                        col2 = "COL2 -" + i.ToString(),
                        col3 = "COL3 -" + i.ToString(),
                        col4 = "COL4 -" + i.ToString(),
                        col5 = i
                    };
                    _filterheaderData.Add(l);
                }
                return _filterheaderData;
            }
        }
    Please above code .
    I set filter for 2 columns.
    1. Now search with COL1 -0 in Material Name column search done but pagingbar still showing Displaying 1 - 30 of 101 How I update the text in paging bar?

    2. search with COL in Material Name column. All column data highlighted ,but I want ,on which column I searched only that column data will highlight .How I do this?

    3. search with any thing in Material Name column.clear the search with ClearButton and see SelectionCheckbox design.please see the screen shot.Please suggest How do I rectify?

    Click image for larger version. 

Name:	Untitled.png 
Views:	5 
Size:	19.2 KB 
ID:	23181
    Last edited by matrixwebtech; Mar 31, 2015 at 4:47 PM.
  8. #8
    Any thought ?
  9. #9
    1. Yes, if remote paging and local filtering, a PagingToolbar is not going to be updated automatically on filtering. You can update it manually. Investigating the updateInfo method might help to determine how to update.

    2. This code td = td.next(); iterates all the cells. You should exclude every cell that is not needed to processed.

    3. I would wrap the highlight function's code in
    if (!Ext.isEmpty(search_string)) { 
        // Everything rest goes here
    }
  10. #10
    2. This code td = td.next(); iterates all the cells. You should exclude every cell that is not needed to processed.
    how do I exclude ?and on which condition?bellow is the condition.
    suppose I am searched in Material Name then how do I know or pass a parameter to highlight function that on which column I searching?

    sorry for poor English.if you have problem in understand please tell me I will explain.
    Last edited by matrixwebtech; Apr 03, 2015 at 7:11 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] FilterHeader : FilterHeader for specific columns in gridpanel
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2015, 12:20 PM
  2. [CLOSED] GridPanel : Highlight Searched data
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 03, 2015, 5:45 PM
  3. [CLOSED] The disabled text field looks very light in IE.
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 22, 2014, 1:00 PM
  4. Coolite: THE SPEED OF LIGHT!
    By reinout.mechant@imprss.be in forum Open Discussions
    Replies: 6
    Last Post: Mar 18, 2009, 1:34 PM
  5. Replies: 9
    Last Post: Feb 24, 2009, 3:17 PM

Posting Permissions