Grid Columns Auto Width, Autofit - Awesome Core And MVC ...

Grid columns auto width, autofit descriptionviewGrid column width is determined by the cells contents, each time the user goes on a different page the grid columns widths can change (you may need to make your browser window smaller to notice that).GridColumnsAutoWidth/Index.cshtmlsrc@(Html.Awe().Grid("Grid1") .Mod(o => o.Main().Custom("gridColAutoWidth")) .Columns( new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false }, new Column { Bind = "Person" }, new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 }, new Column { Bind = "Country.Name", Header = "Country" }, new Column { Bind = "Date", Width = 120 }, new Column { Bind = "Location" }, new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" }) .Url(Url.Action("GetItems", "LunchGrid")) .Height(350) .Reorderable())<script> function gridColAutoWidth(o) { var g = o.v; // data loaded awe.bind(o, g, 'aweload', function (e) { if (!$(e.target).is(g)) return; var colSizes = {}; var scale = $('<span class="awe-row"></span>'); g.find('.awe-content').append(scale); // calc col sizes g.find('.awe-itc .awe-row').each(function (i, rel) { $(rel).children().each(function (tdi, tdel) { // get content width scale.html($(tdel).html()); colSizes[tdi] = Math.max(colSizes[tdi] || 0, scale.width()); }); }); scale.remove(); // apply col sizes var columns = g.data('o').columns; g.find('colgroup').first().children().each(function (rendi, cel) { var coli = $(cel).data('i'); if (awef.isNotNull(coli)) { columns[coli].Mw = colSizes[rendi] + 50; // plus for padding } }); g.data('api').render(); }); }</script> Comments

Documentation Forum Sitemap Prodinner Demo

Contact Us Terms of Use Privacy policy Cookie policy

By accessing this site, you agree to store cookies on your device and disclose information in accordance with our cookie policy and privacy policy. OK