Navigation at top

11 posts, 0 answers
  1. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 11 Oct 2018 Link to this post

    How can I place the grids navigation at the top
  2.
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 11 Oct 2018 Link to this post

    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.
  5. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 11 Oct 2018 in reply to Viktor Tachev Link to this post

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

    see photo

  7. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 11 Oct 2018 Link to this post

    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)

  8.
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 12 Oct 2018 Link to this post

    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.
  11. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 15 Oct 2018 in reply to Viktor Tachev Link to this post

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

  13. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 15 Oct 2018 Link to this post

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

    I create the grid in javascript

  14.
  15. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 16 Oct 2018 Link to this post

    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.
  17. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 18 Oct 2018 in reply to Viktor Tachev Link to this post

    If I create a view which contain your example it works

    but my example does not (runtime error)

    see view file

  19. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 19 Oct 2018 Link to this post

    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.
  20.
  21. Christian Sandöy
    Christian Sandöy avatar
    58 posts
    Member since:
    Aug 2005

    Posted 19 Oct 2018 in reply to Viktor Tachev Link to this post

    Thanks

    Now it is working

Back to Top