Jump to content


Photo

How to reorder HTML elements?


  • Please log in to reply
2 replies to this topic

#1 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 29 March 2016 - 12:33 PM

Hello,

 

I would like to reorder a list of html elements. How can I do that? Is there a build in function in SMS? e.g. sorting a list.

 

I have all elements to reorder derived from TW3CustomControl.



#2 Laksekjønn

Laksekjønn
  • Members
  • 440 posts

Posted 29 March 2016 - 09:26 PM

Usually the data is coming from a webservice to list cities, for instance. The service should return an array of strings, before rendering we can sort an array alphabetically, and then reverse the order of the sorted items.

var 
  aStr : array of String;
  aStr := ['G','Ga','M','B','A','Ab','N','D','X','C'];
  aStr.Sort;

var populateList := function(arr : array of string): string
begin
    var str := '';
    for var i := 0 to arr.length-1 do
    begin
        str += '<li>' + arr[i] + '</li>';
    end;
    Result := str;
end;

var listEl := w3_createHtmlElement('ul');
    listEl.id := 'listSpelling';
    listEl.innerHTML := populateList(aStr);
    MainContainer1.Handle.appendChild(listEl);


#3 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 30 March 2016 - 09:06 AM

I have a custom control, where I can add elements to that list. And a new element should be put in the proper order of my list. That means, I have already DOM elements.

 

What I have done so far is maybe not quite perfect, but it works:

procedure TMyCustomListItems.Sort;
begin
  //sort the internal array, which holds the references of the DOM elements
  FItems.Sort(
    function(aLeft, aRight: TMyCustomListItem): Integer
    begin
      result := CompareInt(aLeft.ItemPos, aRight.ItemPos);
    end);

  //Reorder the DOM elements, based on the array order. 
  for var i:=FItems.Count - 2 downto 0 do
  begin
    //param1 .. new node
    //param2 .. reference node
    FItems[i].Handle.parentNode.insertBefore(FItems[i].Handle, FItems[i+1].Handle);
  end;
end;





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users