Posted 29 July 2025, 2:58 pm EST
Hi There, I’ve been looking around the forums and can’t find much at all about this topic so I figured I’d ask here:
I’m using the c1 flex grid and corresponding razor tags to view database items handed in via viewmodel. I’d like to be able to set the filters on the grid after/during page loading to narrow the amount of items shown if under certain conditions. I have the following:
The grid:
<c1-flex-grid id="engagementGrid" is-read-only="true" auto-row-heights="true" width="100%" class="grid" auto-generate-columns="false" selection-mode="MultiRange" show-sort="true" show-alternating-rows="true" updated-view="UpdatedView" case-sensitive-search="false" item-formatter="customizeCells">
...
<c1-flex-grid-column binding="EngagementType" header="Type of Engagement" width="120"></c1-flex-grid-column>
<c1-flex-grid-column binding="EngagementDate" is-read-only="true" header="Date" width="100"></c1-flex-grid-column>
...
<c1-items-source source-collection="@Model.Engagements"></c1-items-source>
<c1-flex-grid-filter default-filter-type="Both" exclusive-value-search="true">
<c1-flex-grid-column-filter column="EngagementType" filter-type="FilterType.Value" ></c1-flex-grid-column-filter>
<c1-flex-grid-column-filter column="EngagementDate" filter-type="FilterType.Condition"></c1-flex-grid-column-filter>
</c1-flex-grid-filter>
</c1-flex-grid>and then in a javascript block at the top of the page, I’m using the c1.documentready event/function to invoke the following function if there’s filters I am trying to set:
function applyFiltersOnLoad() {
var data = @Html.Raw(JsonConvert.SerializeObject(Model.FiltersToApply, Formatting.Indented));
var flexGridFilter = c1.getExtenders(gFlexGrid, wijmo.grid.filter.FlexGridFilter)[0];
data.forEach((filterDef) => {
var columnToFilter = filterDef["Column"];
var filterCtrl = flexGridFilter.getColumnFilter(columnToFilter);
if(filterDef["FilterType"] == "Value") {
filterCtrl.valueFilter.filterText = filterDef["Value"]; //set the value im looking to filter on
flexGridFilter.editColumnFilter(columnToFilter); //show the filter panel
$('button[wj-part="btn-apply"]').click(); //jquery to click the apply button
} else if (filterDef["FilterType"] == "Condition") {
console.log(filterCtrl.conditionFilter);
filterCtrl.conditionFilter._and = filterDef["ConditionOperation"] == "AND" ? true : false
filterCtrl.conditionFilter._c1.value = filterDef["Condition1Value"]
filterCtrl.conditionFilter._c1.condition = filterDef["Condition1"] == "Is After" ? 3 : 5
filterCtrl.conditionFilter._c2.condition = filterDef["Condition2"] == "Is After" ? 3 : 5
flexGridFilter.editColumnFilter(columnToFilter);
console.log(filterCtrl.conditionFilter);
}
});
}data is an object ive defined which contains information relevant to what filters need to be turned on and with what operations parameters. I’ve gotten it to work for a value filter by opening the filter edit panel using editColumnFilter, using the filter text to match the option I want, and then using jquery to click the apply button (which I find a little unsophisticated). I could never retrieve any data for valueFilter.showValues or use any of the apply() methods on the filters to actually apply the filter, so I used jquery to simulate a click on the actual apply button that appears and that worked well enough for my needs.
I would like to do something similar for a condition filter, namely be able to filter my “EngagementDate” column programmatically using javascript (similar to value filter above) or some other method. Essentially I would like to set the following filter conditions programatically on page start:
All of the ConditionFilter properties are readonly and can’t be set, unlike filterText for the valueFilter, you can see I was attempting to set the private c1 and c2 properties, but to no effect.
I am also aware I could filter the data (Model.Engagement) in my viewmodel to the specific date range I’m looking for before loading the page, but I want the user to be able to cancel/clear the filter and be able to see all their data again without having to submit the form or reload the page. The grid can have upwards of 200 rows so I’d rather keep the filtering client side as much as possible. Having the filter programmatically set on or just after page load is what I’m looking for, and I found very little documentation surrounding this.
Any help would be appreciated. I can provide other code snippets/explanation for clarity if need be. Thanks.
