How to make a non-editable column field?

20 posts, 0 answers
  1. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 31 May 2012 Link to this post

    I have a kendoGrid() set to editable: true.  It has two columns and I want one column to simply show the value, and the other column to be editable.  Is this possible?

    The exact scenario: the left column shows a value, and the right column has a selectable DropDownList.

    I'm able to include the DropDownList in the right column for each table cell, but the left hand column is still editable as a text box.  I'd like to disable that functionality if possible, so it's not editable at all.

    Any ideas on how to achieve this?

    Thanks
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 Jun 2012 Link to this post

    Hello King,

    You could achieve it as in the dataSource schema set an editable: false configuration option to the fields which will be non-editable. For example: 
    dataSource = new kendo.data.DataSource({
       ...
       schema: {
           model: {
              id: "ProductID",
              fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { editable: false },
                     ...
              }
           }
       }
    }); 

    I hope this helps. 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 01 Jun 2012 Link to this post

    Wow, I must have looked at that bit of documentation 20 times and not seen that property.  I need my eyes checked.

    Thanks.
  5. tejas
    tejas avatar
    1 posts
    Member since:
    Jul 2011

    Posted 02 Aug 2012 Link to this post

    Dear Iliana,

    Is there another way (other than making field editable: /true/false) ?

    The reason, I have complex JSON object as data and I cannot define schema for complex(nested) structure.
  6. Jeff
    Jeff avatar
    1 posts
    Member since:
    Jun 2011

    Posted 23 Oct 2012 Link to this post

    The thing I don't like about the given solutions of setting editable in the dataSource is that a) whether a grid column is editable or not shouldn't be in the dataSource, it should be int eh column definitions, and b) it requires you to set every field in the dataSource, which is less that desirable for large or complex structures.

    Instead, you can also override the editor on the grid, and basically remove the editor.  The grid cell will still get the CSS classes that go along with being edited, and the grid will still think the cell is being edited, but there will be no visible editor, so the user can't actually change the values:

        columns: [
            { field: "Price", editor: function(element, options) { element.text(options.model.Price) } }
        ]

    I'm not saying this is the "right" way or even a "better" way, but offering it as a solution that may work better in some situations.
  7. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 21 Dec 2012 Link to this post

    We are using Kendo for MVC complete. We are able to set the field to Editable(false) which works fine. The columns are basically informational so when the user selects a value in the first column, we populate the next three non-editable columns with information pulled with ajax. However, when the model item is set as non-editable it seems that when we set the value using the set() method of the observable object it doesn't change and the grid gets updated. 

    Is it possible to set the value in the dataSource even though it has been set to not-editable? I don't see a way to set the "column" as not editable similar to the MVC Extensions grid which I assume just doesn't attach an editor template to the field, or uses the display template rather than the editor template?

    We do have a slight work around, to add HtmlAttribute of disabled to the columns in question I guess if the answer is no. I guess I would have to style the disabled input box in the k-grid cause we don't like them grayed out.
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Dec 2012 Link to this post

    Hello Bob,

    Indeed, when a field in the Model is not editable, its value cannot be changed programmatically. I am not sure what exactly are you trying to achieve, but generally, loading Grid cell content based on selections on the same table row doesn't sound like a very standard user experience workflow. Please consider displaying all the information initially or enable Grid filtering / grouping in order to achieve appropriate user interface.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 26 Dec 2012 Link to this post

    >I am not sure what exactly are you trying to achieve, but generally, loading Grid cell content based on selections on the same table row doesn't sound like a very standard user experience workflow

    When adding a row to an editable grid after the user selects a value from the dropdown/lookup we display additional; information from the lookup table in the grid row. 

    For example, think of a grid where you are adding employees to a list of people taking a training class. You add a record to the grid and select an employee by employee number... then the screen will populate the employee name into another column that is a read-only column. 

    BOb

  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Dec 2012 Link to this post

    Hello Bob,

    My understanding is that the purpose of the Employee name is only to facilitate the addition process from user's perspective. Having the Employee name as a field in the training class table sounds like breaking the data normalization, as the name is obviously stored in another table, right?

    That is why I can suggest you the following:

    + Use a foreign key column, so that the Employee name is directly viewable when inserting a new row. You can even create such a datasource for the Emplyoee dropdown, so that both the Employee ID and Name are visible.

    http://demos.kendoui.com/web/grid/foreignkeycolumn.html

    or

    + Use a popup edit form with a template, and the Employee name will be displayed next to the selected Employee ID for informational purposes. The actual Employee name field will not be shown in the popup, but you can display it in the respective row after the Grid gets rebound after the editing is complete.

    http://demos.kendoui.com/web/grid/editing-popup.html

    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-create-a-custom-popup-editor?

    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

    Alternatively, you can use a template for the Employee ID field, so that the name is loaded in the same cell during editing.

    Finally, you can make the Employee name field editable, but use a template for it, which includes a readonly textbox, so the user will not be able to modify it manually, but you will be able to modify it programmatically.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. mark
    mark avatar
    13 posts
    Member since:
    Sep 2010

    Posted 01 Jan 2013 Link to this post

    I am running into a similar issue. My Grid is within the context of a product that comes from a combo box. I dynamically change the data source based on the value of the combo box.

    When clicking the 'create new', I want the new record to always have that product id specified by the combobox. When the user saves, that product id field is always null because it is a read-only field in the grid.

    How do I jam in the product ID from the combo box on a newly created record?

    -Ti
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 Jan 2013 Link to this post

    Hello Mark,

    You can try the last suggestion from my previous reply. Instead of a readonly textbox, you can also use a hidden input.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Mark
    Mark avatar
    5 posts
    Member since:
    Sep 2013

    Posted 02 Dec 2013 Link to this post

    I like the fact that you can disable any modifications to the data at the model but there may be a variety of reasons that one might wish to modify data in a grid programmatically but NOT allow the user to directly modify the data.  The "editor" based solutions above will work but they seem a bit kludgy.  I would prefer an "editable" field on the columns as well as the model.

    BTW: I'm a different Mark than the one above.
  14. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Dec 2013 Link to this post

    Hello Mark Davis,

    Using an edit template with a readonly textbox (or even no textbox) and a hidden field is a pretty reasonable way to achieve the discussed scenario (in my opinion). Are you suggesting that a better option is to use an editable textbox, which the user will be able to modify, but the changes will be ignored (reverted), or the UI should alert him that changes to that field are not allowed? This seems like an unexpected and non-user-friendly implementation to me, which will also be more complex that it needs to be.

    Let me know if I am missing something and you imagine things in a different way.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Mark
    Mark avatar
    5 posts
    Member since:
    Sep 2013

    Posted 04 Dec 2013 Link to this post

    Hey Dimo,

    I'm suggesting is that it would be convenient to have an "editable" configuration property on the grid columns that could be set to false such that the grid's UI would not allow the user to modify the data in the grid column EVEN THOUGH the data could still be altered programmatically and saved to the database IF the data source's model has editable = true for the given field.  

    The model setting says "This field can/can't be modified on the client period", the grid column setting says "This field can/can't be modified by this particular grid".  If the model is configured with editable = false for the field, the data could not be modified in the grid (or any other element for that matter) regardless of the grid column setting. 

    Essentially all I'm saying is that the column read-only capability be decoupled from the model and implemented internally by the grid via a simple "editable" field and not by a workaround.  The solution above works just fine but it's a matter of code clarity.

    Thanks
  16. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 04 Dec 2013 Link to this post

    Mark,

    I agree... that would be a good way to handle this. But, I guess that's basically what I'm doing by setting the edit template to read only.

    If you suggest it on get satisfaction let me know and I will throw a vote on it.

    BOb
  17. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Dec 2013 Link to this post

    Hello,

    I see. Since the described behavior can't be achieved currently as well, I can suggest you to submit a new feature request at http://feedback.kendoui.com/. If it gains enough popularity, we can include it out-of-the-box.


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Komail
    Komail avatar
    10 posts
    Member since:
    May 2013

    Posted 04 Mar 2014 in reply to Dimo Link to this post

    How can this described feature can be achieved. i.e. Field can not be editable by user but the values can be changed from a client side script.
  19. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 04 Mar 2014 Link to this post

    Hello Komail,

    The discussed behavior can be achieved if you use the suggestions, which are already provided above. Let me know if you need any clarifications.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. Jay
    Jay avatar
    45 posts
    Member since:
    Dec 2011

    Posted 12 Oct 2015 Link to this post

    I really liked Jeff's idea about replacing the editor.  I made it a little more mainstream:

    function nonEditor(container, options) {
        container.text(options.model[options.field]);
    }

     

    Then when defining your column, assign the above function as the editor:

    columns: [
            { field: "Price", editor: nonEditor }
        ]

     

    not too shabby ;)

  21. ptw
    ptw avatar
    27 posts
    Member since:
    Sep 2015

    Posted 30 Oct in reply to Jay Link to this post

    Many thanks for that Jay. (And Jeff & other contributors). omg. I've spent sooo long trying to work this out.The editable:false in the schema could not work for me because I'm using a calculated field (so my grid shows user name, while original field is userId).

    It'd be nice to have a standard method for this, rather than a work-around.

    One minor refinement to Jay's code - I removed the edit class on the container too - so there was no visible change on (non)Edit, so:

    function nonEditor(container, options) {
        container.text(options.model[options.field]);
        container.removeClass("k-edit-cell");
    }

     

Back to Top
Kendo UI is VS 2017 Ready