locked
Is there any way to manually expand the width of webgrid column? RRS feed

  • Question

  • User-1651604128 posted

    Hi,

    I am using webgrid in my asp.net mvc web app, the column width can make fix by using .css, is that anyway to make it expandable? in other words, instead of static width, user can expand the width by clicking the border to each column and drag it to expand it.

    Thanks for any input, much appreciated,

    Peter

    Thursday, August 6, 2020 2:52 PM

Answers

  • User1686398519 posted

    Hi Peter Cong,

    You can use colResizable to achieve your needs.I made an example, please refer to it.

    1. You need to install colResizable through NuGet, and then reference it on the view.
    2. If you want to use colResizable successfully, you must ensure that the jquery file has been referenced and must be added before the colResizable-1.6.min.js file.
    3. The view in the example given uses the Layout view.The "table table-bordered" in the example is the css class name of bootstrap(Already referenced on the Layout view.).You can modify these two points according to your needs.

    For more usage of colResizable, please refer to this link:http://www.bacubacu.com/colresizable/#usage.

    Model

        public class mod
        {
            public int id { get; set; }
            public string name { get; set; }
            public double price { get; set; }
            public int number { get; set; }
            public static List<mod> getlist()
            {
                List<mod> mods = new List<mod>
                {
                    new mod{ id=1,name="mod1",price=12.22,number=4 },
                    new mod{ id=2,name="mod2",price=13.45,number=5 },
                    new mod{ id=3,name="mod3",price=15.23,number=6 },
                    new mod{ id=4,name="mod4",price=234.5,number=12 },
                    new mod{ id=5,name="mod5",price=23.34,number=34 }
                };
                return mods;
            }
        }

    Controller

    public class modController : Controller
    {
       public ActionResult ViewPage1()
       {
           var mods = mod.getlist();
           return View(mods);
       }
    }
    

    View

    @model IEnumerable<WebApplication26.Models.mod>
    @{
        var grid = new WebGrid(Model);
    }
    
    @grid.GetHtml(tableStyle: "table table-bordered")
    @section scripts{
        <script src="~/Scripts/colResizable-1.6.min.js"></script>
        <script>
            $("table").colResizable({
                resizeMode: 'flex'
                //flex:Columns are sized independently unless there is not enought space in the container.
            });
    </script>
    }

    Here is the result.

    Best regards,

    Yihui Sun

     

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 7, 2020 6:08 AM

All replies

  • User-474980206 posted

    you just write a javascript routine for this. this is know as resizable. here is a sample on a div, but it works for td.

       https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup

    if you google you will find libraries. 

    Thursday, August 6, 2020 3:11 PM
  • User1686398519 posted

    Hi Peter Cong,

    You can use colResizable to achieve your needs.I made an example, please refer to it.

    1. You need to install colResizable through NuGet, and then reference it on the view.
    2. If you want to use colResizable successfully, you must ensure that the jquery file has been referenced and must be added before the colResizable-1.6.min.js file.
    3. The view in the example given uses the Layout view.The "table table-bordered" in the example is the css class name of bootstrap(Already referenced on the Layout view.).You can modify these two points according to your needs.

    For more usage of colResizable, please refer to this link:http://www.bacubacu.com/colresizable/#usage.

    Model

        public class mod
        {
            public int id { get; set; }
            public string name { get; set; }
            public double price { get; set; }
            public int number { get; set; }
            public static List<mod> getlist()
            {
                List<mod> mods = new List<mod>
                {
                    new mod{ id=1,name="mod1",price=12.22,number=4 },
                    new mod{ id=2,name="mod2",price=13.45,number=5 },
                    new mod{ id=3,name="mod3",price=15.23,number=6 },
                    new mod{ id=4,name="mod4",price=234.5,number=12 },
                    new mod{ id=5,name="mod5",price=23.34,number=34 }
                };
                return mods;
            }
        }

    Controller

    public class modController : Controller
    {
       public ActionResult ViewPage1()
       {
           var mods = mod.getlist();
           return View(mods);
       }
    }
    

    View

    @model IEnumerable<WebApplication26.Models.mod>
    @{
        var grid = new WebGrid(Model);
    }
    
    @grid.GetHtml(tableStyle: "table table-bordered")
    @section scripts{
        <script src="~/Scripts/colResizable-1.6.min.js"></script>
        <script>
            $("table").colResizable({
                resizeMode: 'flex'
                //flex:Columns are sized independently unless there is not enought space in the container.
            });
    </script>
    }

    Here is the result.

    Best regards,

    Yihui Sun

     

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 7, 2020 6:08 AM