This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid dataSource question

3 Answers 274 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Pedro
Top achievements
Rank 2
Pedro asked on 23 Dec 2011, 04:01 PM
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

3 Answers, 1 is accepted

Sort by
0
Pedro
Top achievements
Rank 2
answered on 27 Dec 2011, 05:06 PM
Anyone?
0
Clint
Top achievements
Rank 1
answered on 07 Feb 2012, 02:36 PM
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.


0
DanKline
Top achievements
Rank 2
answered on 10 Jun 2013, 12:07 AM
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.
Tags
Data Source
Asked by
Pedro
Top achievements
Rank 2
Answers by
Pedro
Top achievements
Rank 2
Clint
Top achievements
Rank 1
DanKline
Top achievements
Rank 2
Share this question
or