Getting space between KendoGrid toolbar and header

[prasanna]

Team,

I want to create kendogrid with popup editing.

I was able to generate grid and when added toolbar: ["Create"] , I am getting huge gap between toolbar and header.

Am I missing something.

Help me in this regard.

Prasanna

[Iliana Dyankova]

Hi Prasanna,

I am not quite sure what causes the described issue. Could you please send a jsFiddle / jsBin example which demonstrates your current implementation? This way I would be able to investigate what exactly is going on and provide concrete recommendations.

On a side note, the commands in the grid's toolbar should be written with lower case. For a working example please check this inline demo. 

Regards,
Iliana Nikolova
the Telerik team

[prasanna]

Hi Iliana,

Thanks a lot for your response. Please find the code I am using to get the grid .It is working fine Grid is generated, but I am getting space between header and toolbar. Find the attached doc for your reference.
<link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet"/>
<link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet"/>
<script src="../../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../../../Scripts/kendo/2012.3.1114/kendo.numerictextbox.min.js" type="text/javascript"></script>
<script src="../../../Scripts/kendo/2012.3.1114/kendo.web.min.js" type="text/javascript"></script>
 $(document).ready(function () {
            var ProductID = $("#txtProductID").val();
            $("#ProductOptionsGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "/Product/GetProductOptions",
                            dataType: "json",
                            type: "POST"
                            
                        },
                        update: {
                            url: "/Products/ProductOptionAddOrUpdate",
                            dataType: "jsonp"

                        },
                        destroy: {
                            url: "/Products/Destroy"
                        },
                        create: {
                            url: "/Product/GetProductOptionByID"

                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    //batch: true,
                    pageSize: 10,
                    schema: {
                        data: "data",
                        model: {
                            id: "ProductOptionID",
                            fields: {
                                ProductOptionID: { editable: false, nullable: true },
                                Title: { validation: { required: true} },
                                SupplierProductOptionID: { type: "number", validation: { required: true, min: 1} },
                                DaysInAdvance: { type: "number", validation: { required: true, min: 1} },
                                Duration: { validation: { required: true} },
                                MinAdultPax: { type: "number", validation: { required: true, min: 1} },
                                MaxAdultPax: { type: "number", validation: { required: true, min: 1} }
                            }
                        }
                    }
                },
                pageable: true,
                toolbar: ["create"],
                columns: [
                            { field: "ProductOptionID", title: "ProductOptionID" },
                            { field: "Title", title: "Title" },
                            { field: "SupplierProductOptionID", title: "SupplierProductOptionID" },
                            { field: "DaysInAdvance", title: "DaysInAdvance" },
                            { field: "Duration", title: "Duration" },
                            { field: "MinAdultPax", title: "MinAdultPax" },
                            { field: "MaxAdultPax", title: "MaxAdultPax" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "210px"}],
                editable: "popup"
            });

[Iliana Dyankova]

Hi Prasanna,

I am not quite sure what causes the illustrated problem. Could you please specify the IE version that you use? Does the problem persist only in IE? Also are there any additional styles that are applied on the current page? 

Regards,
Iliana Nikolova
the Telerik team

[Nick]

I had a similar problem that ended up being caused by the wrapper div having markup as such:
<div id="membergrid">&nbsp;</div>

When I removed the &nbsp; from the div, everything rendered correctly.