Hello Good afternon
I have a Grid in my application recently I added this property in style
.k-grid {
font-size: 10px;
}
but when Grid has only One Row dosenĀ“t show me the text's row,
and if i removed .k-grid { font-size: 10px;} then Grid loaded correctly
can you tell me why happend that?
I have a Grid in my application recently I added this property in style
.k-grid {
font-size: 10px;
}
but when Grid has only One Row dosenĀ“t show me the text's row,
and if i removed .k-grid { font-size: 10px;} then Grid loaded correctly
can you tell me why happend that?
3 Answers, 1 is accepted
0
Hello Ramos,
I was unable to reproduce the described behavior on my side. The row is shown regardless of the font size. Please send me a sample project, where the issue is reproducing, so I could inspect it locally. Also please specify in which browser is this happening?
I am looking forward to hearing from you.
Regards,
Dimiter Madjarov
Telerik
I was unable to reproduce the described behavior on my side. The row is shown regardless of the font size. Please send me a sample project, where the issue is reproducing, so I could inspect it locally. Also please specify in which browser is this happening?
I am looking forward to hearing from you.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Ramos
Top achievements
Rank 1
answered on 28 Oct 2013, 03:56 PM
Hello thank very much for your answer ooohh yeah sorry I forgot it
I used IPAD2 with IOS7...
In browser's desktop show exactly
Thank you..
My Code View is :
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().MobileView()
.Name("Informacion")
.Layout("Informacion-Layout")
.Title("EvoluciĆ³n")
.Content(
@<text>
<div id="grid"></div>
<br />
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:red; width:300px">
Disponible 21%
</p>
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:gold; width:300px">
Disponible del 11 al 20%
</p>
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:green; width:300px">
Disponible del 0 al 10%
</p>
</text>
)
)
@(Html.Kendo().MobileLayout()
.Name("Informacion-Layout")
.Header(obj =>
Html.Kendo().MobileNavBar()
.Content(navbar =>
@<text>
@navbar.ViewTitle("")
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Left)
.Icon("reply")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("back"))
)
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Right)
.Icon("bookmarks")
.Text("Menu")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("parameter"))
)
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Right)
.Icon("contacts")
.Text("Salir")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("salir"))
)
</text>)
)
.Footer("MĆ³vil")
.FooterHtmlAttributes(new { style = "background-color:royalblue; color: white; font-size:20px; text-align: center" })
)
<script>
function parameter(e) {
var url = "@Url.Action("tipoReporte","Home")";
window.location.href = url;
}
function back(e) {
var url = "@Url.Action("Parametros", "Report")";
window.location.href = url;
}
function salir(e) {
var url = "@Url.Action("Splash", "Home")";
window.location.href = url;
}
function Getvalue(value) {
if (value < 0) {
return "<div style='background-color: red; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else {
if (value <= 10) {
return "<div style='background-color: green; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else if (value >= 21) {
return "<div style='background-color: red; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else {
return "<div style='background-color: gold; font-weight:bold'> " + value + '%' + "</div>";
}
}
}
//Se inicializa el grid
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{
field: "_cap",
width: 110,
title: "Capitulo"
},
{
field: "_original",
width: 105,
title: "Original ",
format: "{0:c}"
},
{
field: "_modificado",
width: 105,
title: "Modificado",
format: "{0:c}"
},
{
field: "_programado",
width: 105,
title: "Programado",
format: "{0:c}"
},
{
field: "_ejercido",
width: 105,
title: "Ejercido",
format: "{0:c}"
},
{
field: "_precomprometido",
width: 105,
title: "Precompromiso",
format: "{0:c}"
},
{
field: "_comprometido",
width: 105,
title: "Compromiso",
format: "{0:c}"
},
{
field: "_devengado",
width: 105,
title: "Devengado",
format: "{0:c}"
},
{
field: "_disponible",
width: 105,
title: "Disponible",
format: "{0:c}"
},
{
field: "_porcentaje",
width: 50,
title: "%",
template: '#=Getvalue(_porcentaje)#'
}
]
,dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i]._capitulo === "90000") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("customClass");
}
}
}
});
var grid = $("#grid").data("kendoGrid");
$.ajax({
url: "@Url.Action("Grid", "Report")",
type: 'POST',
dataType: 'json',
success: function (datis) {
//First Grid
grid.dataSource.data(datis);
}
});
</script>
<style>
.k-grid {
font-size: 10px;
}
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
</style>
<style>
.customClass
{
font-weight:bold;
}
</style>
I used IPAD2 with IOS7...
In browser's desktop show exactly
Thank you..
My Code View is :
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().MobileView()
.Name("Informacion")
.Layout("Informacion-Layout")
.Title("EvoluciĆ³n")
.Content(
@<text>
<div id="grid"></div>
<br />
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:red; width:300px">
Disponible 21%
</p>
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:gold; width:300px">
Disponible del 11 al 20%
</p>
<p style="color:black; font-family:arial, verdana, sans-serif; text-align:left; font-size:16px; background-color:green; width:300px">
Disponible del 0 al 10%
</p>
</text>
)
)
@(Html.Kendo().MobileLayout()
.Name("Informacion-Layout")
.Header(obj =>
Html.Kendo().MobileNavBar()
.Content(navbar =>
@<text>
@navbar.ViewTitle("")
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Left)
.Icon("reply")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("back"))
)
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Right)
.Icon("bookmarks")
.Text("Menu")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("parameter"))
)
@(Html.Kendo().MobileButton()
.Align(MobileButtonAlign.Right)
.Icon("contacts")
.Text("Salir")
.HtmlAttributes(new { @class = "nav-button" })
.Events(events => events.Click("salir"))
)
</text>)
)
.Footer("MĆ³vil")
.FooterHtmlAttributes(new { style = "background-color:royalblue; color: white; font-size:20px; text-align: center" })
)
<script>
function parameter(e) {
var url = "@Url.Action("tipoReporte","Home")";
window.location.href = url;
}
function back(e) {
var url = "@Url.Action("Parametros", "Report")";
window.location.href = url;
}
function salir(e) {
var url = "@Url.Action("Splash", "Home")";
window.location.href = url;
}
function Getvalue(value) {
if (value < 0) {
return "<div style='background-color: red; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else {
if (value <= 10) {
return "<div style='background-color: green; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else if (value >= 21) {
return "<div style='background-color: red; color:white; font-weight:bold'> " + value + '%' + "</div>";
}
else {
return "<div style='background-color: gold; font-weight:bold'> " + value + '%' + "</div>";
}
}
}
//Se inicializa el grid
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{
field: "_cap",
width: 110,
title: "Capitulo"
},
{
field: "_original",
width: 105,
title: "Original ",
format: "{0:c}"
},
{
field: "_modificado",
width: 105,
title: "Modificado",
format: "{0:c}"
},
{
field: "_programado",
width: 105,
title: "Programado",
format: "{0:c}"
},
{
field: "_ejercido",
width: 105,
title: "Ejercido",
format: "{0:c}"
},
{
field: "_precomprometido",
width: 105,
title: "Precompromiso",
format: "{0:c}"
},
{
field: "_comprometido",
width: 105,
title: "Compromiso",
format: "{0:c}"
},
{
field: "_devengado",
width: 105,
title: "Devengado",
format: "{0:c}"
},
{
field: "_disponible",
width: 105,
title: "Disponible",
format: "{0:c}"
},
{
field: "_porcentaje",
width: 50,
title: "%",
template: '#=Getvalue(_porcentaje)#'
}
]
,dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i]._capitulo === "90000") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("customClass");
}
}
}
});
var grid = $("#grid").data("kendoGrid");
$.ajax({
url: "@Url.Action("Grid", "Report")",
type: 'POST',
dataType: 'json',
success: function (datis) {
//First Grid
grid.dataSource.data(datis);
}
});
</script>
<style>
.k-grid {
font-size: 10px;
}
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
</style>
<style>
.customClass
{
font-weight:bold;
}
</style>
0
Hi Ramos,
Thank you for your cooperation and the additional details. The row is still displayed on our side, when we test on the same device. Nevertheless a possible reason, that we suspect to be the cause for the issue on your side, is that the widget is initialized on document ready. You could try to initialize the Grid in the init event of the Mobile View instead.
Please let us know of the result.
Regards,
Dimiter Madjarov
Telerik
Thank you for your cooperation and the additional details. The row is still displayed on our side, when we test on the same device. Nevertheless a possible reason, that we suspect to be the cause for the issue on your side, is that the widget is initialized on document ready. You could try to initialize the Grid in the init event of the Mobile View instead.
Please let us know of the result.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!