Kendo UI Grid dataSource question

4 posts, 0 answers
  1. Pedro
    Pedro avatar
    42 posts
    Member since:
    Oct 2012

    Posted 23 Dec 2011 Link to this post

    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
  2. Pedro
    Pedro avatar
    42 posts
    Member since:
    Oct 2012

    Posted 27 Dec 2011 Link to this post

    Anyone?
  3. Kendo UI is VS 2017 Ready
  4. Clint
    Clint avatar
    56 posts
    Member since:
    Feb 2011

    Posted 07 Feb 2012 Link to this post

    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.


  5. DanKline
    DanKline avatar
    4 posts
    Member since:
    Dec 2007

    Posted 09 Jun 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready