Page 1 of 1

Highlight selected item

PostPosted: 12 Jan 2016 14:27
by markus_ja
Hello,

the panellist looks pretty cool.
Is it possible to highlight an item, to show the user what item is currently selected? I would like to use it as drawer menu.

Re: Highlight selected item

PostPosted: 12 Jan 2016 15:30
by assapan
Hi,
you can use the ItemCss or the icon to emulate a selection

Re: Highlight selected item

PostPosted: 13 Jan 2016 09:01
by markus_ja
Hello,

is there a function to add / remove a css attribute?
The ItemCss contains already a css attribute ItemCss := 'panellist-nav-item-li', so I need some function to add / remove a particular string.
I know I can write my own function, but just woundering if you have already a published functionality for that purpose.

Thanks,

Re: Highlight selected item

PostPosted: 13 Jan 2016 09:12
by assapan
What i have done
Code: Select all
function SetStyleCGControl(ApplyStyle: Boolean; var css: String; Stylecss: string): Boolean;
var
  I: Integer;
  tempcss: string;
begin
  tempcss := css;
  I := Pos(Stylecss, tempcss);

  // in case Stylecss is already in css
  if (I > 0) and (ApplyStyle) then
  begin
    Result := False;
  end
  else
  begin
    if I > 0 then
      Delete(tempcss, I, Length(StyleCss));

    if ApplyStyle then
      tempcss := tempcss + ' ' + Stylecss;
    css := tempcss;
    Result:=True;
  end;
end;


plus a panel list helper
Code: Select all
{ TJqPanelListHelper }

procedure TJqPanelListHelper.SetSelection(Item: TIWCGPanelListItem; Selected: Boolean);
begin
  if SelectIt(Item, Selected) then
    Self.AjaxReRender;
end;

function TJqPanelListHelper.SelectIt(it: TIWCGPanelListItem; Selected: Boolean): Boolean;
var
  TempCss: string;
begin
  result := False;
  if Assigned(it) then
  begin
    TempCss := it.ItemCss;
    if SetStyleCGControl(Selected, TempCss, 'ui-state-highlight') then
    begin
      it.ItemCss := TempCss;
      result := True;
    end;
  end;
end;

Re: Highlight selected item

PostPosted: 13 Jan 2016 16:15
by Jorge Sousa
Thanks assapan :=)

setting ItemCss to 'ui-state-highlight' would be good option, but that's only an example.

Re: Highlight selected item

PostPosted: 13 Jan 2016 16:19
by assapan
hi Jorge , these procedures set or unset 'ui-state-highlight' which is important when changing selected item ;)

Re: Highlight selected item

PostPosted: 13 Jan 2016 16:29
by Jorge Sousa
Hello Assapan

You don't need the AjaxReRender part, because you're only changing ItemCss which is already ajax ready.

Re: Highlight selected item

PostPosted: 13 Jan 2016 16:41
by assapan
Jorge Sousa wrote:Hello Assapan

You don't need the AjaxReRender part, because you're only changing ItemCss which is already ajax ready.


Oh thanks i didn't notice that :oops:

Re: Highlight selected item

PostPosted: 14 Jan 2016 10:36
by Jorge Sousa
Hello

AjaxReRender is a good thing, but must be called when the ajax response is not being handled or is handled but the plugin doesn't respond (it's the case of some property value changes, like changing the width columns of the grid).

AjaxReRender, adds or replaces (if the component(s) is (are) already there in the page), all the html, script and css needed, it always take more traffic and time, depending on the complexity of the control, or number of controls envolved.