This is a migrated thread and some comments may be shown as answers.
Navigation at top
10 Answers 17 Views
This is a migrated thread and some comments may be shown as answers.
Christian Sandöy
Top achievements
Rank 2
Christian Sandöy asked on 11 Oct 2018, 08:38 AM
How can I place the grids navigation at the top

10 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 11 Oct 2018, 12:57 PM
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. 




Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Christian Sandöy
Top achievements
Rank 2
answered on 11 Oct 2018, 01:30 PM

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

see photo

0
Christian Sandöy
Top achievements
Rank 2
answered on 11 Oct 2018, 01:47 PM

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)

0
Viktor Tachev
Telerik team
answered on 12 Oct 2018, 11:52 AM
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:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Christian Sandöy
Top achievements
Rank 2
answered on 15 Oct 2018, 10:10 AM

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);
}
}

0
Christian Sandöy
Top achievements
Rank 2
answered on 15 Oct 2018, 11:21 AM

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

I create the grid in javascript

0
Viktor Tachev
Telerik team
answered on 16 Oct 2018, 12:23 PM
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.


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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Christian Sandöy
Top achievements
Rank 2
answered on 18 Oct 2018, 09:39 AM

If I create a view which contain your example it works

but my example does not (runtime error)

see view file

0
Viktor Tachev
Telerik team
answered on 19 Oct 2018, 10:49 AM
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:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Christian Sandöy
Top achievements
Rank 2
answered on 19 Oct 2018, 11:59 AM

Thanks

Now it is working

Tags
Grid
Asked by
Christian Sandöy
Top achievements
Rank 2
Answers by
Viktor Tachev
Telerik team
Christian Sandöy
Top achievements
Rank 2
Share this question
or