Navigation at top

[Christian Sandöy]

How can I place the grids navigation at the top

[Viktor Tachev]

Hi Christian,

If you would like to display the Grid pager on the top of the component I would suggest using the approach described in the following how-to article. 

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-show-pager-top-bottom

Regards,
Viktor Tachev
Progress Telerik

[Christian Sandöy]

When I try the examples in the link the pager only fill the first column of the grid

see photo

[Christian Sandöy]

I use a table in the html to predefine the grid

if I change it to a div I get a JavaScript error
SCRIPT5007: Egenskaben 'kendoBindingTarget' kan ikke hentes for reference, der er udefineret eller null
kendo.all.js (10045,70)

[Viktor Tachev]

Hi Christian,

When the Grid component is initialize from a table it will be used to define the columns and the basic structure of the Grid. However, a div element will be created that will wrap the HTML table. This, in order to position the second pager above the Grid the selector that is used should be modified to reflect the different rendering.

For your convenience I have modified the previous sample so that the Grid is initialized from a table element. Check it out below:

• https://dojo.telerik.com/IFiqEQAY

Regards,
Viktor Tachev
Progress Telerik

[Christian Sandöy]

When I try the example in my project I get a runtime error

Unhandled exception at line 28, column 31489 in https://localhost:44334/lib/kendo-ui-core/js/kendo.all.min.js
0x800a138f - Der opstod en JavaScript-kørselsfejl: Egenskaben 'kendoBindingTarget' kan ikke hentes for reference, der er udefineret eller null occurred

kendo.all.js:

function notify(widget, namespace) {
var element = widget.element, bindingTarget = element[0].kendoBindingTarget;
if (bindingTarget) {
bind(element, bindingTarget.source, namespace);
}
}

[Christian Sandöy]

Can the problem be that I use MVC core
and use kendo ui for mvc core

I create the grid in javascript

[Viktor Tachev]

Hello Christian,

I tried the JavaScript from the example in our .NET Core demos and the pager was displayed as expected on my end. I also made a short video as illustration. Check it out below and let me know if I am missing something.

• https://www.screencast.com/t/o0XJ9Xdg

In case the behavior persists please send us a runnable sample where the issue is replicated so we can examine it.


Regards,
Viktor Tachev
Progress Telerik

[Christian Sandöy]

If I create a view which contain your example it works

but my example does not (runtime error)

see view file

[Viktor Tachev]

Hello Christian,

Thank you for the provided configuration. The Grid in the provided View has scrolling disabled. In that scenario the component will render different HTML and the additional pager should be inserted before the table element. The modified code is highlighted below:

var grid = $("#dgResultat").data("kendoGrid");
var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.closest("div.k-grid"));

grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));

I also created an example using the same configuration as the one you have:

• http://dojo.telerik.com/enAZIjoY/2

Regards,
Viktor Tachev
Progress Telerik

[Christian Sandöy]

Thanks

Now it is working