Conditional Formatting Component

The dReveal conditional formatting component provides features to highlight cetain values displayed in the grid component.

Controller

This model binder structure is mapped via the DRevealDataStructure class, that returns the current state of the conditional formatting component. This state contains the conditional formatting values applied. The state received after mapping processing must be assigned to the Grid View Model method called SetState.

The following code demonstrates how to invoke the method mentioned before:

[Route("GridReport")]
public ActionResult GridReport(
    [ModelBinder(typeof(DRevealDataStructureBinder))] DRevealDataStructure gridState
)
{
    GridViewModel viewModel = new GridViewModel(
        memoryStream: fileStream,
        connectionString: "Data Source=MyServer; Initial Catalog=myDatabase; User ID=myUser; Password=myPassword",
        gridId: "grid_id",
        htmlFormId: "main_form",
        rowsPerPage: 15,
        enableColumnFinderFeature: true,
        isGridPagerSimpleMode: true,
        fullGridControllerActionPath: HttpContext.Request.Url.AbsolutePath,
        gridActionName: string.Empty,
        drillThroughControllerAction: string.Empty,
        saveGridControllerAction: string.Empty,
        exportToExcelGridControllerAction: string.Empty
    );
    
    // Set dReveal Data Strucuture
    viewModel.SetState(gridState);
    viewModel.LoadInitialConfiguration();
    
    return View("GridReport", viewModel);
}

View

The dReveal conditional formatting component provides a method to be able of visualizing it throughout a razor page. It is possible to invoke this method following manner:

IA_dRevealConditionalEditor.open(height, width);

The following code shows how to use the method in a view:

IA_dRevealConditionalEditor.open(600, 500);

note

These HTML buttons must be placed within the form tag.

Example

The following code is a full sample of dReveal conditional formatting component integration:

@using InfoArch.Web.Mvc.UI
@using InfoArch.Web.Mvc.Grid
@using InfoArch.Web.Mvc.Enums

@model GridViewModel
@Html.InfoArch().RegisterRequiredThirdPartyLibraries(
    RegisterThirdPartyType.Grid,
    RegisterThirdPartyElements.JQuery
)
@Html.InfoArch().GetStyleSheets(
    new StyleSheet { ExtensionType = ExtensionType.Grid }
)
@Html.InfoArch().GetScripts(
    new Script { ExtensionSuite = ExtensionSuite.Grid }
)

<style>
    #grid-container {
        height: 100vh;
        width: 80%;
    }

    #reporting-grid {
        display: flex;
        flex-direction: row;
    }
</style>

<div >
    @using (@Html.BeginForm("GridReport", "Reporting", FormMethod.Post, new { id = "grid-form" }))
    {
        @Html.AntiForgeryToken()
        <div>
            <button id="conditional-formatting-button" type="button">Open Conditional Formatting</button>
        </div>
        <div id="reporting-grid">
            <section id="grid-container">
                @Html.InfoArch().Grid(@Model.GridSettings).GetHtml()
            </section>
        </div>
    }
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let conditionalFormattingButton = document.getElementById("conditional-formatting-button");

        conditionalFormattingButto.addEventListener("click", (event) => {
            IA_dRevealConditionalEditor.open(600, 500);
        });
        
    });
</script>

It is important to take in account that the conditional formatting component is into the grid component.

tip

Security Tip: The @Html.AntiForgeryToken() method could be added to prevent CSRF attacks. This method is provided by .Net Framework. For further information, visit the official Microsoft documentation.

tip