Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Atul Pandey
70
I want to add custom Conditions in filter from infragistic mvc razor syntax
posted

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())

Parents
  • 485
    Offline posted

    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.

Reply Children