Quantcast
Channel: SharePoint 2010 - Development and Programming forum
Viewing all articles
Browse latest Browse all 11571

Paged Grid from Knockout.js

$
0
0

Hi,

I'm trying to bind items from a SharePoint list to a Knockout .js simple paged grid (ko.simpleGrid.viewModel).

I face a problem when i try to insert a hyperlink or any other HTML element inside the grid, the data is taken as text inside the grid.

Below is the code to get the paged grid of sharepoint list items:

var PagedGridModel = function (items) {
    this.items = ko.observableArray(items);
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "ID", rowText: "ID" },
            { headerText: "Title", rowText: "Title" },
            { headerText: "Project", rowText: "Project" },
            { headerText: "Description", rowText: "Description" },
	    {
	        headerText: "Edit", rowText: function(item){
var a="<a href='http://www.google.com'>edit</a>"
                                   return a ;
                  }
            }

        ],
        pageSize: 5
    });

};



$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', pass);
});

function pass() {

    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var list = web.get_lists().getByTitle('AppreciationList');
    var myquery = new SP.CamlQuery();
    myItems = list.getItems(myquery);
    context.load(web);
    context.load(myItems);
    
    context.executeQueryAsync(function success() {
        var siteUrl = SP.ClientContext.get_current().get_url();
        
        var songs = [];
       
        var listItemEnumerator = myItems.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            var title = oListItem.get_item('Title');
            var str = "Edit";
            var result = str.link("http://www.w3schools.com");
             songs.push({ ID: oListItem.get_item('ID'), Title: oListItem.get_item('Title'), Project: oListItem.get_item('Project'), Description: oListItem.get_item('Description'), Edit: result });

        }
        ko.applyBindings(new PagedGridModel(songs));




    }, function fail() {
        alert('Request failed. ' + args.get_message() +
        '\n' + args.get_stackTrace());

    });



}



Below is the paged grid:




Viewing all articles
Browse latest Browse all 11571

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>