Custom Command Edit Example Does Not Work

@{

    List<object> commands = new List<object>();
    commands.Add(new { type = "userstatus", buttonOption = new { content = "Details", cssClass = "e-flat e-details" } }); // custom
}

<div class="control-section">
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" load="load" allowPaging="true">
        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="true"></e-grid-editSettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
            <e-grid-column field="Verified" headerText="Verified" editType="booleanedit" displayAsCheckBox="true" textAlign="Center" type="boolean" width="100"></e-grid-column>
            <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>
<script>
    function load() {
        this.columns[2].commands[0].buttonOption.click = function (args) {     //click event for custom command button
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];  // grid instance
                var rowObj= grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid'));
                alert(JSON.stringify(rowObj.data));  // display row data 
        }
    }
</script>