我希望能够调整大小设置网格行的默认高度 [英] I want to be able to resize set the default height of the grid rows

问题描述

大家好，



我正在使用如下的Kendo Grid，我希望能够调整大小设置Grid行的默认高度然后想要能够调整它，任何人都可以帮助我在这方面，我在谷歌搜索，但没有找到它的例子，你能在这方面帮助我提前感谢朋友。

< div class =row table-responsivestyle =padding-left：0％> 
< div id =datalist> 
 @（Html.Kendo（）。Grid< DHCS.BH.Provider.Models.ErrorLogTable>（）
 .Name（LookupGrid）
 .EnableCustomBinding（true）
 .AutoBind（true）
 .Columns（columns => 
 {
 columns.Bound（p => p.PKErrorLogId）; 
 columns.Bound（p => p.ApplicationName）.Width（120）.Hidden（）; 
 columns.Bound（p => p.AppUsername）.Width（340）.Hidden（）; 
 columns.Bound（p = > p.Class）; //.ClientTemplate（## DateFormat（CreatedDate）#\").Width(130); 
 columns.Bound（p => p.DateTS）.Width（150）; 
 columns.Bound（p => p.LogDetailText）; //.ClientTemplate（＃= DateFormat（ModifiedDate）#\").Width(140) ;; 
 columns.Bound（p => ; p.LogType）.Width（150）.Hidden（）; 
 columns.Bound（p => p.Method）.Width（100）; 
 columns.Bound（p => p.NameSpace）.WIDTH（100）.Hidden（）; 
 columns.Bound（p => p.Version）.Width（100）.Hidden（）; 
}）
 .Pageable（）
 .Resizable（resize => resize.Columns（true））
 .Sortable（）
 .Scrollable（）
 .Filterable（x => x.Extra（false）.Operators（O => O.ForString（str => str.Clear（）。StartsWith（Starts With））））
 .HtmlAttributes（new {style =height：600px;}）
 .DataSource（ds => ds 
 .Ajax（）
 .PageSize（20）
 .Model （model => {model.Id（p => p.PKErrorLogId）;}）
 .Read（read => read.Action（ErrorLogList，ErrorLog）。Data（GetAntiForgeryToken） ））
）
）
< / div> 
< / div> 

我尝试过：



在线搜索并阅读Kendo文章到目前为止还没能找到一个例子

解决方案

实现可实现的基本概念网格是您需要删除您在网格中设置的所有固定宽度。然后，您可以在设置网格大小时使用百分比（％）像素（px）。最后，您可以使用jQuery realizable等客户端插件来为您处理。



例如，你可以像这样定义你的HTML标记：

 <   div     id   =  datalist   样式  =  width： 550像素; >  
 <！ -    这里的网格宽度= 100％   - >   
 <   / div  

然后使用jQuery可调整大小如下：

< script type =   text / javascript> 

（ function （）{

（ ＃datalist）。resizable（）;
}）
< / script>

更多信息，请参阅：可调整大小| jQuery UI [ ^ ]



PS：这里可能有一些人知道Telerik控件，但我相信通过在Telerik专用论坛上发布它会有更好的机会：https://www.telerik.com/forums/kendo-ui/grid

hi All,

I am using a Kendo Grid as below, I want to be able to Resize set the default height of the Grid rows and then want to be able to resize it, can anybody please help me in this regards, I am searching on google, but not finding an example for it, can you please help me in this regards thanks in advance friends.

<div class="row  table-responsive " style="padding-left: 0%">
    <div id="datalist">
        @(Html.Kendo().Grid<DHCS.BH.Provider.Models.ErrorLogTable>()
                        .Name("LookupGrid")
                .EnableCustomBinding(true)
                .AutoBind(true)
                .Columns(columns =>
                {
                    columns.Bound(p => p.PKErrorLogId);
                    columns.Bound(p => p.ApplicationName).Width(120).Hidden();
                    columns.Bound(p => p.AppUsername).Width(340).Hidden();
                    columns.Bound(p => p.Class); //.ClientTemplate("#=DateFormat(CreatedDate)#").Width(130);
                    columns.Bound(p => p.DateTS).Width(150);
                    columns.Bound(p => p.LogDetailText); //.ClientTemplate("#=DateFormat(ModifiedDate)#").Width(140); ;
                    columns.Bound(p => p.LogType).Width(150).Hidden();
                    columns.Bound(p => p.Method).Width(100);
                    columns.Bound(p => p.NameSpace).Width(100).Hidden();
                    columns.Bound(p => p.Version).Width(100).Hidden();
                })
                            .Pageable()
                            .Resizable(resize => resize.Columns(true))
                            .Sortable()
                            .Scrollable()                            
                            .Filterable(x => x.Extra(false).Operators(O => O.ForString(str => str.Clear().StartsWith("Starts With"))))
                            .HtmlAttributes(new { style = "height:600px;" })
                            .DataSource(ds => ds
                            .Ajax()
                            .PageSize(20)
                            .Model(model => { model.Id(p => p.PKErrorLogId); })
                                            .Read(read => read.Action("ErrorLogList", "ErrorLog").Data("GetAntiForgeryToken"))                             
                )
        )
    </div>
</div>

What I have tried:

Searching online and reading the Kendo articles so far not been able to find an example

解决方案

The basic concept of having a realizable grid is you need to remove all the fixed width that you set in your grid. You can then use percent instead(%) of pixels (px) when setting the size of your grid. And finally, you can use client-side plugin such as jQuery realizable to handle that for you.

For example you can define your HTML markup like this:

<div id="datalist" style="width:550px;">
	<!-- Your Grid here with width = 100% -->
</div

And then use jQuery resizable like this:

<script type="text/javascript">

(function() {

("#datalist").resizable(); }) </script>

More info, see: Resizable | jQuery UI[^]

PS: There may be some here who knows about Telerik controls, but I believed you stand a better chance by posting it at Telerik dedicated forums:https://www.telerik.com/forums/kendo-ui/grid

这篇关于我希望能够调整大小设置网格行的默认高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！