0

I have a list and using CSOM to surface information. However all the examples I found show an alert box or Gridview to output the information.

I would like the list items to show in a tabular form, this could be div or something so I can style it. In addition it would be useful to have some sort of pagination, i.e. a link to show next set of list items (in batches).

The following code pages through a list but gives an alert box, need to modify it so it shows in tabular form.

Any ideas?

    var listItems;                   //holds retrieved list items 
var query;                       //must continue to reuse the same query object for paging to work 
var targetList;                  //list from which to retrieve items 
var ctx; 

function runCode() { 
    ctx = new SP.ClientContext(); 
    targetList = ctx.get_web().get_lists().getByTitle('Test1'); 
    query = new SP.CamlQuery(); 
    query.set_viewXml("<View><ViewFields><FieldRef Name='Title'/></ViewFields><RowLimit>2</RowLimit></View>"); 
    listItems = targetList.getItems(query); 
    ctx.load(listItems);  
    ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed); 
} 

function onQuerySucceeded() { 
    var message = "Found Matching Items! "; 
    var listEnumerator = listItems.getEnumerator(); 
    while (listEnumerator.moveNext())  { 
    message += "nTitle=" + listEnumerator.get_current().get_item("Title") 
    } 
    alert(message); 
    var position = listItems.get_listItemCollectionPosition(); 
    if (position != null) { 
    query.set_listItemCollectionPosition(position); 
    listItems = targetList.getItems(query); 
    ctx.load(listItems);   
    ctx.executeQueryAsync(onQuerySucceeded, this.onQueryFailed); 
    } 
} 

function onQueryFailed(sender, args) { 
    alert('Request failed. nError: ' + args.get_message() + 'nStackTrace: ' + args.get_stackTrace()); 
}

1 Answer 1

0

You are getting an alert window because the code has an alert statement. You can remove below code to fix that

alert(message);

To answer you question about Sorting, Filtering, Pagination etc. You can use Out of the box list view for that. Otherwise if you want to custom coding will take lot of time and effort.

In 2013 there is a new concept called JSLinks which can be used to modify the look and feel of a list view. You should start thinking in that perspective to easily achieve your requirements.

8
  • I would like to custom code the output and not use the ootb list view. Any pointers on how to achieve some sort of tabular layout using custom code? Commented Nov 10, 2014 at 7:46
  • You mean Serverside object model? You can use SPGridView control for displaying in tabular form. It supports Paging/Sorting (For enabling it require a bit of coding). Commented Nov 10, 2014 at 12:49
  • is SPGridView available through CSOM? Commented Nov 10, 2014 at 14:40
  • Which CSOM Library you are using .Net or JavaScript? Commented Nov 10, 2014 at 14:42
  • I dont have access to the server box so I guess its Javascript? Commented Nov 10, 2014 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.