Telerik Extensions for ASP.NET MVC根据视窗宽度隐藏/取消隐藏各种网格列

Question

我在Telerik Extensions for ASP中有一个相当宽的(1200+px) Telerik网格。. NET MVC中的Razor语法，我希望能够隐藏/取消隐藏某些列基于终端用户的浏览器的视口的宽度。这可能吗?

我的愿望是有3列出现，否则设置为。hidden (true)，如果视口宽度>1024px

Answer 1

一个可能的解决方案是使用媒体查询和响应式设计技术。

基本原则是呈现所有的列，这样它们就都在HTML中发出(即将所有列的Hidden设置为false)，然后在CSS中使用媒体查询来显示/隐藏基于视口宽度的适当列。

我不确定Telerik网格发出的确切标记，但我已经创建了一个jsfiddle，在这里用一个基本的HTML表演示了这个概念:http://jsfiddle.net/peRq2/

HTML:

<table>
    <thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th class="wide">Header (wide)</th>
        <th class="wide">Header (wide)</th>
        <th class="wide">Header (wide)</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
        </tr>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
            <td class="wide">Value</td>
        </tr>
    </tbody>
</table>

CSS3(与媒体查询基于宽度600px -你可以改变为1200px):

@media (max-width: 600px) {
.wide {
    display: none;
}
}

这个想法是，wide类标记的th s和td s隐藏时，视口小于600px。尝试更改jsfiddle上结果窗格的宽度，以查看正在工作的媒体查询的结果。

需要注意的是媒体查询的浏览器兼容性(主要是IE9及以上版本和所有其他现代浏览器):http://caniuse.com/css-mediaqueries -这里还有更多:http://webdesignerwall.com/tutorials/css3-media-queries

希望这能给你一些启发!