EasyUI Forum
March 29, 2024, 03:11:28 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [Solved] Dynamic Datalist  (Read 8801 times)
Darrel
Jr. Member
**
Posts: 74


View Profile
« on: February 19, 2017, 12:59:38 PM »

Hello team,

I have the following code in the reloado link:    http://code.reloado.com/osadug4/edit#html

Basically as seen in the reloado link, I have two datalists and an up and down button. One has checkboxes and the other is just a plain datalist. The data is visible in the second datalist only after the checkbox is checked in the first datalist.
The "Selectbox example" column section has just been added to demonstrate the up and down movement of a single option tag or multiple option tags in the multiple selectbox.

I've managed to add and remove the elements from the second datagrid after checking and unchecking respectively. However, I'm stuck and I have a few questions:

1) Is it possible to set the width as auto in both the datalists?
2) How can I cause the checkAll event of the first datalist to add all the checked items into the second datalist on load of the first datalist?
3) Is it possible to move selected element(s) of the second datalist up and down using the up and down buttons just like the multiple select box counterpart?
4) How can I update the checkedRows1 global variable accordingly to the up and down button clicked in the datalist 2 column??

Thanks and Regards,
Darrel
« Last Edit: February 20, 2017, 10:32:30 PM by Darrel » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: February 20, 2017, 02:09:07 AM »

Please refer to this updated example http://code.reloado.com/osadug4/2/edit#preview
Logged
Darrel
Jr. Member
**
Posts: 74


View Profile
« Reply #2 on: February 20, 2017, 05:06:11 AM »

Hello stworthy,

Firstly thank you for your fast response. The up/down movement of the datalist elements is working fine.

However I did see that when unchecking the checkbox in the first datalist, the second datalist isn't getting it's elements properly removed due to the fact that the index and row data are coming wrong from the first datalist.

For example on load of the page, the datalist has all the checkboxes checked causing the second datalist to have the same elements as well. But when I start unchecking the checkboxes in a sequential order, the unCheck logic fails, due to the index and row data that are incorrectly passed. I've added console debugs to try to solve the same but however, I wasn't able to figure out this weird behaviour. Sad

The reloado code for the same is:     http://code.reloado.com/osadug4/3/edit

I also have one more question, can the width of the datalist be set to auto depending on the width of the element it contains?

Please could you help me out with these. Smiley

Regards,
Darrel.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: February 20, 2017, 05:39:21 PM »

You should call 'appendRow' or 'insertRow' methods to insert new rows and call 'deleteRow' method to delete a row.
Code:
function onCheck(index,row)
{
var dl = $('#chosenList_0');
dl.datalist('appendRow', $.extend(true,{},row));
}

function onUncheck(index,row)
{
var dl = $('#chosenList_0');
var index = dl.datalist('getRowIndex', row.value);
dl.datalist('deleteRow', index);
}

Please look at this updated example http://code.reloado.com/osadug4/4/edit
Logged
Darrel
Jr. Member
**
Posts: 74


View Profile
« Reply #4 on: February 20, 2017, 10:32:12 PM »

Hello stworthy,

Thanks a lot for your help Smiley
It works well now.....

Regards,
Darrel.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!