Kendo UI Grid dataSource question

[Pedro]

Hello,

I hope you guys can help me, 

I want to be able to use the Kendo UI grid and connect it to a sharepoint list. 

I'm really new to programming and using any sort of third party applications.

Any help would be greatly appreciated.

Thanks,

P

[Pedro]

Anyone?

[Clint]

Ok, I'm late to this question, but I figured I'd answer it.

1. Download the newest SPServices with JSON support -- http://spservices.codeplex.com/releases/view/68781
2. Download the kendo libraries
3. Put the SPServices library and kendo libraries in a sharepoint document library or area you can reference -- Site Assets is a popular location
4. At this point you have two options.   Write all your code in a file and upload to the same document library and reference it via the content link feature of a Content Editor Web Part (add content editor, edit, content link) or write your code directly in the content editor web part (I wouldn't do this as Sharepoint will try to be smart and edit your code).

Expanding on #4, here is a small sample that will populate a kendo grid from a Sharepoint list called "Announcements"

<script type="text/javascript" src="/SiteAssets/libs/jquery.SPServices-0.7.1ALPHA13.js"></script>

<link href="/SiteAssets/kendoui/styles/kendo.common.min.css" rel="stylesheet" />

<link href="/SiteAssets/kendoui/styles/kendo.default.min.css" rel="stylesheet" />

<script src="/SiteAssets/kendoui/js/kendo.kendo.min.js"></script>

<script src="/SiteAssets/kendoui/js/kendo.all.min.js"></script>

 

<script>

      

var JSONdata;        

 

$(document).ready(function() {

  $().SPServices({

    operation: "GetListItems",

    async: false,

    listName: "Announcements",

    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",

    completefunc: function (xData, Status) {

       

JSONdata = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({

   mapping: {

     ows_ID: {mappedName: "ID", objectType: "Counter"},

     ows_Title: {mappedName: "Title", objectType: "Text"},

    },  


   includeAllAttrs: true

  });

    }

  });

 

                    $("#grid").kendoGrid({

                        columns: [

                            { title:  "Title Header", field: "Title" },

                            { title:  "ID Header", field: "ID" },

                        ],

                        dataSource:  {

                          data: JSONdata,           

                        },

                        height: 250,

                    });

                });

      </script>

 <div id="grid"></grid>

That should do it!  I've used a variety of KendoUI widgets with Sharepoint -- grids, menu, tabstrip, charts, etc, and they all work very very well!  I recommend using SPServices to get your data for the widgets.

[DanKline]

I see two issues with the proposed solution.  This looks like it may only be a "Display" functionality not the full CRUD implementation.  Additionally, it is Synchronous, which is blocking.  That might work well in a test environment, but in a production environment with 100+ users, I'm not sure it will work very well.  Correct me if my understanding is wrong.