Question

我正在使用带有Bootstrap的Kendo Grid。当我调整浏览器大小时，除了网格行之外，一切似乎都会响应。我已经完成了他们的每个演示，我无法弄清楚为什么行没有调整大小。有任何想法吗？谢谢。

<head runat="server">
    <meta charset="utf-8" />
    <title></title>
    <link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <%: Scripts.Render("~/bundles/modernizr") %>
    <script src="../../Scripts/TelerikJS/jquery.min.js"></script>
    <script src="../../Scripts/TelerikJS/kendo.all.min.js"></script>
    <script src="../../Scripts/TelerikJS/kendo.aspnetmvc.min.js"></script>
    <script src="../../Scripts/DemoCommon.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.ui.timepicker.js"></script>
    <script src="../../Scripts/apprise.js"></script>
    <script src="../../bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <link href="../../Content/apprise.css" rel="stylesheet" />
    <link href="../../Content/Site.css" rel="stylesheet" />
    <link href="../../bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />

    <link href="../../Content/kendo.custom.css" rel="stylesheet" />

    <link rel="stylesheet" href="../../Content/kendo/kendo.common.min.css" />
    <link rel="stylesheet" href="../../Content/kendo/kendo.bootstrap.min.css" />
</head>

<div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="chart-wrapper">
            <% Html.Kendo().Grid(Model.myToolList)
    .Name("MyToolsGrid")
    .Filterable()
                   //.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
    .Sortable()
    .Pageable(pager => pager.PageSizes(true))
    .ToolBar(toolbar =>
    {
        // Custom Command with Java Script
        toolbar.Custom().Text("Reset Grid").HtmlAttributes(new { id = "gridAllFilterReset" });
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Read(read => read.Action("IndexAdmin", "Demo"))
        .PageSize(20)
    )        
    .Columns(columns =>
    {
        columns.Bound(c => c).Template(m => "<a name=\"actionLink\" id=\"lnk" + m.company + m.gageSN + "\" class=\"clsEditLine\" href=\"javascript:ShowActions('" + m.company + "','" + m.gageSN + "','" + m.listPrice + "','" + m.labStatus6 + "','" + m.statusAbbrev + "','" + m.companyName + "','" + m.requestor + "')\">Action</a>").ClientTemplate("<a name=\"actionLink\" id=\"lnk<#=company#><#=gageSN#>\" class=\"clsEditLine\" href=\"javascript:ShowActions('<#= company #>','<#= gageSN #>','<#=listPrice #>','<#=labStatus6#>','<#=statusAbbrev#>','<#=companyName#>','<#=requestor#>')\">Action</a>").Title("").Sortable(false).Filterable(false).Visible(Model.page != "is" ? true : false);
        columns.Bound(c => c.status).Title("Status");
        columns.Bound(c => c.companyName).Title("Customer Name").Visible(Model.page == "mt" ? true : false);
        columns.Bound(c => c.model).Title("Model Number");
        columns.Bound(c => c.articleNumber).Title("Article Number").Visible(Model.page == "av" ? true : false);
        columns.Bound(c => c.orderNumber).Title("Order Number").Visible(Model.page == "mt" || Model.page == "wp" || Model.page == "es" || Model.page == "av" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.currentLocation).Title("Current Location").Visible(Model.page == "av" || Model.page == "" ? true : false);
        columns.Bound(c => c.listPrice).Title("List Price").Visible(Model.page == "av" ? true : false);
        columns.Bound(c => c.owner).Title("Owner").Visible(Model.page == "eu" || Model.page == "wp" || Model.page == "es" && (Model.page != "is" && Model.page != "av") ? true : false);
        columns.Bound(c => c.gageSN).Title("Serial Number").Visible(Model.page != "av" ? true : false);
        columns.Bound(c => c.companyName).Title("Customer").Visible(Model.page != "is" && Model.page != "av" && Model.page != "mt" ? true : false);
        columns.Bound(c => c.salesPerson).Title("Transfer To").Visible(Model.page == "tp" && (Model.page != "is" && Model.page != "av") ? true : false);
        columns.Bound(c => c.owner).Title("Transfer From").Visible(Model.page == "tp" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.CalDue).Title("Transfer Date").Format("{0:M/d/yyyy}").Visible(Model.page == "tp" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.lendingDate).Title("Lending Date").Format("{0:M/d/yyyy}").Visible(Model.page == "" ? true : false);
        columns.Bound(c => c.expectedReturnDate).Title("Exp Return Date").Format("{0:M/d/yyyy}").Visible(Model.page == "" || Model.page == "mt" || Model.page == "eu" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.lastServiced).Title("Last Service Date").Format("{0:M/d/yyyy}").Visible(Model.page == "mt" || Model.page == "eu" || Model.page == "wp" || Model.page == "es" || Model.page == "av" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.serviceDueDate).Title("Service Due Date").Format("{0:M/d/yyyy}").Visible(Model.page == "mt" || Model.page == "tp" || Model.page == "eu" || Model.page == "wp" || Model.page == "es" && (Model.page != "is") ? true : false);
        columns.Bound(c => c.CalDue).Title("Cal Due").Format("{0:M/d/yyyy}").Visible(Model.page != "is" ? true : false);
        columns.Bound(c => c.requestDate).Title("Receive Date").Format("{0:M/d/yyyy}").Visible(Model.page == "is" ? true : false);

    })

    //.Scrollable(scrolling => scrolling.Height(120))
    .ClientDetailTemplateId("client-template")
    .Render(); 
            %>
                </div>
        </div>
    </div>

<script>
   $(window).on("resize", function () {
       kendo.resize($(".chart-wrapper"));
   });
   </script>

Kendo Grid中的行未正确调整大小

0 个答案: