随着更多数据的添加,kendo ui网格单元格显示区域缩小

时间:2012-12-03 03:31:00

标签: asp.net-mvc-3 datagrid kendo-ui

如何防止告诉网格最大化记录显示区域并保持页面控件的区域固定?这是我在将数据添加到网格时遇到的情况。记录显示区域缩小,页面导航控制区域随着添加更多页面而不断增加,占用剩余空间,而页面导航控件垂直对齐而不是水平对齐。

在升级到Kendo UI Web版本2012.3.1114之后,这种情况开始发生。enter image description here

使用更多信息进行编辑:

我正在按如下方式初始化网格:

    $("#kendoGrid").kendoGrid({         
        height: "200px",  div is constant height
        dataSource: this._dataSource,
        autowidth: true,
        columns: columnModels,
        sortable: true,                             
        pageable: {
            refresh: true,
            pageSizes: true
        },              
        width: '100%'

    });

和grid是ASP.NET MVC页面的一部分,定义如下:

using (Html.BeginForm())
{
    <fieldset>

        <div id="centerstage"  >
            <div id="left" >
                <div id="accordion">                                       
                </div>              
            </div>  
            <div id="main-content-div" style="overflow: hidden">
                <div id="center" class="column" />                   
                <div id="console" class="console" >
                    <table  id="kendoGrid" >
                    </table>
                    <div id="pager"></div> 
                </div>
            </div>
            <div id="right" >
                <div id="dashboardDiv"  >
                    <p>dash board</p>    
                </div>
            </div>
        </div>
    </fieldset>

并使用kendo分离器进行初始化。

    $("#centerstage").kendoSplitter({
        orientation: "horizontal",
        panes: [
                        { collapsible: true, resizable: true, size: "21%" },
                        { collapsible: false, resizable: true, size: "60%" },
                        { collapsible: true, resizable: true, size: "19%" }
                    ]
    });

    $("#main-content-div").kendoSplitter({
        orientation: "vertical",
        panes: [
                        { collapsible: false, size: "500px" },
                        { collapsible: true, resizable: true, size: "220px" }
                    ]
    });    

0 个答案:

没有答案