pageable customization

[SerdarParticipant]

Hello, I am using the pageable feature, but I made it special for myself. My problem is that I want to hide the standard pageable section that appears on the modal-footer, is this possible? thank you
https://ibb.co/PDf8ZqX

aslında ilk olarak bunu denedim yine istediğim şekilde oldu ancak butonlar modal-footer üstünde bir satır olarak gözüküyor oysa ben modal-footer içinde çıkmasını istiyorum

    var pagerrenderer = function () {

        var element = $("<div class='ankaToolbar' style='width: 440px; height: auto;'></div>");

        var leftButton = $("<div class='pageElement gridBtn' style='padding: 1px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('fa fa-chevron-left icon-white');
        leftButton.width(36);
        leftButton.jqxButton();

        var rightButton = $("<div class='pageElement gridBtn' style='padding: 1px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('fa fa-chevron-right icon-white');
        rightButton.width(36);
        rightButton.jqxButton();

        var saveButton = $("<div class='pageElement' data-tooltipActive='" + HelpTitle + "'  data-tooltip='Kaydet' style='height: 32px!important;padding: 0px; float: left;'><div style='font-size:25px;position:relative;top:3px;'></div></div>");
        saveButton.find('div').addClass('fa fa-save icon-white');
        saveButton.width(36);
        saveButton.jqxButton();

        var resetButton = $("<div data-cleargrid='grid' style='padding: 1px; margin: 0px 3px; float: left;'><div style='font-size:22px;position:relative;top:3px;'></div></div>");
        resetButton.find('div').addClass('fa fa-refresh icon-white');
        resetButton.width(36);
        resetButton.jqxButton();
  
        var label = $("<div style='font-size: 11px; bold; float: left;'></div>");
        label.appendTo(element);
        rightButton.click(function () {
            $("#grid").jqxGrid('gotonextpage');
            var datainfo = $("#grid").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#grid.pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#grid.pageCount").show();
        });

        leftButton.click(function () {
            $("#grid").jqxGrid('gotonextpage');
            var datainfo = $("#grid").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#grid.pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#grid .pageCount").show();
        });

        return element;
    }

    $("#grid").jqxGrid(
        {
            source: adapter,
            height: '740px',
            width: "100%", 
            pagerrenderer: pagerrenderer,

https://ibb.co/NtZ8Fwc

[SerdarParticipant]

I actually tried this first and it worked the way I wanted, but the buttons appear in row at the top, whereas I want them to appear in the footer.

 var pagerrenderer = function () {

        var element = $("<div class='ankaToolbar' style='width: 440px; height: auto;'></div>");

        var leftButton = $("<div class='pageElement gridBtn' style='padding: 1px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('fa fa-chevron-left icon-white');
        leftButton.width(36);
        leftButton.jqxButton();

        var rightButton = $("<div class='pageElement gridBtn' style='padding: 1px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('fa fa-chevron-right icon-white');
        rightButton.width(36);
        rightButton.jqxButton();

        var saveButton = $("<div class='pageElement' data-tooltipActive='" + HelpTitle + "'  data-tooltip='Kaydet' style='height: 32px!important;padding: 0px; float: left;'><div style='font-size:25px;position:relative;top:3px;'></div></div>");
        saveButton.find('div').addClass('fa fa-save icon-white');
        saveButton.width(36);
        saveButton.jqxButton();

        var resetButton = $("<div data-cleargrid='grid' style='padding: 1px; margin: 0px 3px; float: left;'><div style='font-size:22px;position:relative;top:3px;'></div></div>");
        resetButton.find('div').addClass('fa fa-refresh icon-white');
        resetButton.width(36);
        resetButton.jqxButton();
  
        var label = $("<div style='font-size: 11px; bold; float: left;'></div>");
        label.appendTo(element);
        rightButton.click(function () {
            $("#grid").jqxGrid('gotonextpage');
            var datainfo = $("#grid").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#grid.pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#grid.pageCount").show();
        });

        leftButton.click(function () {
            $("#grid").jqxGrid('gotonextpage');
            var datainfo = $("#grid").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#grid.pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#grid .pageCount").show();
        });

        return element;
    }

 $("#grid").jqxGrid(
        {
            source: adapter,
            height: '740px',
            width: "100%", 
            pagerrenderer: pagerrenderer,

https://ibb.co/NtZ8Fwc

[adminKeymaster]

Hi Serdar,

The pagerrenderer customizes our page i.e it overrides the default UI. The paging element is part of the Grid’s HTML Structure. As far as i understand, you need this placed in the modal footer, but actually it is only possible to do the opposite – render the modal’s buttons in the custom pager you’re building and hide these shown in the image.

Best regards,
Peter Stoev

jQWidgets TEam
https://www.jqwidgets.com/

[Author]

Posts