jsgrid multiple custom control buttons?

Question

I would like to add multiple custom control buttons so I can add a custom click event to the buttons. The issue I am having is the delete button is only shown. I would like both the edit and delete buttons shown in every row. I have the following code:

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "auto",
           width: "100%",
           sorting: true,
           paging: true,
           autoload: true,
           pageSize: 10,
           pageButtonCount: 5,
           deleteConfirm: "Do you really want to delete your job listing?",
           controller: {
               loadData: function(filter) {
                   return $.ajax({
                       type: "GET",
                       url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
                       data: filter
                   });
               },
           },
           fields: [
               { name: "id", title: "id", type: "text", visible: false, width: 100 },
               { name: "title", title: "Title", type: "text", width: 100 },
               { name: "created_on", title: "Created On", type: "text", width: 100 },
               { name: "salary", title: "Salary", type: "text", width: 100 },
               { name: "is_active", type: "text", title: "Is Active", width: 100 },
               { type: "control", width: 100, editButton: false, deleteButton: false,
                 itemTemplate: function(value, item) {
                    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                    var $customButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-edit-button"})
                      .click(function(e) {
                        alert("ID: " + item.id);
                        e.stopPropagation();
                      });

                    return $result.add($customButton);
                },
                itemTemplate: function(value, item) {
                  var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                  var $customButton = $("<button>").attr({class: "customGridEditbutton jsgrid-button jsgrid-delete-button"})
                    .click(function(e) {
                      alert("Title: " + item.title);
                      e.stopPropagation();
                    });

                    return $result.add($customButton);
                }
              }
           ]
       });
    });

</script>

Answer 1

I was able to figure this out:

Code:

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "auto",
           width: "100%",
           sorting: true,
           paging: true,
           autoload: true,
           pageSize: 10,
           pageButtonCount: 5,
           deleteConfirm: "Do you really want to delete your job listing?",
           controller: {
               loadData: function(filter) {
                   return $.ajax({
                       type: "GET",
                       url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
                       data: filter
                   });
               },
           },
           fields: [
               { name: "id", title: "id", type: "text", visible: false, width: 100 },
               { name: "title", title: "Title", type: "text", width: 100 },
               { name: "created_on", title: "Created On", type: "text", width: 100 },
               { name: "salary", title: "Salary", type: "text", width: 100 },
               { name: "is_active", type: "text", title: "Is Active", width: 100 },
               { type: "control", width: 100, editButton: false, deleteButton: false,
                 itemTemplate: function(value, item) {
                    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                    var $customEditButton = $("<button>").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"})
                      .click(function(e) {
                        alert("ID: " + item.id);
                        e.stopPropagation();
                      });

                   var $customDeleteButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"})
                    .click(function(e) {
                      alert("Title: " + item.title);
                      e.stopPropagation();
                    });

                    return $("<div>").append($customEditButton).append($customDeleteButton);
                    //return $result.add($customButton);
                },
              }
           ]
       });
    });

</script>