This is a method to add custom buttons (or any control really) to the grid. This code is mostly from Craig Stuntz from his post on Adding a button to a row in jqgrid. Thanks!

In order to accomplish this, you need to write a function for the onGridComplete event. This function will loop through all the rows, create the controls for that row, then add them to the column.

First, in your data, add a property that will host the controls. In my example, I add a Actions Property:

    public class Product
    {
        [Key]
        public int ProductId { get; set; }

        public string Actions { get; set; }
        public string Name { get; set; }
        [Display(Name="Company name")]
        public string CompanyName { get; set; }
        public double Price { get; set; }
        public List<Store> Stores { get; set; }

        public Product() { this.Stores = new List<Store>(); }
    }

Next the javascript function. The name of the grid is 'grid'.

        function createActionControls(data) {
            var ids = jQuery("#grid").getDataIDs();
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#grid').editRow(" + cl + "); ></ids>";
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#grid').saveRow(" + cl + "); />";
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#grid').restoreRow(" + cl + "); />";
                jQuery("#grid").setRowData(ids[i], { Actions: be + se + ce });
            }
        }

Here we are creating three buttons to handle CRUD operations, notice that we use 'Actions' in the setRowData function.

Finally, we add the OnGridComplete event to the grid:

.SetOnGridCompleteEvent("createActionControls")

 

Or the full grid:

   <%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)        
        .SetHttpVerb(HttpVerbs.Get)
        .SetListUrl("Home/List")
        .SetOnGridCompleteEvent("createActionControls")
        .SetHeight("'100%'")
        .SetOnLoadCompleteEvent("gridCompletedEvent")
        .SetAdditionalAttributes("sortname: 'Price', sortorder: 'asc',")
        .SetColumns<MVC.Controls.Examples.Models.Product>(cs=>
             {
                cs.Add(x => x.Actions).SetEditable(false);                                                
                cs.Add(x => x.ProductId).SetAsPrimaryKey();
                cs.Add(x => x.Name);
                cs.Add(x => x.CompanyName);
                cs.Add(x => x.Price);
            })        
        )
    %>

Last edited Jun 3, 2011 at 6:20 PM by PhilmanCJ, version 1

Comments

No comments yet.