Invoke Value Accessor after grid load

[Skye]

Hi,

I am currently using value accessor to display cell value, with the grid use UrlAdaptor.

function valueAccessorFn(field, data) {
    if (isShowCost) return data[field];

    const type = data["type"].trim();
 
    switch (type) {
        case "Purchase":      
            return data[field];
        case "Sales":
            return "";
    }
}

So my question is how do I invoke the valueAccessorFn when "IsShowCost" is change after page load?

[Rajapandi Ravi]

Hi Skye,

Greetings from Syncfusion support

In your query you have mentioned that “my question is how do I invoke the valueAccessorFn when "IsShowCost" is change after page load”, so before we start providing solution to your query we need some more information for our clarification, so please share the below details that would be helpful for us to provide better solution.

1)                Please confirm you are editing and change the “IsShowCost” value and like to invoke the valueAccessorFn. We would like to inform you that by default in our EJ2 Grid, after changing and save

                    Value the ValueAccessorFn gets triggered. So please share the details about your scenario step by step with detailed description.

2)                Share your exact requirement and use case scenario with detailed description.

3)                Share your problem scenario in Video demonstration format.

Regards,

Rajapandi R

[Skye]

Hi,

My scenario is as below:

1. The page load with 2 components:
• An EJ2 Grid
• A Checkbox
2. The user can choose to show or hide cost on the grid by checking/unchecking the checkbox.

$("#CheckBox").on("click", function(e) {
    isShowCost = this.checked;

    // some code to trigger EJ2 Grid

});

[Rajapandi Ravi]

Skye,

You can show or hide Grid columns dynamically using external Checkbox by invoking the showColumns() or hideColumns(). Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement.

 

<ejs-checkbox id="checked" checked="true" change="change" label="Checked State"></ejs-checkbox>

 

<ejs-grid id="Grid" height="500" load="onLoad" allowPaging="true" width="100%" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })">

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager>

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

    <e-grid-columns>

        .  .  .  . 

        .  .  .  .

        <e-grid-column field="ShipCity" valueAccessor="valueAccessor" headerText="Ship City" width="150"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<script>

      function change(args) { //change event of Checkbox component

        var grid = document.getElementById('Grid').ej2_instances[0];

        if (args.checked) {

            grid.showColumns(['Ship City']); //pass the header text

        }

        else {

            grid.hideColumns(['Ship City']);

        }

 

    }

</script>

 

Sample:

API: https://ej2.syncfusion.com/documentation/api/grid/#showcolumns

        https://ej2.syncfusion.com/documentation/api/grid/#hidecolumns

Attachment: 183849_83960ee8.zip

[Skye]

Hi Rajapandi,

Sorry for my explanation not that clear.

What I meant by show/hide cost is the column is always visible, the checkbox will determine if the cell value display text or blank value. Which is why I am asking how do I invoke ValueAccessor.

Regards, 

Skye.

[Rajapandi Ravi]

Skye,

After reviewing your query, we understand that you like to enable/disable the ValueAccessor when the checkbox is check/uncheck. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

<script>

    var isShowCost = true;

 

    function valueAccessorFn(field, data, column) {

        if (isShowCost) {

            return data[field];

        }

        else {

            return "";

        }

        

    }

 

    function change(args) {

        var grid = document.getElementById('Grid').ej2_instances[0];

 

        isShowCost = args.checked;

        grid.refresh();  //invoke the refresh to invoke the valueaccessor

    }

</script>

 

Sample:

Screenshot:

Attachment: 183849_b5b1dac0.zip

[Skye]

Hi,

Thanks for the solution. Much appreciated.

Regards,

Skye