TIWCGJQCheckBoxList list Position

[George]

Hello!
How to use position feature in TIWCGJQCheckBoxList?

[Jorge Sousa]

Each cgdevtools component has these public properties

JQDragOptions: TIWCGJQDragOptions;
JQDropOptions: TIWCGJQDropOptions;
JQResizeOptions: TIWCGJQResizeOptions;
JQEffects: TIWCGJQEffects;
JQPositionOptions: TIWCGJQPositionOptions;

[George]

is TIWCGJQCheckBoxList.JQPositionOptions applies to pop up item list?
I'm trying to get same list position:

[Jorge Sousa]

Hi

No, the JQPositionOptions only apply to the main div container.

If you inspect the html of each item, you will see that all input tag ids starts with 'ui-multiselect-CGJQCHECKBOXLISTFRAME1-JQ-options-"

Code: Select all

<li class=" "><label class="ui-corner-all ui-state-hover" title="" for="ui-multiselect-CGJQCHECKBOXLISTFRAME1_JQ-option-2"><input type="checkbox" title="" value="opt3" name="multiselect_CGJQCHECKBOXLISTFRAME1_JQ" id="ui-multiselect-CGJQCHECKBOXLISTFRAME1_JQ-option-2"><span>Option 3</span></label></li>

to get all of these inputs at once, using jQuery you can use the selector

$("[id^=ui-multiselect-CGJQCHECKBOXLISTFRAME1_JQ-options-]")

so you can use this code in OnRender

var
js: string;
begin
js:= Format('$("[id^=ui-multiselect-%s-options-]").css("float","right");',[CheckBoxList.JQHTMLName]);
PageContext.AddToOnReady(js);
end;

CheckBoxList.JQHTMLName is in this case 'CGJQCHECKBOXLISTFRAME1_JQ'

so the js value will be

$("[id^=ui-multiselect-CGJQCHECKBOXLISTFRAME1_JQ-options-]").css("float","right")

I hope it helps

[George]

Hmm, i'm not sure that we talking about same thing...
There is not "ui-multiselect-CGJQCHECKBOX" string.

TIWCGJQCheckBoxList list panel (without any items) in html rendered as:
html code

<div class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all" style="z-index: 2000; width: 266px; top: 383.953125px; left: 1101.078125px; display: block;">
  <div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter">
    <div class="ui-multiselect-filter">Поиск:
      <input class="ui-widget ui-widget-content ui-corners-all" placeholder=" " type="search">
    </div>
    <ul class="ui-helper-reset">
      <li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>Выбрать все</span></a></li>
      <li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>Снять все</span></a></li>
      <li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>
    </ul>
  </div>
  <ul class="ui-multiselect-checkboxes ui-helper-reset" style="height: 200px;">
  </ul>
</div>

[George]

I'm talking about this property (that's theoretically should be located in JQCheckBoxListOptions):

[Jorge Sousa]

Hi

Hmm, i'm not sure that we talking about same thing...
There is not "ui-multiselect-CGJQCHECKBOX" string.

TIWCGJQCheckBoxList list panel in html rendered as:

Yes we're talkign about the same thing, and doesn't matter only the HTML that is rendered, but also the HTML that is created by thr plugin.

You should inspect the HTML to see what I'm talking about, not the source HTML.

For instance, for a jqgrid the only HTML that is rendered is

<table id="mytableid">

plus the pager div. Yet, jgrid plugin creates the its HTML .

[Jorge Sousa]

Hi again

I'm talking about this property (that's theoretically should be located in JQCheckBoxListOptions):

You're right, we must update the plugin soon

[George]

You should inspect the HTML to see what I'm talking about, not the source HTML.

If you mean, that i should look in html in browser, after page is loaded - then it's what i'm doing (google chrome dev tools).

You're right, we must update the plugin soon

Great news!

[Jorge Sousa]

Hi

If you mean, that i should look in html in browser, after page is loaded - then it's what i'm doing (google chrome dev tools).

Exactly, but you said, previously:

TIWCGJQCheckBoxList list panel in html rendered as:

all of this html is not rendered, if you take a look at the source HTML (rendered HTML) it's very different from the current HTML ( html in browser, after page is loaded)