我使用的是Kendo UI Web v2013.3.1119。
我的firefox浏览器版本34.0.5。
Jquery 1.9.0
我的代码kendo grid:
<script type="text/javascript">
$(document).ready(function () {
var currentPage = 1;
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (options) {
$.ajax({
type: "POST",
url: "Providers/WebMethods/PartnerInquiryMethod.aspx/GetListPartnerInquiry",
data: "{'curPage':'" + currentPage + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
options.success($.parseJSON(msg.d));
var res = $.parseJSON(msg.d);
GetDetailInquiry(res[0].Id);
}
});
}
},
batch: true,
pageSize: 5,
serverPaging: true,
schema: {
total: function (data) {
return data[0].TotalCount;
},
model: {
fields: {
Id: { type: "int" },
Name: { type: "string" },
Email: { type: "string" },
Phone: { type: "string" },
Company: { type: "string" },
CreatedOn: { type: "date" }
}
}
}
},
pageable: {
refresh: true,
buttonCount: 5,
change: function (e) {
var res = $('#grid').data('kendoGrid').dataSource;
e.preventDefault();
currentPage = res.page();
res.read();
}
},
height: 280,
autoBind: false,
selectable: true,
sortable: true,
columns: [
{ field: "Id", title: "Id" },
{ field: "Name", title: "Name" },
{ field: "Email", title: "Email" },
{ field: "Phone", title: "Phone" },
{ field: "Company", title: "Company" },
{ field: "CreatedOn", title: "CreatedOn", format: "{0:MM-dd-yyyy}"}
]
});
var grid = $('#grid').data('kendoGrid');
grid.dataSource.read();
grid.hideColumn("Id");
});
$("#grid").click(function () {
SetDetail();
});
function SetDetail() {
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
GetDetailInquiry(selectedItem.Id);
}
function GetDetailInquiry(id) {
var detail = $.ajax({
type: "POST",
url: "Providers/WebMethods/PartnerInquiryMethod.aspx/GetDetailInquiry",
data: "{'id':'" + id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);
//Bind for IE and Chrome browser
//Bind Customer Infomation
document.getElementById("lbEmail").innerText = json.Email;
document.getElementById("lbName").innerText = json.Name;
document.getElementById("lbCompany").innerText = json.Company;
document.getElementById("lbPhone").innerText = json.Phone;
document.getElementById("lbCountry").innerText = json.Country;
//Bind Question Infomation
document.getElementById("lbTitle").innerText = json.Title;
document.getElementById("lbCreatedOn").innerText = json.CreatedOn;
document.getElementById("lbInquiryType").innerText = json.InquiryType;
document.getElementById("lbQuestion").innerText = json.Question;
//Bind for firefox
//Bind Customer Infomation
document.getElementById("lbEmail").textContent = json.Email;
document.getElementById("lbName").textContent = json.Name;
document.getElementById("lbCompany").textContent = json.Company;
document.getElementById("lbPhone").textContent = json.Phone;
document.getElementById("lbCountry").textContent = json.Country;
//Bind Question Infomation
document.getElementById("lbTitle").textContent = json.Title;
document.getElementById("lbCreatedOn").textContent = json.CreatedOn;
document.getElementById("lbInquiryType").textContent = json.InquiryType;
document.getElementById("lbQuestion").textContent = json.Question;
}
});
};
它在其他浏览器上运行良好,但在firefox,标题和列不匹配。请参阅下面的图片。有人可以帮帮我吗?
这是第一次加载页面:
当我改为第2页时,一切正常:
更新(自定义css)
<style type="text/css">
.k-grid
{
font-size: 13px;
}
.k-grid td
{
line-height: 2em;
}
.style1
{
width: 100%;
clear:both;
float:left;
padding-bottom:10px;
}
.style2
{
width: 88px;
}
hr
{
border-color: #84BF42;
border-width: 0.5;
}
#ContentInquiry
{
font-size: 13px;
}
#container
{
margin-left: 10px;
margin-right:15px;
}
.title
{
border-bottom-color:#84BF42;
border-bottom-style:solid;
border-bottom-width:thin;
padding-top:10px;
}
我的容器html:
<div id="container">
<h3>
Partner Inquiries</h3>
<div id="grid">
</div>
<div id="ContentInquiry">
<h4 class="title">
Customer Infomation</h4>
<table align="left" cellspacing="1" class="style1">
<tr>
<td class="style2">
<i>Email:</i>
</td>
<td id="lbEmail">
</td>
</tr>
<tr>
<td class="style2">
<i>Name:</i>
</td>
<td id="lbName">
</td>
</tr>
<tr>
<td class="style2">
<i>Company:</i>
</td>
<td id="lbCompany">
</td>
</tr>
<tr>
<td class="style2">
<i>Phone:</i>
</td>
<td id="lbPhone">
</td>
</tr>
<tr>
<td class="style2">
<i>Country:</i>
</td>
<td id="lbCountry">
</td>
</tr>
</table>
<h4 class="title">
Question Infomation</h4>
<table align="left" cellspacing="1" class="style1">
<tr>
<td class="style2">
<i>Title:</i>
</td>
<td id="lbTitle">
</td>
</tr>
<tr>
<td class="style2">
<i>Created On:</i>
</td>
<td id="lbCreatedOn">
</td>
</tr>
<tr>
<td class="style2">
<i>Inquiry Type:</i>
</td>
<td id="lbInquiryType">
</td>
</tr>
<tr valign="top">
<td class="style2">
<i>Question:</i>
</td>
<td id="lbQuestion">
</td>
</tr>
</table>
</div>