css - asp.net mvc 中的剑道网格 css

Question

我在一个 View 页面中有两个剑道网格，我想将它们并排显示。要使用 asp.net 更改剑道网格的 css 样式的一个字符，我使用

       .HtmlAttributes(new { style="width:50%"})

现在我想更改多个字符，所以我尝试将这段代码添加到第二个网格，但它不起作用:

.HtmlAttributes(new { style="width:50% , float:right"})

或

    .HtmlAttributes(new { style="width:50%"+ "float :right"})

如果有更简单的方法(可能是使用 javascript 部件或其他东西)，我该如何解决这个问题以及如何更改剑道网格的 css？

谢谢

Answer 1

定义一个包含一行两列(每列 50%)的 html 表格，然后在每个单元格中定义一个将成为剑道网格的 div。

<div class="T0" id="L0">

<table class="tg">
 <tr>
  <th class="tg-031e">

      @(Html.Kendo().Grid<dynamic>()
.Name("GonfigGrid")
.Columns(columns =>
{
    foreach (System.Data.DataColumn c in Model.GridConfig.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");
    }
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridConfig.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("ConfigGeneric", "Configuration")
    )
))
</th>
<th class="tg-031e">


  @(Html.Kendo().Grid<dynamic>()
  .Name("StatusGrid")
  //.HtmlAttributes(new { style="width:50%;" })
    .Columns(columns =>
  {
    foreach (System.Data.DataColumn c in Model.GridStatus.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");
    }
  })
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridStatus.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("StatusGeneric", "Configuration")
    )
))
  </th>
   </tr>
  </table>


 </div>


<style>

  .tg  {border-collapse:collapse;
      border-spacing:0;
      width:100%;padding:0px;
      border-left:none;}
    .tg td{font-family:Arial, 
           sans-serif;font-size:14px;
                      padding:5px 5px 5px 0px;
                      overflow:hidden;
                      vertical-align:top;}
    .tg th{font-family:Arial, 
           sans-serif;
       font-size:14px;
       font-weight:normal;
       padding:5px 0px 5px 5px;
       overflow:hidden;
       vertical-align:top;}

 </style>