[DaveC426913Member]

Yeah. I’ve come to realize that. Thanks.

It’s essentially aesthetic progressive enhancement.

[DaveC426913Member]

Yes. Unfortunately, I don’t have an example of a pagerrenderer to start from. Ideally, I’d like to find an example that build it exactly as it is by default, then I can modify as I see fit. I think starting from scratch (or from the above, highly simplistic example) will be very difficult.

[DaveC426913Member]

I am still needing an answer to this. Can’t figure out how to configure it via widget API or modify this manually via jquery.

[DaveC426913Member]

To be clear, there is an example pagerrenderer template here:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/paging.htm

            var pagerrenderer = function () {
                var element = $("<div style='margin-top: 5px; width: 100%; height: 100%;'></div>");
                var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                for (i = 0; i < paginginfo.pagescount; i++) {
                    var anchor = $("<a style='padding: 5px;' href='#" + i + "'>" + i + "</a>");
                    anchor.appendTo(element);
                    anchor.click(function (event) {
                        var pagenum = parseInt($(event.target).text());
                        $("#jqxgrid").jqxGrid('gotopage', pagenum);
                    });
                }
            
                return element;
            }

but it is too simple. Mine is identical to the default except for the one exchange I want. So I’m looking for the default template.

[DaveC426913Member]

Thanks but I had already been through the example.

S’OK, vanilla jquery does the trick: el.slideDown(400).delay(2000).slideUp(200);

[DaveC426913Member]

And finally, I want the window to pause for a second and then animate closed again. I’m looking for an event that shows the window is fully open, so I an tell it to close again. None of the events listed (open, expand, resized…?) seem to fire.

[DaveC426913Member]

My method for getting the window to appear at the top center kind of sucks, but I see no alternative.

I set position: ‘top’ then overrode the ‘left’ in CSS, like this:

margin-left:        10%!important;
margin-right:       10%!important;
width:              80%!important;
max-width:          80%!important;
min-width:          80%!important;

Nothing less will do.

[DaveC426913Member]

OK, I have tested your code example. I put it in an HTML file exactly as you supplied it, re-pointing the file references as necessary.

It does not animate. It simply pops open the window instantly. No errors.

I tried showAnimationDuration: 10000 but no luck.

[DaveC426913Member]

Ok, I’ll try the animation, thanks. As for height, I was really hoping to not have to explicitly fix a height, as its height would ideally be set by the length of the content. But if I must, I must.

But how can I set the window for top center? I can set it for ‘top left’ and I can set it for ‘center’ but I can’t find a combination for ‘top center’.

[DaveC426913Member]

Thanks. These demos frustrate me.

[DaveC426913Member]

Well, I guess, but it seems to me then that the rowsheight property is sort of wanting if it can’t be used without having to invoke the cellsrenderer.

I can’t think of any realistic scenario where someone would want to modify the rowheight without wanting the content within the row to have uniform margins (unless they wanted tall fixed-height rows with all their content aligned to top).

Thanks.

[DaveC426913Member]

Thanks but setting its height to 100% causes it to flow right outside its container and off the page.

[DaveC426913Member]

Ah! I see now. The height property itself can be manipulated on-the-fly.

So, whenever I need to set (or reset) the table in its container, I can do this:

function maximize_content() {

var navSearchHeight = $(‘#navigate form’).outerHeight(true)// get
var navFooterTop = $(‘#navigate .p-foot’).position().top;// get
$(‘#navigate .section.results’).height(navFooterTop – navSearchHeight);
}

where #navigate form is the element immediately above the grid and #navigate .p-foot is the element immediately below it.

[DaveC426913Member]

Thanks! That was a little more thorough than I was expecting!

So, the way you’re avoiding recursion is with that handleCheckChange flag? That way changing the state of a checkbox doesn’t start a cascade of changes. I see.

I’m making a few changes.

An easy one: Better to test a fixed value rather than a slippery label:

    var source = new Array(
        {status:'Select All / None', <span style="color: red;">value:-1</span>},
        {status:'Created',   value:0},
        ... etc.
    );

…then…

function handleWidgetComboStatus(e){
    console.log(e);
    if (!handleCheckChange)
    return;
    if (<span style="color: red;">e.args.value >= 0</span>) {

(Sorry, haven’t figured out how to style text within a code block. I was just trying to highlight the important changes in red.)

Not so easy:
The label ‘Check All/None’ should never appear in the display. You would see either ‘All’, or ‘None’, and it would never be combined with other values.

I’ll work on it and let you know if I get stumped.

[DaveC426913Member]

OK. So there’s two elements, but one is invisible. Targeting ‘.jqx-slider-slider’ works, thus:

    $('.jqx-slider-slider').html(e.args.value);

Thanks. jquery and jqWidgets are easier than I was expecting.

[Author]

Posts