PDA

View Full Version : [CLOSED] FilterHeader : High light searched text



matrixwebtech
Mar 28, 2015, 8:01 PM
Hi
I take http://examples2.ext.net/#/GridPanel/FilterHeader/Custom_Field/ as example form company column I select * and search with co how can I highlight co in grid with this example.

Vladimir
Mar 29, 2015, 12:32 PM
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.cel lSelector),
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;}

matrixwebtech
Mar 29, 2015, 7:43 PM
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?

Vladimir
Mar 29, 2015, 7:59 PM
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?

matrixwebtech
Mar 30, 2015, 3:47 AM
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.cel lSelector),
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);
}

23161

Daniil
Mar 31, 2015, 9:58 AM
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());
};

matrixwebtech
Mar 31, 2015, 5:09 PM
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.cel lSelector),
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?

23181

matrixwebtech
Apr 01, 2015, 6:40 PM
Any thought ?

Daniil
Apr 01, 2015, 8:53 PM
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 (http://http://docs.sencha.com/extjs/4.2.1/source/Paging.html#Ext-toolbar-Paging-method-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
}

matrixwebtech
Apr 03, 2015, 8:08 AM
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.

Daniil
Apr 06, 2015, 5:23 PM
There is the following loop.


var td = Ext.fly(grid.view.getNode(idx)).down(grid.view.cel lSelector),

...

while (td) {
...

td = td.next();
}

If you want to search just in one td per row, you should get rid of the loop and get the required td only. For example, by the Column's index.

Hope this helps.