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?