[Solved] Grid & TreeView display not normaly under Microsoft Web Browser

[ye]

Grid & TreeView display not normaly under QT Web Browser.

 

Grid: th header column mismatch with tr content column。Look the Attack file 1.

In IE8 display ok. Look attack file. The following is my grid  javascript code:

 

that.options.grid = $("#" + GRID_ID).kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: CONTEXT_PATH + "/api/log/all",
                dataType: "json",
                data: function(){

                    var paramJson = that.options.viewModel.toJSON();
                    paramJson["startTime"] = kendo.toString( that.options.viewModel.get( "startTime" ),  "yyyy-MM-dd HH:mm:ss");
                    paramJson["endTime"] = kendo.toString( that.options.viewModel.get( "endTime" ),  "yyyy-MM-dd HH:mm:ss");

                    return paramJson;
                },
                cache: false
            }
        },
        pageSize: 50,
        serverPaging: true,
        serverFiltering: true,
        schema: {
            data: function (d) { return d.data; },
            total: function (d) { return d.count; }
        }
    },
    height: gridHeight,
    pageable: true,
    detailTemplate: kendo.template($("#detailRowTemplate").html()),
    dataBound: onRowDataBound,
    selectable: "multiple",
    change: onChange,
    resizable: true,
    columns: [
        {
            field: "time",
            width: 150,
            title: "时间"
        },
        {
            field: "appName",
            width: 80,
            title: "应用"
        },
        {
            field: "moduleName",
            width: 80,
            title: "模块"
        },
        {
            field: "type",
            width: 80,
            title: "类型"
        },
        {
            field: "ip",
            width: 100,
            title: "IP地址"
        },
        {
            field: "level",
            width: 80,
            title: "级别",
            template: kendo.template($("#levelTemplate").html())
        },
        {
            field: "logger",
            width: 240,
            title: "日志类"
        },
        {
            field: "msg",
            width: 300,
            title: "内容"
        }
    ]
}).data("kendoGrid");

If the grid not use detailTemplate attribute , it displays ok under Microsoft Web Browser.

 

TreeView: 

1.  TreeItem text displays not hidden under vertical scrollbar. 

$("#unitTree").kendoTreeView({
    template: treeTemplate(),
    dataSource: this.createTreeDataSource(response),
    dataTextField: "text",
    select: function (e) {
        var dataItem = this.dataItem(e.node);
        if (dataItem.get("hasChildren")) {
            self.currentUnitCode = dataItem.get("id");
            self.loadStatisticData({unitCode: self.currentUnitCode});
        }
    },
    expand: function (e) {
        var dataItem = this.dataItem(e.node);
        if (dataItem.get("hasChildren")) {
            dataItem.set("imageUrl", "../avatar/maintenance/common/images/tree-image-expand.png");
            self.currentUnitCode = dataItem.get("id");
            self.loadStatisticData({"unitCode": self.currentUnitCode});
        }
    },
    collapse: function (e) {
        var dataItem = this.dataItem(e.node);
        dataItem.set("imageUrl", "../avatar/maintenance/common/images/tree-image-collapse.png");
    }
});
function treeTemplate() {
    return "#= item.text # [<span> #= item.defObj.deviTotalNum # | </span><span class='blue'> #= item.defObj.deviNormalNum #, </span>"
        + "<span class='yellow'> #= item.defObj.deviFaultNum #, </span><span class='red'> #= item.defObj.deviOffLineNum # </span> ]";
}

 

 

2.  TreeView displays overflow parent cantanier bottom line.

 

[Petyo]

Hello,

if I understand you correctly, you are experiencing rendering issues with this browser. Kendo UI does not support it - you may check the full list of the supported browsers here.

Regards,
Petyo
Telerik

 

 

[ye]

Sorry, Describe error, we don't use QTWebBrowser, is to use c + + inside with Microsoft Web Browser controls render of the page, and then apply colours to a drawing of the problems. In Fully Supported Browsers  Page, I  saw this paragraph:

Internet Explorer as an Embedded Browser in a Desktop ApplicationInternet Explorer behaves differently when being embedded inside a desktop (WinForms) application. It reports to support pointer events, but actually doesn't. As a result, some events, on which Kendo UI relies, are not fired. In order to avoid this problem, the following Javascript code must be executed before the Kendo UI scripts are registered:

window.MSPointerEvent = null;
window.PointerEvent = null;

 

It means kendoui support Internet Explorer as an Embedded Browser in c++ client ? 

 

[ye]

Describe error, we don't use QTWebBrowser, is to use c + + inside with Microsoft Web Browser controls render of the page, and then apply colours to a drawing of the problems. I saw this in the paragraph:

 

Internet Explorer as an Embedded Browser in a Desktop ApplicationInternet Explorer behaves differently when being embedded inside a desktop (WinForms) application. It reports to support pointer events, but actually doesn't. As a result, some events, on which Kendo UI relies, are not fired. In order to avoid this problem, the following Javascript code must be executed before the Kendo UI scripts are registered:

window.MSPointerEvent = null;
window.PointerEvent = null;

 

Does it means kendoui support Internet Explorer as an Embedded Browser in c++ client ?

[Petyo]

Hello,

Kendo UI should work as expected in the embedded IE browser. You need to apply the pointer event fixes. In addition to that, please make sure that the browser is not running in compatibility mode - this is a common issue and is also covered in the help article. 

Regards,
Petyo
Telerik

 

 

[ye]

Thanks, it works.