This is a migrated thread and some comments may be shown as answers.

Getting space between KendoGrid toolbar and header

4 Answers 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
prasanna
Top achievements
Rank 1
prasanna asked on 06 Jan 2013, 04:45 PM
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

4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 07 Jan 2013, 10:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
prasanna
Top achievements
Rank 1
answered on 08 Jan 2013, 12:08 AM
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"
            });
0
Iliana Dyankova
Telerik team
answered on 09 Jan 2013, 02:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 21 Jan 2013, 02:55 PM
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.
Tags
Grid
Asked by
prasanna
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
prasanna
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Share this question
or