MVCjQueryControls Wiki Rss Feed

New Comment on "MVC.Controls Tutorial #2"

BillyM — Wed, 13 Jun 2012 17:30:58 GMT

Is there an example of this using MVC3 / Razor? I added the namespace to web.config but not sure what to do with Html.Grid

New Comment on "MVC.Controls Tutorial #2"

anuragpal2 — Tue, 27 Dec 2011 08:08:31 GMT

Hi, First of all i thanks to you for posting nice articles over grid Data . I want to implements delete ,cancle and update button for each rows . but i can't do it Please let me know the solutions if its possible. Thanks in advance Anurag Pal

New Comment on "MVC.Controls Tutorial #2"

yvinodreddy — Tue, 22 Nov 2011 17:26:44 GMT

var model = products.AsQueryable().OrderBy(o => sidx + " " + sord); return Json(model.ToGridData(page, rows, null, "", new[] { "Id", "Name", "CompanyName", "Price" }), JsonRequestBehavior.AllowGet); Successfully worked

New Comment on "MVC.Controls Tutorial #2"

tazman — Thu, 03 Nov 2011 17:15:09 GMT

MVC.Controls dll is added as reference, yet I cannot reference it. "failed to import method on ToGridData" Windows 7 / vs 2010 sp1 / mvc 3 return Json(model.ToGridData(page, rows, null, "", new[] { "Id", "Name", "CompanyName", "Price" }), JsonRequestBehavior.AllowGet); please advise, thanks

New Comment on "MVC.Controls Tutorial #2"

AdrianoRR — Tue, 11 Oct 2011 16:41:28 GMT

I'm having the same problem that @mbabuglia had. And if i try to import System.Linq.Dynamic it says that theres an ambigous call between methods or properties from the System.Linq.Dynamic.DynamicQueryable.OrderBy(string, params object[])

New Comment on "Action on row click"

AdrianoRR — Tue, 11 Oct 2011 16:33:57 GMT

Now that i've tested it again, it seems that my function is being called twice. The first call works fine, but the second throws a "is not a function" error.

New Comment on "Workarounds and Fixes"

AdrianoRR — Tue, 11 Oct 2011 16:26:44 GMT

You know, it would be a good idea to provide more example or more HowTos. Anyway, it is a great initiative from you guys :)

New Comment on "Action on row click"

AdrianoRR — Tue, 11 Oct 2011 14:32:24 GMT

How can i define properly a function to be called by the OnSelectedRowEvent? I've tried using a simple Test(id) which alerts the id selected. Even though it works, i still get a "Test(id) is not a function" error (seen this using firebug). How can i prevent this error from ocurring?

Updated Wiki: jqGrid Horizontal scroll bug

PhilmanCJ — Tue, 07 Jun 2011 16:21:42 GMT

There is currently in the jqGrid API a bug where the horizontal scroll bar will always show when the width of the grid is automatic. Here is a workaround.

First, here are some javascript functions to help fix the error:

        var fixGridWidth = function (grid) {
            var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
            var mainWidth = jQuery('#main').width();
            var gridScrollWidth = grid[0].scrollWidth;
            var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
            var scrollWidth = gridScrollWidth;
            if (htable.length > 0) {
                var hdivScrollWidth = htable[0].scrollWidth;
                if ((gridScrollWidth < hdivScrollWidth))
                    scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
            }
            if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
                var newGridWidth = (scrollWidth <= mainWidth) ? scrollWidth : mainWidth;  // min (scrollWidth, mainWidth)
                // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
                if (newGridWidth != gviewScrollWidth)
                    grid.jqGrid("setGridWidth", newGridWidth);
            }
        };

        var fixGridHeight = function (grid) {
            var gviewNode = grid[0].parentNode.parentNode.parentNode;
            //var gview = grid.parent().parent().parent();
            //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
            var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
            if (bdiv.length) {
                var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
                var height = grid.height();
                if (delta !== 0 && height && (height - delta > 0)) {
                    grid.setGridHeight(height - delta);
                }
            }
        };

        var fixGridSize = function (grid) {
            this.fixGridWidth(grid);
            this.fixGridHeight(grid);
        };

        function loadCompletedEvent(data) {
            var gr = jQuery('#grid');
            fixGridSize(gr);
        }

Where 'main' is the div containing the grid, and 'grid' is the name of the grid. (main is the MVC default)

Finally you have to add the loadCompletedEventFunction to the grid:

       .SetOnLoadCompleteEvent("loadCompletedEvent")

Full grid:

    <%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)        
        .SetHttpVerb(HttpVerbs.Get)
        .SetListUrl("Home/List")
        .SetHeight("'100%'")
        .SetOnLoadCompleteEvent("loadCompletedEvent")
        .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);
            })          
        )
    %>

Thanks to Oleg for the fix: Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

Updated Wiki: jqGrid Horizontal scroll bug

PhilmanCJ — Tue, 07 Jun 2011 16:21:11 GMT

There is currently in the jqGrid API a bug where the horizontal scroll bar will always show when the width of the grid is automatic. Here is a workaround.

First, here are some javascript functions to help fix the error:

        var fixGridWidth = function (grid) {
            var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
            var mainWidth = jQuery('#main').width();
            var gridScrollWidth = grid[0].scrollWidth;
            var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
            var scrollWidth = gridScrollWidth;
            if (htable.length > 0) {
                var hdivScrollWidth = htable[0].scrollWidth;
                if ((gridScrollWidth < hdivScrollWidth))
                    scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
            }
            if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
                var newGridWidth = (scrollWidth <= mainWidth) ? scrollWidth : mainWidth;  // min (scrollWidth, mainWidth)
                // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
                if (newGridWidth != gviewScrollWidth)
                    grid.jqGrid("setGridWidth", newGridWidth);
            }
        };

        var fixGridHeight = function (grid) {
            var gviewNode = grid[0].parentNode.parentNode.parentNode;
            //var gview = grid.parent().parent().parent();
            //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
            var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
            if (bdiv.length) {
                var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
                var height = grid.height();
                if (delta !== 0 && height && (height - delta > 0)) {
                    grid.setGridHeight(height - delta);
                }
            }
        };

        var fixGridSize = function (grid) {
            this.fixGridWidth(grid);
            this.fixGridHeight(grid);
        };

        function loadCompletedEvent(data) {
            var gr = jQuery('#grid');
            fixGridSize(gr);
        }

Where 'main' is the div containing the grid, and 'grid' is the name of the grid. (main is the MVC default)

Finally you have to add the loadCompletedEventFunction to the grid:

       .SetOnLoadCompleteEvent("loadCompletedEvent")

Full grid:

    <%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)        
        .SetHttpVerb(HttpVerbs.Get)
        .SetListUrl("Home/List")
        .SetHeight("'100%'")
        .SetOnLoadCompleteEvent("loadCompletedEvent")
        .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);
            })          
        )
    %>

Thanks to Oleg for the fix: Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

In addition, if you have hidden columns and you are finding this bug, check ui.jqgrid.css. This line:

.ui-jqgrid .ui-jqgrid-btable {table-layout:fixed; margin:0em;}

I found if I removed table-layout:fixed; this corrects the problem.

.ui-jqgrid .ui-jqgrid-btable { margin:0em;}

This "correction" will fix that issue, but cause more layout issues in the future. Currently looking for another workaround.

Updated Wiki: API

PhilmanCJ — Tue, 07 Jun 2011 14:48:25 GMT

This is a work in progress, so please be patient. If you have any additions and/or comments please feel free to contact us or comment.

Download the API Helpfile

Download the XML documentation

API site

Updated Wiki: API

PhilmanCJ — Tue, 07 Jun 2011 14:00:58 GMT

This is a work in progress, so please be patient. If you have any additions and/or comments please feel free to contact us or comment.

Download the API Helpfile

Download the XML documentation

MVC.Controls.Grid Namespace
- GridControl
  - GridControl Members

New Comment on "MVC.Controls Tutorial #2"

bkominik — Mon, 06 Jun 2011 14:49:22 GMT

I think you need the dynamic query class. you can get it from the visual studio 2010 examples here: http://archive.msdn.microsoft.com/cs2010samples. Then add: using System.Linq.Dynamic;; to your controller Regards, Barry

Updated Wiki: jqGrid Horizontal scroll bug

PhilmanCJ — Fri, 03 Jun 2011 20:25:07 GMT

There is currently in the jqGrid API a bug where the horizontal scroll bar will always show when the width of the grid is automatic. Here is a workaround.

First, here are some javascript functions to help fix the error:

        var fixGridWidth = function (grid) {
            var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
            var mainWidth = jQuery('#main').width();
            var gridScrollWidth = grid[0].scrollWidth;
            var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
            var scrollWidth = gridScrollWidth;
            if (htable.length > 0) {
                var hdivScrollWidth = htable[0].scrollWidth;
                if ((gridScrollWidth < hdivScrollWidth))
                    scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
            }
            if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
                var newGridWidth = (scrollWidth <= mainWidth) ? scrollWidth : mainWidth;  // min (scrollWidth, mainWidth)
                // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
                if (newGridWidth != gviewScrollWidth)
                    grid.jqGrid("setGridWidth", newGridWidth);
            }
        };

        var fixGridHeight = function (grid) {
            var gviewNode = grid[0].parentNode.parentNode.parentNode;
            //var gview = grid.parent().parent().parent();
            //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
            var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
            if (bdiv.length) {
                var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
                var height = grid.height();
                if (delta !== 0 && height && (height - delta > 0)) {
                    grid.setGridHeight(height - delta);
                }
            }
        };

        var fixGridSize = function (grid) {
            this.fixGridWidth(grid);
            this.fixGridHeight(grid);
        };

        function loadCompletedEvent(data) {
            var gr = jQuery('#grid');
            fixGridSize(gr);
        }

Where 'main' is the div containing the grid, and 'grid' is the name of the grid. (main is the MVC default)

Finally you have to add the loadCompletedEventFunction to the grid:

       .SetOnLoadCompleteEvent("loadCompletedEvent")

Full grid:

    <%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)        
        .SetHttpVerb(HttpVerbs.Get)
        .SetListUrl("Home/List")
        .SetHeight("'100%'")
        .SetOnLoadCompleteEvent("loadCompletedEvent")
        .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);
            })          
        )
    %>

Thanks to Oleg for the fix: Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

In addition, if you have hidden columns and you are finding this bug, check ui.jqgrid.css. This line:

.ui-jqgrid .ui-jqgrid-btable {table-layout:fixed; margin:0em;}

I found if I removed table-layout:fixed; this corrects the problem.

.ui-jqgrid .ui-jqgrid-btable { margin:0em;}

Updated Wiki: Workarounds and Fixes

PhilmanCJ — Fri, 03 Jun 2011 18:20:39 GMT

Here are some of the current workaround, fixes, and general howtos for the jqGrid and jQuery ASP.Net MVC Controls.

Custom sorting
Action on row click
SetOnGridCompleteEvent
SetAdditionalAttributes
jqGrid Automatic height bug
jqGrid Horizontal scroll bug
Adding buttons inside the grid.

Updated Wiki: Adding buttons inside the grid

PhilmanCJ — Fri, 03 Jun 2011 18:20:01 GMT

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);
            })        
        )
    %>

Updated Wiki: Workarounds and Fixes

PhilmanCJ — Fri, 03 Jun 2011 18:02:47 GMT

Updated Wiki: jqGrid Automatic height bug

PhilmanCJ — Fri, 03 Jun 2011 18:00:56 GMT

There is a bug in the jqGrid framework where in IE9, when the height is set to auto, the grid will grow with every mouseover. Here is a description of the bug: height:"auto" works wrong in IE, height:"100%" works correct

For now, the fix is to use height: '100%' or with the MVC API

        .SetHeight("'100%'")

Updated Wiki: Documentation

PhilmanCJ — Fri, 03 Jun 2011 17:56:28 GMT

jQuery ASP.Net MVC Controls

Documentation Index:

Updated Wiki: Workarounds and Fixes

PhilmanCJ — Fri, 03 Jun 2011 17:55:51 GMT