How to initialize MVC Grid filter value?

Can someone point me in the right direction? Using MVC, I have a web page that displays a grid with filters. I can manually filter records, however I would like to have one column (named “Active”) to be filtered when the page loads as if the user had selected the filter Active = True. The page downloads all records (regardless of Active status) so that the user could chose to clear the filter and see all records without another roundtrip.

I looked through the online docs and samples but could not find where the specific MVC syntax for this is documented.

Below is what I have so far, but the filter initialization doesn’t work and it displays all records.

Thanks in advance for your help.

@using Infragistics.Web.Mvc;

@model IQueryable<STRIPE_ASP461.EmployeeSummaryInfo>

@section Scripts {

<script type=”text/javascript” src=”@Url.Content(“~/Scripts/Infragistics/js/infragistics.loader.js”)“></script>

@(Html.Infragistics()

.Loader()

.ScriptPath(Url.Content(“~/Scripts/Infragistics/js”))

.CssPath(Url.Content(“~/Content/Infragistics/css”))

.Theme(“infragistics”)

.Render())

@(Html.Infragistics()

.Grid(Model)

.ID(“igGrid”)

.Width(“600px”)

.Height(“800px”)

.Caption(“Employees”)

.AutofitLastColumn(false)

.AutoGenerateColumns(false)

.Columns(column =>

{

column.For(x => x.LastName).HeaderText(“Last Name”).Width(“150px”);

column.For(x => x.FirstName).HeaderText(“First Name”).Width(“150px”);

column.For(x => x.EmployeeID).HeaderText(“ID”).Width(“80px”);

column.For(x => x.Active).HeaderText(“Active”).Width(“50px”);

})

.Features(f =>

{

f.ColumnMoving()

.Mode(MovingMode.Immediate);

f.Filtering()

.Type(OpType.Local)

.Mode(FilterMode.Simple)

.ColumnSettings(settings => {

settings.ColumnSetting() // Initially just show the Active records

.ColumnKey(“Active”)

.FilterCondition(“true”);

});

f.Hiding();

f.Paging()

.PageSize(20);

f.Resizing();

f.Responsive();

f.Selection()

.Mode(SelectionMode.Row);

f.Sorting()

.Mode(SortingMode.Multiple);

})

.RenderCheckboxes(true)

.DataBind()

.Render())

}

 

I still couldn't find the correct Razor syntax, but this worked to add the following JavaScript right after the Razor call:

.Render())…

<script type="text/javascript">

$.ig.loader(function () {

// Initially just show the Active records

$("#igGrid").igGridFiltering("filter", ([{ fieldName: "Active", expr: "True", cond: "true" }, ]));

});

</script>

}

Hello Dean,

In order to set initial filtering expressions, so that they're applied with the grid initialization, you should use defaultExpressions columnSetting. For instance:

[code]

@{

var list = new List<DefaultFilterExpression>();

list.Add(new DefaultFilterExpression(){ Expression="false", Condition="false"});

}

…

.Features(f =>

{

f.Filtering().Mode(FilterMode.Simple).Type(OpType.Local).ColumnSettings(settings =>

{

settings.ColumnSetting().ColumnKey("Active").DefaultExpressions(list);

});

})

[/code]

If you need further assistance, please let me know.

Regards,

Tsanna

Hi Tsanna,

Thank you for the code example! That helps to keep all the grid & filter initialization together.

Dean

Hi Dean,

You're welcome. If you need further assistance, please let me know.

Regards,

Tsanna

GOod one thanks for this kind of information google mail for more detials

Tsanna,

I have implemented your example to set initial filter values. The initial filtering seems to work and the value in the filter get set; however, the grid initially only renders two rows on the first page. The page size is set to 25 and the info at the bottom of the grid shows just the number of records and the number of pages is the number of unfiltered records. When I execute an event (go to the next page) the grid shows the correct number of filtered records and correct pages. But, only after I go to page 2. I remove the .DataBind() from the wrapper everything works correctly, but the grid looks like it takes a second or two to render now (shows the loading image) instead of rendering before the grid shows on the page. I feel like the .DataBind() should be there on the wrapper. What am I doing wrong and why does this happen?

here is my code for the wrapper:

@(Html.Infragistics()
.Grid(Model.Employees)
.ID("grid")
.AutoGenerateColumns(false)
.Width("100%")
.Columns(column =>
{
column.For(x => x.FullName).HeaderText("Name").Width("150px");
column.For(x => x.SystemAssignedPersonID).HeaderText("System ID").Width("150px");
column.For(x => x.UserAssignedEmployeeID).HeaderText("Employee ID").Width("150px");
column.For(x => x.BadgeNumber).HeaderText("Badge Number").Width("150px");
column.For(x => x.OriginalHireDate).HeaderText("Original Hire Date").Width("150px");
column.For(x => x.CurrentHireDate).HeaderText("Current Hire Date").Width("150px");
column.For(x => x.FulltimeHireDate).HeaderText("Fulltime Hire Date").Width("150px");
column.For(x => x.SeniorityDate).HeaderText("Seniority Date").Width("150px");
column.For(x => x.DateNewHireReportFiled).HeaderText("Date New Hire Report Filed").Width("150px");
column.For(x => x.LaidOffDate).HeaderText("Laid Off Date").Width("150px");
column.For(x => x.LeaveDate).HeaderText("Leave Date").Width("150px");
column.For(x => x.LeaveReturnDate).HeaderText("Leave Return Date").Width("150px");
column.For(x => x.LastPaidDate).HeaderText("Last Paid Date").Width("150px");
column.For(x => x.LastVacationDate).HeaderText("Last Vacation Date").Width("150px");
column.For(x => x.PensionPlanDate).HeaderText("Pension Plan Date").Width("150px");
column.For(x => x.RecruiterID).HeaderText("Recruiter ID").Width("150px");
column.For(x => x.HireSourceID).HeaderText("Hire Source ID").Width("150px");
column.For(x => x.Level1Description).HeaderText("Level 1").Width("150px");
column.For(x => x.Supervisor).HeaderText("Supervisor").Width("150px");
column.For(x => x.EmploymentTypeDescription).HeaderText("Employment Type").Width("150px");
column.For(x => x.EmployeeStatusDescription).HeaderText("Employee Status").Width("150px");
column.For(x => x.TerminationDate).HeaderText("Termination Date").Width("150px");
})
.FixedHeaders(false)
.Features(features =>
{
features.Paging().Type(OpType.Remote);
features.Filtering().Type(OpType.Remote).FilterDialogContainment("window")
.ColumnSettings(settings => settings.ColumnSetting().ColumnKey("EmployeeStatusDescription").DefaultExpressions(Model.GridFeatureSettings.dfe));
features.Sorting().Type(OpType.Remote).Mode(SortingMode.Single);
features.Resizing();
features.Selection().Mode(SelectionMode.Row).Persist(true).MultipleSelection(true);
features.ColumnFixing();
features.ColumnMoving();
features.Hiding();
})
.DataSourceUrl(Url.Action("Employees"))
.DataBind()
.Render())

Hello,
Thank you for posting in our community.
After testing the grid configuration provided I didn’t manage to reproduce the behavior. I added a column with key “Rating”. Afterwards, I set a DefaultFilterExpression for this column and all rows were correctly loaded, depending on page size.
Attached you will find the updated sample where the initial Filtering works fine. Feel free to test it and let me know if it works on your side. In case this is not a correct representation of what you are trying to achieve feel free to correct me.

sample

Martin,

Thanks for your reply. I realized that I do not need to call .DataBind() on the wrapper. 

That seemed to have fixed the initial problem. 

Also, I thought I understood that if I use the Wrapper and Paging is set to Remote, The GridDataSourceAction attribute handles the remote paging on the server automatically, so the paging logic on the server is not needed. Is this correct?

from

 help.infragistics.com/…/igGrid_Paging.html

I have run into another problem however. I know the pageSize and filter parameters come in to the controller through the query string. If I want to capture other changes to the grid; such as: column moved (position), or column hidden. How would I 1) set those initially in the code behind, and  2) capture those events to save the values in the database? It doesn't look like those parameters get sent to the server when changed. 

Hello Ericl,
About question 1: When you're using Infragistics ASP.NET MVC wrapper it will handle remote paging automatically for you. You are required to create action method decorated with GridDataSourceActionAttribute attribute which returns ActionResult. In the action method pass the data as instance of IQueryable. The GridDataSourceActionAttribute class (which implements IActionFilter interface) will transform the data according the request parameters and will return it as JsonResult.
If you are implementing your own remote service (for example in ASP.NET or PHP), in order to properly initialize and render the pager, your service must specify both the responseDataKey (grid option) and the recordCountKey (paging option). The recordCountKey member tells the Paging widget how many records in total are in the backend. The responseDataKey specifies which property in the response contains the resulting data.
You can see more about remote paging here.
About question 2: Initially moving column to a certain position can be achieved by handling rendered event of igGrid. In this event, the desired column can be programmatically moved before or after another column of your choice using moveColumn method. For example:

$("#grid").igGridColumnMoving("moveColumn", "ProductID", "Name", false);

Another possible approach for changing column`s order is rearranging the columns collection.  By design, the columns order is the same as the one stated when defining columns collection.  For example, if you want “ID” column to be rendered last you can define is lastly in the columns collection. For example:

.Columns(column =>
{
     column.For(x => x.ProductName).HeaderText("Name").Width("150px");
     column.For(x => x.Rating).HeaderText("Rating").Width("150px");
      column.For(x => x.ID).HeaderText("ID").Width("150px");
})

 There are two possible ways for setting a column to be initially hidden.
1. Setting column`s hidden option to true when defining igGrid`s columns collection. In this scenario it is not necessary to have Hiding feature enabled. In case that it is enabled, a hiding indicator will be rendered for this column. Using this indicator the column can be made visible.

.Columns(column =>
{
column.For(x => x.ProductName).HeaderText("Name").Width("150px").Hidden(true);
        column.For(x => x.Rating).HeaderText("Rating").Width("150px");
         column.For(x => x.ID).HeaderText("ID").Width("150px");
}}
})

2. Setting column`s hidden option in the Hiding feature columnSettings collection. For example:

ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("ProductName").Hidden(true).AllowHiding(false); 
})

To detect when moving or hiding occurs columnMoved and columnHidden events can be used:

$(document).delegate("#grid", "iggridcolumnmovingcolumnmoved", function (evt, args) {
    alert("old index: " + args.newIndex +
        "\nnew index: " + args.oldIndex +
        "\ncolumnKey: " + args.columnKey);
});

And

$(document).delegate("#grid", "iggridhidingcolumnhidden", function (evt, ui) {
    console.log(ui);
    alert("columnKey: " + ui.columnKey);
});

Attached you can find a sample that has grid with initially hidden “Id” column. The grid has both ColumnMoving and ColumnHiding features enabled. When one column is hidden or moved, the browser alerts the user what are the parameters of the triggered event.
Feel free to ask me any additional questions you have.

Sample