Inline edit for json object

9 posts, 0 answers
  1. Clarissa
    Clarissa avatar
    6 posts
    Member since:
    Sep 2017

    Posted 23 Apr Link to this post

    I have this code but it acts weird:

    <div id="relatedCirculars"></div>

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

    <script>
    var relatedCirculars = [{ Title: "Test1", URL: "http://adres/test1.docx" }, 
    { Title: "Test2", URL: "http://adres/test2.docx" }];


      $("#relatedCirculars").kendoGrid({
        dataSource: {
          data: relatedCirculars,
          autoSync: true,
          schema: {
            model: {
              fields: {
                Title: { validation: { required: true } },
                URL: { validation: { required: true }}
              }
            }
          }
        },
      toolbar: ["create"],
      columns: [
        {
          field: "Title"
        },
        {
          field: "URL"
        },
        {
          command: ["edit", "destroy"],
          title: "&nbsp;",
          width: "250px"
        }
      ],
      editable: "inline"
    });

    </script>

     

     

    At any point, the content of "relatedCirculars" is not changed.

    While editing and clicking on the second field, the edition is finished.

    Validation seems not to work.

    Cancel is not working.  

    Any idea what's missing?

     

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2187 posts

    Posted 25 Apr Link to this post

    Hi Clarissa,

    When the Grid is assigned a regular array of data, its internal DataSource creates a copy of it. If you want changes to be directly reflected in the initial array, make it an ObservableArray:
    var relatedCirculars = new kendo.data.ObservableArray([
      {ID: 1, Title: "Test1", URL: "http://adres/test1.docx" },
      {ID: 2, Title: "Test2", URL: "http://adres/test2.docx" }
    ]);

    This scenario will still work better if you switch to incell editing as opposed to inline editing. You can see a Dojo here:
    http://dojo.telerik.com/@tsveti/ALaBUWoP

    Note that the updates in this scenario happen because the Grid is bound to the array data using MVVM. There isn't actual editing taking place and that is why the cancel operation does not work.

    If you want to implement a scenario where the array data is actually edited, as opposed to updated by an MVVM binding, you should implement local CRUD operations in the DataSource. At the end of the section, there is a runnable example:
    Local CRUD operations example


    Regards,
    Tsvetina
    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.
  3. Clarissa
    Clarissa avatar
    6 posts
    Member since:
    Sep 2017

    Posted 25 Apr in reply to Tsvetina Link to this post

    In a cell, editing is even better, but this does not work on my solution for a strange reason:

    "Unhandled exception at line 54, column 9287 in http://localhost:14981/Scripts/kendo.all.min.js
    0x800a138f - JavaScript runtime error: Unable to get property 'template' of undefined or null reference occurred"

    This happens when I click on "Add new record". There is no template referenced in this grid but there are templates used in other grids on that page. This is an exact code of the solution:

    $("#relatedCirculars").kendoGrid({
        dataSource: {
          data: RelatedCircularsGuidlinesPolicies,
          schema: {
            model: {
              id: "ID",
              fields: {
                ID: { editable: false, nullable: false },
                Title: { validation: { required: true } },
                URL: { validation: { required: true } }
              }
            }
          }
        },
        toolbar: ["create"],
        columns: [
          {
            field: "Title"
          },
          {
            field: "URL"
          },
          {
            command: ["destroy"],
            title: "&nbsp;",
            width: "250px"
          }
        ],
        editable: true,
        save: function (e) {
          RelatedCircularsGuidlinesPolicies = e;
        },
        remove: function (e) {
          RelatedCircularsGuidlinesPolicies = e;
        }
      });

     

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2187 posts

    Posted 27 Apr Link to this post

    Hi Clarissa,

    Could you send me a runnable example, where I can reproduce and inspect the error. I cannot reproduce it in the Dojo that I sent in my previous post:
    http://dojo.telerik.com/@tsveti/ALaBUWoP

    I also cannot reproduce it when I copy the new code you shared:
    http://dojo.telerik.com/@tsveti/iCivuCEs

    However, one thing in this code seems problematic. Could you elaborate more on why the event argument of the save and remove events is set as a value of the edited array:
    save: function (e) {
      RelatedCircularsGuidlinesPolicies = e;
    },
    remove: function (e) {
      RelatedCircularsGuidlinesPolicies = e;
    }

    e in this case is not an array but an object, which could break further functionality. If you explain the functionality that you are trying to achieve here, I may be able to suggest you a different way to implement it.

    Regards,
    Tsvetina
    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.
  5. Clarissa
    Clarissa avatar
    6 posts
    Member since:
    Sep 2017

    Posted 10 May in reply to Tsvetina Link to this post

    I can't replicate the issue outside of the solution, but it appears only when I click on, "Add new record"

    Regarding save and remove function, this was wrong. What I'm trying to do is just make sure that the JSON which I provide to grid is always updated.

    So what I did before sending the form is:

     

      var RelatedCircularsGuidlinesPolicies = [];
      $("#relatedCirculars").data("kendoGrid").dataSource.data().forEach(function(item) {
        RelatedCircularsGuidlinesPolicies .push({ "Title": item.Title, "URL": item.URL });
      });

     

    But I'm sure there are nicer ways of doing this.

  6. Tsvetina
    Admin
    Tsvetina avatar
    2187 posts

    Posted 11 May Link to this post

    Hi Clarissa,

    In such case, could you run your project using the non-minified kendo.all.js file and copy the full error message again, so I can see in which part of the source code the error is triggered? You can follow these steps:

    1) Open the Kendo UI download page (requires login) and download one of the Source Code archives at the bottom.
    2) Open the archive and find kendo.all.js in the src/js folder.
    3) Copy kendo.all.js in your project and replace the kendo.all.min.js reference with a kendo.all.js one.
    4) Reload the problematic page and click the "Add new record" button to reproduce the error.
    5) Copy the full error message, with stack trace, here.

    Regards,
    Tsvetina
    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.
  7. Clarissa
    Clarissa avatar
    6 posts
    Member since:
    Sep 2017

    Posted 14 May in reply to Tsvetina Link to this post

    Her it is: 
  8. Tsvetina
    Admin
    Tsvetina avatar
    2187 posts

    Posted 15 May Link to this post

    Hi Clarissa,

    It is interesting that the error actually means that the column object that is currently handled is undefined, but going back through the chain of methods that call _cellTmpl, I do not see an obvious place where the column may be passed as undefined.

    You mentioned that this error occurs only in this specific project. Could I ask you to check for duplicate Kendo UI references in the project? Check both the _Layout.cshtml view and the view where you declare the Grid. If you are unsure, please copy any Kendo UI references that you find in the project, so we can review them. Duplicate references could lead to such type of conflicts in the widgets internal code.

    Regards,
    Tsvetina
    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.
  9. Clarissa
    Clarissa avatar
    6 posts
    Member since:
    Sep 2017

    Posted 21 May in reply to Tsvetina Link to this post

    Apparently I was initiating grid without destroying it first.

    This post helpt me: https://www.telerik.com/forums/object-expected-error-when-expanding-updated-grid-row

Back to Top