I want to add custom Conditions in filter from infragistic mvc razor syntax like this
https://www.igniteui.com/help/iggrid-filtering#properties
https://jsfiddle.net/gh/get/jquery/1.9.1/IgniteUI/help-samples/tree/master/19.1/EN/grid/custom-conditions-filtering/fiddle
I am using infragistic razor HTML helper . Sample code is below :
@( Html.Infragistics().Grid<LightingIssuesModel>().ID("igLightingIssues").Width("100%").PrimaryKey("ID") .UpdateUrl(Url.Action("UpdateLightingIssue", "Home", new { TypeId = 1 })) .EnableHoverStyles(false) .RenderCheckboxes(true) .EnableUTCDates(false) .AutoGenerateColumns(false) .Columns(column => { column.For(x=>x.Select).HeaderText("Select Row").Template("<a>${Select}</a>").Hidden(true).Width("100"); column.For(x => x.BuildingArea).HeaderText("Building Area").Template("<textarea class='Preventedit changeEleHeight' disabled='true' name='BuildingArea' style='height:50px; width:100%; border:0px;' onchange='UpdateIssueName(this)'>${BuildingArea}</textarea>").Width("110"); column.For(x => x.LocationDetails).HeaderText("Location Details").Template("<textarea class='Preventedit changeEleHeight' disabled='true' name='LocationDetails' style='height:50px; width:100%; border:0px;' onchange='UpdateIssueName(this)'>${LocationDetails}</textarea>").Width("170"); column.For(x => x.DescriptionofIssue).HeaderText("Description of Issue").Template("<textarea class='Preventedit changeEleHeight' disabled='true' name='DescriptionofIssue' style='height:50px; width:100%; border:0px;' onchange='UpdateIssueName(this)'>${DescriptionofIssue}</textarea>").Width("250"); column.For(x => x.IssueNotesDynamicName).HeaderText(@Model.CustomLabelName49).Template("<textarea class='Preventedit changeEleHeight' disabled='true' name='IssueNotesDynamicName' style='height:50px; width:100%; border:0px;' onchange='UpdateIssueName(this)'>${IssueNotesDynamicName}</textarea>").Width("210"); column.For(x => x.PanelCircuitNumber).HeaderText("Panel and Circuit No").Template("<textarea class='Preventedit changeEleHeight' disabled='true' name='PanelCircuitNumber' type='text' style='height:50px; width:100%; border:0px;' onchange='UpdateIssueName(this)'>${PanelCircuitNumber}</textarea>").Width("170"); column.For(x => x.Panel).HeaderText("Panel").Template("<select id='Panel' class='Preventedit' disabled='true' name='Panel' onchange='UpdateIssueName(this)'><option value='${PanelID}'>${Panel}</option></select>").Width("120"); column.For(x => x.BreakerNo).HeaderText("Breaker No").Template("<select id='BreakerNo' class='Preventedit' disabled='true' name='BreakerNo' onchange='UpdateIssueName(this)'><option value='${BreakerNo}'>${BreakerNo}</option></select>").Width("120"); column.For(x => x.Completed).HeaderText("Completed").Template("<input id='Completed' ${CompletedChecked} class='Preventedit' name='Completed' type='checkbox' onchange='CheckboxChange(this)'/>").Width("100").DataType("bool"); column.For(x => x.UserReportingIssue).HeaderText("User Reporting Issue").Width("170"); column.For(x => x.IssueCreatedon).HeaderText("Issue Created on").Width("110"); column.For(x => x.IssueLastUpdatedby).HeaderText("Issue Last Updated by").Width("170"); column.For(x => x.IssueUpdatedon).HeaderText("Issue Updated on").Width("110"); column.For(x => x.ID).HeaderText("Key Id").Hidden(true);
})
.Features(f => {
f.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row); f.Filtering().Mode(FilterMode.Simple).Persist(true); f.Sorting().Mode(SortingMode.Multiple).Type(OpType.Remote).Persist(true);
f.Responsive().ForceResponsiveGridWidth(false).EnableVerticalRendering(false).ColumnSettings(setting => { //setting.ColumnSetting().ColumnKey("Comment").Classes("ui-visible-desktop"); //setting.ColumnSetting().ColumnKey("DNCUnCheck").Classes("ui-visible-desktop"); //setting.ColumnSetting().ColumnKey("ChangeBy").Classes("ui-visible-desktop"); //setting.ColumnSetting().ColumnKey("DNCCheck").Classes("ui-hidden-phone"); //setting.ColumnSetting().ColumnKey("DNCStatus").Classes("ui-hidden-phone"); });
f.Hiding(); f.Paging().PageSize(15).PrevPageLabelText("Prev").NextPageLabelText("Next").PageSizeList(new List<int>() { 5, 10, 20, 25, 50, 75, 100, 500, 1000 }); f.Updating().EnableAddRow(true).AddRowLabel("Add Issues").DoneLabel("Save") .EditMode(Infragistics.Web.Mvc.GridEditMode.None).EnableDeleteRow(false) //.AddClientEvent("selectionChanged", "UpdateIssueName") .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("BuildingArea").Required(true).EditorOptions("textMode: \"multiline\" "); settings.ColumnSetting().ColumnKey("LocationDetails").Required(true).EditorOptions("textMode: \"multiline\" "); settings.ColumnSetting().ColumnKey("DescriptionofIssue").Required(true).EditorOptions("textMode: \"multiline\" "); settings.ColumnSetting().ColumnKey("IssueNotesDynamicName").EditorOptions("textMode: \"multiline\" "); settings.ColumnSetting().ColumnKey("PanelCircuitNumber").EditorOptions("textMode: \"multiline\" "); settings.ColumnSetting().ColumnKey("UserReportingIssue").ReadOnly(true); //settings.ColumnSetting().ColumnKey("DNCUnCheck").ReadOnly(true); //settings.ColumnSetting().ColumnKey("DNCCheck").ReadOnly(true); settings.ColumnSetting().ColumnKey("IssueCreatedon").ReadOnly(true); settings.ColumnSetting().ColumnKey("IssueLastUpdatedby").ReadOnly(true); settings.ColumnSetting().ColumnKey("IssueUpdatedon").ReadOnly(true); settings.ColumnSetting().ColumnKey("Panel").Required(false) .EditorType(ColumnEditorType.Combo) .ComboEditorOptions(options => { options.DataSource(this.ViewData["Panel"]).AllowCustomValue(false).ValidatorOptions(option => { // option.KeepFocus(ValidatorKeepFocus.Never); // option.CustomErrorMessage("Alarm Type is required");
}); options.TextKey("Text").ValueKey("Value"); });
settings.ColumnSetting().ColumnKey("BreakerNo").Required(false) .EditorType(ColumnEditorType.Combo) .ComboEditorOptions(options => { options.DataSource(this.ViewData["BreakerNo"]).AllowCustomValue(false).ValidatorOptions(option => { // option.KeepFocus(ValidatorKeepFocus.Never); // option.CustomErrorMessage("Alarm Type is required"); }); options.TextKey("Text").ValueKey("Text"); });
});
}).DataSourceUrl(Url.Action("GetLightingIssues", "Home", new { PartyId = PartyManager.PartyId, Typeid = 1 })).Render())
Hello Atul,
Thank you for posting in our forum.
The Razor code is structured in a similar manner to the JavaScript one: let’s say that you want to declare this snippet from the JSFiddle you have provided:
features: [ { name: "Filtering", type: "local", columnSettings: [ { columnKey: "Country", customConditions: { USA: { key: 'USA', labelText: 'USA', expressionText: "USA", filterFunc: filterCountryUSA } } } ] ]
Using Razor syntax in the MVC View file would look like this:
.Features(features => { features.Filtering().Type(OpType.Local).ColumnSettings(cs => { cs .ColumnSetting() .ColumnKey("Country") .CustomConditions(cc => { cc.CustomConditions .AddCustomCondition("USA", new FilteringCustomCondition() { LabelText = "USA", FilterFunc = "filterCountryUSA", ExpressionText = "USA" }); }); }); })
Please note that the snippet above only binds the igGrid to this custom filtering function - it is very important not to forget to add the function declaration itself to the cshtml file (surrounded by <script></script> tags), otherwise an error would be thrown as the grid would not be able to find it. In the JSFiddle sample "filterCountryUSA" is declared at the very bottom and look like this:
function filterCountryUSA(value, expression, dataType, ignoreCase, preciseDateFormat) { return value === "USA"; }
If you need any additional assistance, feel free to contact me.
Hi Vasil,
Thanks for your reply. In my application CustomCondition method is not found, getting error message "Error CS1061 'ColumnFilteringSettingWrapper' does not contain a definition for 'CustomConditions' and no extension method 'CustomConditions' accepting a first argument of type 'ColumnFilteringSettingWrapper' could be found (are you missing a using directive or an assembly reference?) " . Below is the screenshot . Am i missing something?
This issue might have been caused by using some older version of the MVC Helpers. Which .dll files do you refer to, in your project? Try pressing Ctrl + Alt + U while in debug mode in Visual Studio. It would show you which modules have been loaded at runtime (how the dependencies have been resolved). It would look similar to this one:
Which version of Infragistics.Web.Mvc.dll do you see there?
We are using version 4.14.1.2031 of Infragistics.Web.Mvc.dll. Can we achieve this via Javascript ?
if upgradation is the only solution. Can you please guide me how to do that?
Thanks in Advance
The grid configuration is being generated by the MVC Helpers, which means that using only JavaScript would not be sufficient for achieving your requirement.
In order to take advantage of all new features in latest versions of Ignite UI, I would strongly recommend you to upgrade to any of our latest versions. Additionally, according to our Product Lifecycle policy, all products prior to version 16.2 are no longer eligible for service releases and support.
I would suggest you to contact our sales department and they will assist you with your license renewal.
Having in mind that since version 14.1 the product has undergone some major changes, it is advisable to have a full backup of your application before starting the migration process. All these product changes are listed on our web site under Breaking Changes section and we have history for the changes in previous versions under Breaking Changes Revision History section. These differences between versions will imply modification in your code.
Please let me know if you need any further assistance with this matter.