在ASP.NET MVC中的Kendo网格CSS

Question

I have a two kendo grids in one view page that i want to display beside each other. To change one character of the css style of a kendo grid using asp.net i use

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

now i want to change more than one character, so i tried adding to the second grid this code but it is not working:

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

or

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

How can i solve this and how can i change the css of the kendo grid if there is an easier way maybe using javascript parts or something?

Thanks

Answer 1

Define a html table of one row two columns( 50 % each) then in the each cell define a div that would become the kendo grid.

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