ASP.NET Core Grid Command Button Visibility Conditionally

[John]

I need to show a command button conditionally based on data in the grid.  I'm using the example in the link below but it's not working.

If I leave off the parentheses in the visible property then the javascript call never gets made.  If I add them, the javascript call does get made but the data parameter is undefined. 

I am using Core and the Razor syntax, not MVC and the HTML helpers as the example shows but I would assume the same concept should work.  Any ideas on why this is not working?

ASP.NET MVC Data Grid Component Show Command Buttons Conditionally | Telerik UI for ASP.NET MVC

<commands>
    <column-command name="questionanswers" click="goToQuestionAnswers" class-name="link-button" text="Answers" visible="isAnswerButtonVisible()"></column-command>
    <column-command name="edit" class-name="link-button" icon-class="k-no-icon"></column-command>
    <column-command name="destroy" class-name="link-button" icon-class="k-no-icon" text="Delete"></column-command>
</commands>

    function isAnswerButtonVisible(data) {
        return data.QuestionType !== "TrueFalse";
    }

[Aleksandar]

Hi John,

The provided configuration seems correct except that the visible attribute expects the name of the JavaScript function that will be executed on initialization of the row. The function is used to determine whether the command button will be visible and receives the data item object for the row as an argument.

Testing the provided configuration works as expected on my end:

<columns>
            <column field="OrderID" width="100">
                <filterable enabled="false"/>
            </column>
            <column field="Freight" width="100"/>
            <column field="OrderDate" width="140" format="{0:MM/dd/yyyy}"/>
            <column field="ShipName"/>
            <column field="ShipCity" width="150"/>
            <column>
                <commands>
                    <column-command name="questionanswers" click="goToQuestionAnswers" class-name="link-button" text="Answers" visible="isAnswerButtonVisible" ></column-command>
                </commands>
            </column>
        </columns>

<script>
    function isAnswerButtonVisible(data) {
        return data.EmployeeID % 2 == 0;
    }
    
    function goToQuestionAnswers(data) {
        kendo.alert('custom command clicked')
    }
</script>

Here is a sample REPL demonstrating the above.

Are you getting any errors logged in the console? Can you modify the above example so the behavior you experience is reproducible? 

Regards,
Aleksandar
Progress Telerik

[John]

No errors in the console.  I even tried updating to the latest NuGet package and no luck.  Your example does work so not sure what is going on.

I was able to find a work around using on-data-bound.

    function onDataBoundGrid() {
            var gridData = grid.dataSource.view();
            for (var i = 0; i < gridData.length; i++) {
                var questionType = gridData[i].QuestionType;
                if (questionType === "1") {
                    var currentUid = gridData[i].uid;    
                    var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");              
                    var answersButton = $(currentRow).find(".k-grid-questionanswers");
                    answersButton.hide();
                }
            }
        }
    }

[Aleksandar]

I am glad to hear you were able to find a workaround for the behavior. However, until I am able to observe it and debug locally, I cannot be sure on what is causing it.