Many columns in DataList

[shumakosik]

Hi! I need display data in two or three columns. I use dataList component. How I make it?

Code:

$('#dataList').datalist({
                      url: '/rest/cb/getParameters',
                      checkbox: true,
                      lines: true,
                      selectOnCheck: false,
                      height: 300
                    });

[stworthy]

To display more than one column in datalist, you should custom the 'columns' property.

Code:

$('#dataList').datalist({
	url: '/rest/cb/getParameters',
	checkbox: true,
	lines: true,
	selectOnCheck: false,
	height: 300,
	columns:[[
		{field:'text',width:'50%'},
		{field:'group',width:'50%'}
	]]
});

[shumakosik]

My structure json file:

Code:

[
	{"text":"01. Qж авт."},
	{"text":"02. Qж ручн."},
	{"text":"03. Qн авт."},
	{"text":"04. Qн ручн."},
	{"text":"05. Обв.% об. авт.."},
	{"text":"06. Обв.% об. ручн."},
	{"text":"07. Dшт"},
	{"text":"08. Pбуф"},
	{"text":"09. Pлин"},
	{"text":"10. Hдин"},
	{"text":"11. Pпл ВНК (ТМС)"},
	{"text":"12. Pпл ВДП (Hстат.)"},
	{"text":"13. Pпл ВДП (манометр)"},
	{"text":"14. Pпл ВДП (ручн.)"},
	{"text":"15. Pпл ВНК (Hстат.)"},
	{"text":"16. Pпл ВНК (манометр)"},
	{"text":"17. Pпл ВНК (ручн.)"},
	{"text":"18. Pзаб ВНК (ТМС)"},
	{"text":"19. Рзаб ВДП (ручн.)"},
	{"text":"20. Рзаб ВДП (Ман.)"},
]

I need displays this data in two columns in datalist. Is it possible?

[shumakosik]

I try this:

Code:

[
	{"text2":"01. Qж авт."},
	{"text":"02. Qж ручн."},
	{"text2":"03. Qн авт."},
	{"text":"04. Qн ручн."},
	{"text2":"05. Обв.% об. авт.."},
	{"text":"06. Обв.% об. ручн."},
	{"text2":"07. Dшт"},
	{"text":"08. Pбуф"},
	{"text2":"09. Pлин"},
	{"text":"10. Hдин"},
	{"text2":"11. Pпл ВНК (ТМС)"},
	{"text":"12. Pпл ВДП (Hстат.)"},
	{"text2":"13. Pпл ВДП (манометр)"},
	{"text":"14. Pпл ВДП (ручн.)"},
	{"text2":"15. Pпл ВНК (Hстат.)"},
	{"text":"16. Pпл ВНК (манометр)"},
	{"text2":"17. Pпл ВНК (ручн.)"},
	{"text":"18. Pзаб ВНК (ТМС)"},
	{"text2":"19. Рзаб ВДП (ручн.)"},
	{"text":"20. Рзаб ВДП (Ман.)"},
]

Code:

$('#dataList').datalist({
                      url: '/rest/cb/getParameters',
                      checkbox: true,
                      lines: true,
                      selectOnCheck: false,
                      height: 300,
                      columns:[[
                        {field:'text',width:'50%'},
                        {field:'text2',width:'50%'}
                      ]]
                    });

But isn't that i need...

[stworthy]

Before loading the data into datalist, you can split the original rows into multiple parts and then construct the new rows.

Code:

$('#dataList').datalist({
	data: data,
	checkbox: true,
	lines: true,
	selectOnCheck: false,
	height: 300,
	columns:[[
		{field:'text',width:'50%'},
		{field:'text2',width:'50%'}
	]],
	loadFilter: function(data){
		var total = Math.ceil(data.length/2);
		var rows = data.splice(0, total);
		for(var i=0; i<rows.length && i<data.length; i++){
			rows[i]['text2'] = data[i]['text'];
		}
		return {
			total: total,
			rows: rows
		};
	}
});

[shumakosik]

Hi, stworthy. Thanks for help. I try your code, but it's not exactly that I need
I want to split datalist into two columns with checkboxes too.
1 attached file - result of your code
2 attached file - that I need

[stworthy]

You can only have one checkbox in one row, but you can split the rows into two parts and display them in two separate datalist components.

Code:

<div style="width:200px;float:left">
	<div id="dataList1" style="width:100%"></div>
</div>
<div style="width:200px;float:left">
	<div id="dataList2" style="width:100%"></div>
</div>

[shumakosik]

OK. Thanks