在Firefox浏览器上,Kendo网格呈现错误

时间:2014-12-22 07:34:39

标签: asp.net c#-4.0 kendo-ui kendo-grid

我使用的是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,标题和列不匹配。请参阅下面的图片。有人可以帮帮我吗?

这是第一次加载页面: enter image description here

当我改为第2页时,一切正常:

enter image description here

更新(自定义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">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Name:</i>
            </td>
            <td id="lbName">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Company:</i>
            </td>
            <td id="lbCompany">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Phone:</i>
            </td>
            <td id="lbPhone">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Country:</i>
            </td>
            <td id="lbCountry">
                &nbsp;
            </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">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Created On:</i>
            </td>
            <td id="lbCreatedOn">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="style2">
                <i>Inquiry Type:</i>
            </td>
            <td id="lbInquiryType">
                &nbsp;
            </td>
        </tr>
        <tr valign="top">
            <td class="style2">
                <i>Question:</i>
            </td>
            <td id="lbQuestion">
                &nbsp;
            </td>
        </tr>
    </table>
</div>

0 个答案:

没有答案