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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.