Sharepoint Online + Full CRUD solution

6 posts, 0 answers
  1. Lutz
    Lutz avatar
    10 posts
    Member since:
    Feb 2017

    Posted 24 May 2017 Link to this post

    Hi all,

    I am rather new to JS and Kendo UI and I am trying to hook up a Kendo UI Grid to a sharepoint list via the Sharepoint REST Interface.

    So far I have set up a datasource for read, create, update and destroy and it is working like charm. My biggest issue I have are the different Sharepoint field types.

     

    CRUD operations for simple text, date, number fields are working without an issue. But I don't understand how to implement fields like choice filelds, lookupfields, people and groups fields. Can somebody show me an working example how to properly display a people-and-groups column in the grid and how to edit it? Same for a choice field.

     

    Many thanks in adavance.

     

  2.
  3. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 26 May 2017 Link to this post

    Hello Lutz,

    Kendo UI does not have dedicated SharePoint UI widgets, like people list but you can implement one yourself relatively easy using the available widgets like dropdown and popup.

    More information on how to add custom editors to the grid can be found in the documentation.

    Regards,
    Genady Sergeev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Lutz
    Lutz avatar
    10 posts
    Member since:
    Feb 2017

    Posted 02 Feb Link to this post

    Hi,

    I have found some articles from Ed Musters but he stopped the article series just at the point where it got interesting :-(

    As I am still new to JavaScript and I would like to demonstrate Kendo UI to one of our customers I ask you guys once more for help. Has anybody a working example for:

    Using DataGrid to read/create/update/delete Data from a Sharepoint-Online list with all kinds of column types (e.g. People column, choice column, Single line of text, etc)

    Many thanks in advance.

     

    Best regards

  7. Stefan
    Admin
    Stefan avatar
    1976 posts

    Posted 05 Feb Link to this post

    Hello, Lutz,

    Currently, we have only the examples made by Ed Musters.

    When doing CRUD operation with the Grid there are no further specifics when using the SharePoint, the main point is to return or to parse the response in the expected from the Grid dataSource format:

    https://docs.telerik.com/kendo-ui/framework/datasource/crud

    For example, the transport can be set a function and the parsed values can be set vie options.success:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read

    <script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        read: function(options) {
          // make JSONP request to https://demos.telerik.com/kendo-ui/service/products
          $.ajax({
            dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
            success: function(result) {
              // notify the data source that the request succeeded
              options.success(result);
            },
            error: function(result) {
              // notify the data source that the request failed
              options.error(result);
            }
          });
        }
      }
    });
    dataSource.fetch(function() {
      console.log(dataSource.view().length); // displays "77"
    });
    </script>


    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8.
  9. Lutz
    Lutz avatar
    10 posts
    Member since:
    Feb 2017

    Posted 09 Feb in reply to Stefan Link to this post

    Hi,

    I am getting closer to understand to what I am doing :-). Please have a look at my code below. Looking at my response (response without model.png) does my code (especially the model part) make sense?

    When you have a look at the picture "response model.png" you can see that the model inserted a field "MyNewColumn". But I can't see the field "SomeotherInformation" within the Author object. Is this the expected behavior?

    Please let me know if you have any comments for my code. Thanks in advance.

    var grid = $("#kendoGrid1").kendoGrid({
            height: 200,
            columns: [{
                    title: "Author",
                    field: "Author.Title"
                },
                {
                    title: "Author Other",
                    field: "Author.SomeotherInformation"
                },
                {
                    title: "Modified",
                    field: "Modified",
                    template: '#= kendo.toString(Modified, "dd/MM/yyyy") #'
                },
                {
                    title: "Modified orig",
                    field: "Modified"
     
                }
            ],
            dataSource: {
                schema: {
                    model: {
                        id: "ID",
                        fields: {
                            ID: {
                                type: "number"
                            },
                            Modified: {
                                type: "date"
                            },
                            Author: [{
                                Title: {
                                    type: "string"
                                },
                                SomeotherInformation: {
                                    type: "string"
                                }
                            }],
                            MyNewColumn: {
                                type: "date"
                            }
                        }
                    }
                },
                transport: {
                    read: function (options) {
                        $pnp.sp.web.lists.getByTitle("MyList").items
                            .select("Id,Author/Title,Modified")
                            .expand("Author")
                            .get()
                            .then(function (items) {
                                console.log("MyList results", items);
                                options.success(items);
                            }) //then function
                            .catch(function (e) {
                                console.log(e);
                                options.error(e);
                            }) //catch function
                    } //read function
                } //transport
            } //datasource
        }); //kendoGrid
  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    481 posts

    Posted 13 Feb Link to this post

    Hello, Lutz,

    I am glad to hear that you are moving forward. I had a look at the provided screenshots but I cannot see a SomeotherInformation field at all. Perhaps you intended to attach a different screenshot?

    However, I would like to use this opportunity to advise you regarding the schema model definition. The schema enables the Kendo UI Data Source to parse the data that it receives. In your case, instead of binding the Kendo UI Grid to nested fields, you can use the Model:

    https://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-Model.define

    Also, instead of using a client template, you can take advantage of columns format for the Modified column:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.format

    var grid = $("#kendoGrid1").kendoGrid({
     height: 200,
     columns: [{
          field: "Title"
      },{
          title: "Author Other",
          field: "Other"
      },{
          field: "Modified",
          format: "{0:dd/MM/yyyy}"
      },{
          title: "Modified orig",
          field: "Modified"
      }],
     dataSource: {
      schema: {
       model: {
        id: "ID",
        fields: {
         ID: { type: "number"},
         Modified: { type: "date"},
         Title: { from "Author.Title"},
         Other : { from "Author.SomeotherInformation"},
         MyNewColumn: { type: "date" }
        }
       }
      }
     // other configurations
     });

    We have an article which shows how to use nested properties that you may find useful:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/use-nested-model-properties

    If you need more help, Could you copy and paste the response in the thread? An easy way to do that could be to stringify it when you log it in the console, so I can test it in a runnable example:

    read: function (options) {
    $pnp.sp.web.lists.getByTitle("MyList").items
      .select("Id,Author/Title,Modified")
      .expand("Author")
      .get()
      .then(function (items) {
        console.log(kendo.stringify(items));
        options.success(items);
      })

    Look forward to hearing back from you.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top