允许用户调整gridview列的大小

时间:2019-02-26 00:20:03

标签: asp.net datagrid

我想允许用户像在此gif中那样在我的datagridview中调整列的大小。 https://docs.telerik.com/devtools/winforms/controls/gridview/columns/images/gridview-columns-rezise-columns001.gif

我试图添加AllowUserToResizeColumns =“ True”,但由于某种原因,这对我不起作用,这是我的datagridview标头代码。

<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="compras_id"
                ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
                 CellPadding="3" AllowUserToResizeColumns="True" PageSize="5" AllowSorting="true" onsorting="grdPurchases_Sorting"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                <PagerSettings  Mode="Numeric" />       

我该怎么做才能使用户调整列的大小。谢谢

1 个答案:

答案 0 :(得分:0)

最后我发现我需要使用JavaScript才能像Alex所说的那样工作,所以这是我的解决方案

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         if ($.cookie('colWidth') != null) {
             var columns = $.cookie('colWidth').split(',');
             var i = 0;
             $('.mGrid th').each(function () {
                 $(this).width(columns[i++]);
             });
         }

         $(".mGrid").colResizable({
             liveDrag: true,
             gripInnerHtml: "<div class='grip'></div>",
             draggingClass: "dragging",
             onResize: onSampleResized
         });

     });

     var onSampleResized = function (e) {
         var columns = $(e.currentTarget).find("th");
         var msg = "";
         columns.each(function () { msg += $(this).width() + ","; })
         $.cookie("colWidth", msg);
     }; 
</script>  

  <asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="compras_id"
        ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
         CellPadding="3" AllowUserToResizeColumns="True" PageSize="5" AllowSorting="true" onsorting="grdPurchases_Sorting"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
        <PagerSettings  Mode="Numeric" />