Custom command on Grid with Crud Operation

[Tommy Mailhot]

Hi,

In my grid, I have inline command button

For each standard action (Edit, Delete, Save Cancel), my javascript function «GridRefresh» is called correctly.

For my Custom command (Up, Down), my Javascript function is never called.  How can I do that?

Also, how can I specify icon for my custom command?

Thank you!

@{

List<object> commands = new List<object>();

commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } });

commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } });

commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } });

commands.Add(new { type = "Up", buttonOption = new { cssClass = "e-flat" } });

commands.Add(new { type = "Down", buttonOption = new { cssClass = "e-flat" } });

}

@Html.EJS().Grid("WorkOrderTasks")

.DataSource(dataManager => { dataManager.Url("/WorkOrder/LoadWorkOrderTasks/?id=" + Model.WorkOrderTaskEditorRowUuid).Adaptor("UrlAdaptor").CrudUrl("/WorkOrder/CRUDUpdateWorkOrderTasks/?WorkOrderUuid=" + Model.WorkOrderTaskEditorRowUuid); })

.ActionComplete("GridRefresh").ActionBegin("GridRefresh").ToolbarClick("toolbarClick").Columns(col =>

{

col.Field("WorkOrderTaskViewRowUuid").IsPrimaryKey(true).AllowEditing(false).HeaderText("Numéro de tâche").Width("0").Visible(false).Add();

col.Field("orderNumber").HeaderText("").Width("40").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).AllowEditing(false).Add();

col.Field("Task").HeaderText("Tâche").ValidationRules(new { required = "true" }).Width("300").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();

col.Field("EstimatedHours").HeaderText("Temps estimé").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();

col.HeaderText("Gestion des lignes").Width("160").Commands(commands).Add();

}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowEditOnDblClick(true); }).Toolbar(new List<string>() { "Add" }).Render()

[Pavithra Subramaniyam]

Hi Tommy, 

We have checked your code and In Essential JavaScript 2 Grid Command Column has default buttons(Edit, Delete, Update, Cancel) and custom command button support. We would like to suggest you to wire the click event for the custom command button to achieve your requirement. We have prepared a simple sample which can be downloaded from the below link. Please refer to the code example. 

[index.chtml] 

@{ 

 

        List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

        .   .   . 

       commands.Add(new { buttonOption = new { content = "UP", cssClass = "e-up e-flat" }); 

    } 

 

 

    @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/GetData").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Delete").Adaptor("UrlAdaptor"); }).Columns(col => 

   { 

       .  .  . 

       col.HeaderText("Manage Records").Width("160").Commands(commands).Add(); 

 

   }).AllowPaging().DataBound("bound").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() 

 

<script> 

    function bound(e) { 

            var ele = document.getElementsByClassName("e-grid")[0] 

            ele.addEventListener('click', function (e) { 

                if (e.target.classList.contains('e-up')) { 

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

                    var rowObj = grid.getRowObjectFromUID(ej.base.closest(e.target, '.e-row').getAttribute('data-uid')); 

                    var data = rowObj.data; 

                    alert(JSON.stringify(data)); 

                } 

 

            });    

    } 

     

</script> 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/command_column728986146  

Regards, 

Pavithra S.