Kendo 网格 css 在 asp.net mvc

Question

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

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

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

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

或

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

我该如何解决这个问题，如果有更简单的方法可能使用 javascript 零件或其他东西，我该如何更改 kendo 网格的 css？

谢谢

Answer 1

定义一行两列的 html table（每列 50%），然后在每个单元格中定义一个 div，它将成为 kendo 网格。

<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>

Kendo 网格 css 在 asp.net mvc

Kendo grid css in asp.net mvc

css

asp.net

asp.net-mvc

kendo-ui

kendo-grid