CODEWITHSUNDEEP
javascriptjsgrid
dottedquad
dottedquad

Reputation: 1391

jsgrid: add a page load to the edit button?

I would like to change the built-in functionality of the jsgrid edit button from the inline editor to opening another page to edit. I am not exactly sure how to do that. Any ideas how I can achieve changing the default edit button to loading a page? Is that even possible? So far I have:

code: 

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "398px",
           width: "100%",
           inserting: true,
           editing: true,
           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
                   });
               },
               insertItem: function(item) {
                   return $.ajax({
                       type: "POST",
                       url: "/clients/",
                       data: item
                   });
               },
               updateItem: function(item) {
                   return $.ajax({
                       type: "PUT",
                       url: "/clients/",
                       data: item
                   });
               },
               deleteItem: function(item) {
                   return $.ajax({
                       type: "DELETE",
                       url: "/clients/",
                       data: item
                   });
               }
           },
           fields: [
               { 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" }
           ]
       });
    });

</script>

Upvotes: 0

Views: 1972

Answers (1)

u936293
u936293

Reputation: 16234

I use a pop-up, a jQuery dialog, but you can use something else equivalent too, like a bootstrap dialog.

I tied the edit to clicking a row, and my code is something like:

$("#jsGrid").jsGrid({
    ...
    rowClick: function(args) {
        showDialog(args.item);
    },
    ...
 );

showDialog is the function to launch the pop-up. The selected row is made available in args.item.

Then, in the showDialog function, upon user saves, I use the following to trigger the jsGrid's update method, which will then also refresh the affected row in the grid:

$("#jsGrid").jsGrid("updateItem", updatedItem);

Hope this helps.

Upvotes: 2

Related Questions