I have a problem in my multiselect for the code below. While adding new row when I select all items in the list of ‘resources’ column (this field is multiselect with checkbox) and save the row, all data of the row saves correctly to the database. But when the same row is retrieved for editing I see all the items of resources selected except the first one. In the above code I am using bootstrap multiselect plugin. But same is the behaviour when I use eric hynds multiselect plugin. This problem appears to be only with the first item in the list.
<html>
<head>
<title>Maintenance Daily Log</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel='stylesheet' href='css/jquery-ui.css'/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 70%;
}
table, th, td {
font-size: 100%;
}
#editmodlist {
font-size: 70%;
}
div#editmodlist {
width: 1000px;
font-size: 130%;
}
.ui-jqgrid {font-size:0.5em;}
div .mce-tinymce {
margin-left: 5px
}
div .mce-btn button, div .mce-menu-item-normal {
font-size: 80%;
}
ul .ui-multiselect-checkboxes {
font-size: 130%;
}
#ui-datepicker-div {
font-size:120%;
}
div .ui-multiselect-header {
font-size: 100%;
}
.ui-multiselect-menu {
font-size: 150%;
width: 100%
}
button .ui-multiselect {
width: 100%;
}
</style>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery-ui.min.js'></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'server.php',
datatype: "json",
mtype: "POST",
colNames: ["SL","Date", "Shift", "Equipment","Resources-1", "Resources", "Works done", "Spares used", "Status"],
colModel: [
{name:'id',index:'id', width:30,classes: 'cvteste', hidden:true},
{ name:'date',index:'date',search: true,searchoptions: {searchhidden: true},editrules:{date:true,required:true},datefmt:'dd-mm-Y', width:70, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:10, dataInit:function(el){
$(el).datepicker({dateFormat:'dd-mm-yy'});
}
}},
{ name:'shift',index:'shift',search: true,searchoptions: {searchhidden: true}, edittype:'select', formatter:'select', editoptions:{value:"G:G;A:A;B:B;C:C"}, width:35,align:"center",classes: 'cvteste',editable:true },
{name:'equipment',index:'equipment',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'equipments.php'}},
{name:"resources-1", index:"resources-1",width:105,sortable:false, editable:false},
{name: 'resources', index: 'resources', width: 105, align: 'left', editable: true, formatter: 'select', edittype: 'select', hidden:true, editrules:{edithidden:true}, editoptions: { /*dataUrl: 'resources.php',
postData: function (rowid, value, cmName) {
return {
myId: rowid
}
},*/
dataUrl: function(){
var srow = jQuery("#list").jqGrid('getGridParam','selrow');
var myUrl = "resources.php";
if( srow ) {
myUrl = 'resources.php?myId='+srow;
}
return myUrl;
},
multiselect:true,
dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
//minWidth: 150, //'auto',
// height: "auto",
// selectedList: 2,
// checkAllText: "all",
// uncheckAllText: "no",
// noneSelectedText: "Any",
/*open: function () {
var $menu = $(".ui-multiselect- menu:visible");
$menu.width("auto");
return;
}*/
});
}, 2000);
},
multiple: true
// defaultValue: 'IN'
}
},
{ name: "workdone", index: "workdone", width: 80, sortable: false, editable: true,
//edittype: "textarea"
edittype:'custom',
editoptions: {
custom_element: function (value, options) {
var elm = $("<textarea></textarea>");
elm.val(value);
// give the editor time to initialize
setTimeout(function () {
//tinymce.remove();
//var ctr = $("#" + options.id).tinymce();
//if (ctr !== null) {
// ctr.remove();
//}
try {
tinymce.remove("#" + options.id);
} catch(ex) {}
tinymce.init({selector: "#" + options.id, plugins: "link"});
}, 50);
return elm;
},
custom_value: function (element, oper, gridval) {
var id;
if (element.length > 0) {
id = element.attr("id");
} else if (typeof element.selector === "string") {
var sels = element.selector.split(" "),
idSel = sels[sels.length - 1];
if (idSel.charAt(0) === "#") {
id = idSel.substring(1);
} else {
return "";
}
}
if (oper === "get") {
return tinymce.get(id).getContent({format: "row"});
} else if (oper === "set") {
if (tinymce.get(id)) {
tinymce.get(id).setContent(gridval);
}
}
}}
},
{name:'sparesused',index:'sparesused',search: true,searchoptions: {searchhidden: true}, width:150, sortable:false,classes: 'cvteste',editable:true, editoptions:{size:100}},
{name:'status',index:'status',width:110,classes: 'cvteste',editable:true, search: true,searchoptions: {searchhidden: true},edittype:'select', editoptions:{dataUrl:'status.php'}}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "date",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Maintenane Daily Log",
editurl: "update.php"
});
$("#list").jqGrid("navGrid", "#pager", {add: true, edit:true}, {closeOnEscape:true, recreateForm: true, width:800},{closeOnEscape:true, recreateForm: true, width:800}
);
});
</script>
</head>
<body>
<div><table id="list"><tr><td></td></tr></table>
<div></div>
</div>
</body>
</html>
and in my resources.php I have as below
<?php
if(isset($_REQUEST['myId']))
{
$rowid=$_REQUEST['myId'];
require_once 'config.php';
$result1 = mysqli_query($con,"SELECT resources FROM worksdata WHERE id=$rowid limit 1") or die(mysql_error());
$row=mysqli_fetch_assoc($result1);
$value = $row['resources'];
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
if (strpos($value,$row['resource']) !== false)
echo " selected='selected' ";
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
else
{
require_once 'config.php';
$result=mysqli_query($con,"SELECT * FROM resources")
or die(mysql_error());
echo "<select multiple='multiple'>";
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['resource'].'"';
echo '>';
echo $row['resource'];
echo '</option>';
}
echo "</select>";
}
?>
What may be the problem here?
Related
The InActive button in the top of the picture, gets displayed properly when it is outside the datatable but doesn't work inside the datatable.
I have added the same code for status column inside the datatable but it displays only a checkbox. How do I get the InActive button inside datatable?
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable1').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable1') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
return ' <input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $colleges->status ? "checked" : "" }}>'
}
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
});
$(function() {
$('.toggle-class').change(function() {
var status = $(this).prop('checked') == true ? 1 : 0;
var user_id = $(this).data('id');
$.ajax({
type: "GET",
dataType: "json",
url: '/changeStatus',
data: {'status': status, 'id': id},
success: function(data){
console.log(data.success)
}
});
})
})
</script>
Please Add css.....
CSS
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
You can simple put after status....
Toggle switch
{
"data": "id",
render: function(data, type, row, meta) {
$html = '<label class="switch"> <input type="checkbox">
<span class="slider round"></span></label>';
return $html;
}
},
In the jQuery-jqGrid code below, pagination is not working. I would appreciate any assistance in resolving this issue.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<meta charset="utf-8" />
<title>jq-grid-1000000</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
.ui-datepicker { z-index: 2000 }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
z-index: 2000;
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
page: 1,
colModel: [
{ label : "Order ID",
name: 'OrderID',
key: true,
width: 75
},
{
label: "Customer ID",
name: 'CustomerID',
width: 150
},
{
label: "Order Date",
name: 'OrderDate',
width: 150,
sorttype:'date'
},
{
label : "Ship Name",
name: 'ShipName',
width: 150
},
{
label: "Freight",
sorttype: 'number',
name: 'Freight',
width: 150
}
],
loadonce: true,
viewrecords: true,
width: 780,
height: "auto",
page: 1,
rowNum: 3,
pager: "#jqGridPager",
gridview: true,
autoencode: true
});
// activate the build in search with multiple option
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
},
{}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true,
multipleGroup : true,
}
);
});
</script>
</body>
</html>
`
The paging will not work, because you use the option loadonce: true. With this option after the first request the datatype is going local with 3 records and you do not have more rows to page.
Disable this option and your paging will work.
I have the following code. It is suppossed to send the formData of title ,tag and description to the controller for uploading.But I keep recieving this error.
Error :
Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Multiple Images Upload Using Dropzone</title>
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<style>
.data{
display:none;
}
.dropzone {
width: 98%;
margin: 1%;
border: 2px dashed #3498db !important;
border-radius: 5px;
transition: 0.2s;
}
.dropzone.dz-drag-hover {
border: 2px solid #3498db !important;
}
.dz-message.needsclick img {
width: 50px;
display: block;
margin: auto;
opacity: 0.6;
margin-bottom: 15px;
}
span.plus {
display: none;
}
.dropzone.dz-started .dz-message {
display: inline-block !important;
width: 120px;
float: right;
border: 1px solid rgba(238, 238, 238, 0.36);
border-radius: 30px;
height: 120px;
margin: 16px;
transition: 0.2s;
}
.dropzone.dz-started .dz-message span.text {
display: none;
}
.dropzone.dz-started .dz-message span.plus {
display: block;
font-size: 70px;
color: #AAA;
line-height: 110px;
}
</style>
</head>
<body>
<div class="container">
<form method="GET" enctype="multipart/form-data" class="dropzone" id="dropzone">
<button id='upload'>Upload</button>
#csrf
</form>
<div class='data' ></div>
</div>
<script type="text/javascript">
var title = $('#title').val();
var description = $('#description').val();
max=2
var thumbnail;
Dropzone.options.dropzone = {
maxFiles: max,
autoProcessQueue: false,
uploadMultiple: true,
method:"get",
maxFilesize: 12,
url: '/upload',
init: function() {
var myDropzone = this;
$("#upload").click(function(e) {
// First change the button to actually tell Dropzone to process the queue.
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("maxfilesexceeded", function(file) {
alert('Max of '+ max + ' files');
this.removeFile(file);
});
this.on("addedfile", function() {
this.on('thumbnail', function(file, thumbnail) {
thumbnail = file.thumbnail;
});
this.on('sending', function (file, xhr, formData) {
// Append all form inputs to the formData Dropzone will POST
var data = $('.dropzone').serializeArray();
$.each(data, function (key, el) {
formData.append(el.title, el.description, el.tags);
});
console.log(formData);
});
var myvar = '<div class="form-group">'+
'<img class="media-object thumbnail" src="'+ thumbnail +'" />'+
'<label for="title">Title</label>'+
'<input type="text" class="form-control" id="title" aria-describedby="title" placeholder="Give your image a title"><br>'+
'<label for="Description">Description</label>'+
'<input type="text" class="form-control" id="description" aria-describedby="Description" placeholder="Describe your image"><br>'+
'<label for="Tags">Tags</label>'+
'<input type="text" class="form-control" id="Tags" aria-describedby="Tags" placeholder="Give your image tags"><br>'+
'<small>Tags are important to let people easily find your image</small><br><br>'+
''
;
$('.data').show();
$('.data').append(myvar);
});
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 50000,
processQueue: function(file) {
var name = file.upload.filename;
$.ajax({
headers:
{
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POSTg',
url: '{{ url("image/delete") }}',
data: {
title: title,
description:description,
type:"image",
body:"upploaded/img"+filename
},
success: function(data) {
console.log("File has been successfully removed!!");
},
error: function(e) {
console.log(e);
}
});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function(file, response) {
console.log(response);
},
error: function(file, response) {
return false;
}
};
</script>
</body>
</html>
And here is MyController:
public function upload(StorePostRequest $request)
{
$title= Post::where('title', $request->input('title'))->first();
if (!$title == null) {
return redirect()->back()->withErrors(['Title Already Exists', 'Title already exists']);
return response()->json(["message" => "Failed","reason" => "Title Already Exists"]);
}
$post = Post::create([
'title' => $request->input('title'),
'body' => $request->input('body'),
'description' => $request->input('description'),
'type' => $request->input('type'),
'user_id' => auth()->id(),
'published_at' => $request->has('draft') ? null : \Carbon\Carbon::now()
]);
}
StorePostRequest.php:
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Support\Facades\Auth;
class StorePostRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* #return bool
*/
public function authorize()
{
return Auth::check();
}
/**
* Get the validation rules that apply to the request.
*
* #return array
*/
public function rules()
{
return [
'title' => 'required|max:255',
'body' => 'required',
'tags' => 'nullable',
'image' => 'nullable|image|max:2048'
];
}
}
Thanks in advance
The documentation says the default value of observeChanges is false. But it seems to be setting the value to true. Is the default value applicable only when the sort plugin is disabled?
We are the noticing the rendering is invoked multiple times due to this and are wondering if it can be set to false explicitly.
Here is the jsfiddle:
$(document).ready(function() {
var container = document.getElementById('basic_example');
var data = function() {
return Handsontable.helper.createSpreadsheetData(10, 10);
};
var hot = new Handsontable(container, {
data: data(),
colHeaders: true,
rowHeaders: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true
});
if (container.clientHeight < 500) {
container.height = container.clientHeight;
hot.updateSettings({
height: container.clientHeigh
});
hot.render();
}
setTimeout(function() {
var output = document.getElementById('output').innerHTML = hot.getSettings().observeChanges;
}, 1000);
});
</style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="http://handsontable.com//styles/main.css" rel="stylesheet"> <link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"> <script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script> <style type="text/css"> body {
background: white;
margin: 20px;
}
h2 {
margin: 20px 0;
}
div#basic_example {
border: 5px solid #ccc;
}
<span>Default value for observe changes</span>
<div id="basic_example"></div>
<span id="output">Output</span>
Click here for jsfiddle: http://jsfiddle.net/mpusarla/nva6b8e8/1/
Newbie with Kendo UI here, thanks for the help. Having a problem with a selected listview inside a grid popup editor window.
It displays and is selectable, but I can't get it to send the selected listview data to the JSON string
the json string sent to the server:
{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}
My code, kendo-grid and kendo-listview:
<script type="text/x-kendo-tmpl" id="image_template">
<div class="product">
<img src="/assets/blog/${img_name}" width="100" />
</div>
</script>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input type="text" id="title" name="Title" data-bind="value:title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="published">Published</label>
<div class="controls">
<input type="checkbox" id="published" data-bind="checked: published" />
</div>
</div>
<textarea id="editor" name="content" data-bind="value:content"></textarea>
<div id="listView"></div>
<div class="control-group">
<label class="control-label" for="img_name">Image Name</label>
<div class="controls">
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
</div>
</div>
</form>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "/posts";
var blogimages = [
{ "img_name": "image_one.jpg"},
{ "img_name": "image_two.jpg"},
{ "img_name": "image_three.jpg"},
{ "img_name": "image_four.jpg"},
{ "img_name": "image_five.jpg"}
];
imageSource = new kendo.data.DataSource({
data: blogimages
});
imageSource.read();
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id;
},
dataType: "json",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id
},
dataType: "json",
type: "DELETE"
},
create: {
url: crudServiceBaseUrl,
dataType: "json",
contentType: "application/json",
type: "POST"
},
batch:false,
parameterMap: function(posts, type) {
if (type === "create") {
return JSON.stringify({ post: posts });
}
else if(type === "update") {
return JSON.stringify({ post: posts }, replacer);
}
}
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
title: { editable: true, defaultValue: "New title" },
content: { editable: true, defaultValue: "New content" },
published: {editable: true},
img_name: {editable: true}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
navigatable: true,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
selectable: "row",
height: 490,
toolbar: ["create"],
editable: {
mode: "popup",
template: $("#popup_editor").html()
},
edit: function(e) {
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull"
]
});
$("#listView").kendoListView({
dataSource: imageSource,
selectable: "multiple",
change: onChange,
template: kendo.template($("#image_template").html())
}).data("kendoGrid");
},
save: function(e) {
},
columns: [
{ field: "title",title:"Title", width: "25%" },
{ field: "created_at", title:"Created", width: "20%" },
{ field: "updated_at", title:"Updated", width: "20%" },
{ field: "published", title:"Published", width: "10%" },
{ command: ["edit", "destroy"], title: " ", width: "20%" }]
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
$('#img_name').val(dataItem.img_name);
}
replacer = function(key, value){
if (key=="id"||key=="created_at"||key=="updated_at"){
return undefined;
}else{
return value;
}
}
});
</script>
<style scoped>
.product
{
float: left;
width: 100px;
height: 60px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: none;
cursor: pointer;
overflow: hidden;
}
.product img
{
float: left;
width: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
border: 0;
padding: 0 0 20px 0;
min-width: 0;
}
</style>
I can successfully send img_name data through the input text
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
But I can't get it to change with onChange function in the listview
Any thoughts on this?