Column readonly in edit mode but editable in add mode?

42 posts, 0 answers
  1. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 15 Apr 2013 Link to this post

    Hi,
    I have a Kendo UI grid where the first column is readyonly:

    schema: {
        data: "data",
        model: {
            id: "ID",
            fields: {
                firstName: { editable: false },
                lastName: { validation: { required: {message: "Must not be empty!"}} }
            }
        }
    },

    In edit mode this is just fine, but if I want to add a new row/item then of course the firstName should be editable.
    How I can get this working?

    I tried to find a 'best practice' but seems to be not so easy.
    Is there any 'best practice'?

    Thanks a lot!

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 15 Apr 2013 Link to this post

    Hello Timon,


    In the current scenario you should make the column editable by default. Then you should bind to the edit event of the Grid, determine whether the current item is new and make the input readonly if needed.

    E.g.
    function edit(e) {
        if (e.model.isNew() == false) {
            $("#firstName").attr("readonly", true);
        }
    }

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 15 Apr 2013 Link to this post

    Hi Dimiter Madjarov,

    thanks for reply but this does not work for me.
    I think the reason is that firstName is not the ID-column of my grid, so $('#firstName') does not give any result.
    I need to access the firstName column even if it is not the ID column of the grid. How can I do that?

    Thanks again!
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 15 Apr 2013 Link to this post

    Hi Timon,


    Sorry for the inconvenience. The solution, provided in the previous answer will work only for the Kendo UI MVC grid, where each input field receives an id attribute equal to the column name. In Kendo UI Web Grid you could get the current input field via it's name attribute.

    E.g.
    function edit(e) {
        if (e.model.isNew() == false) {
            $('[name="firstName"]').attr("readonly", true);
        }
    }

    Wish you a great day!

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 15 Apr 2013 Link to this post

    Hi,
    thanks again, I solved it now this way:

    edit: function(e) {
      if (e.model.isNew() == false) {                                                  
      $('input[name=firstName]').parent().html(e.model.firstName);
      }
    }                                   },
    This creates also the original look and feel if in edit mode, whic means there is no border and no input field anymore.

    Just if someone is interested in,

    best regards
  6. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 28 May 2013 Link to this post

    I am trying to do the same thing but I cannot get my column to be read only.  I can't get it to work even by setting the column to Editable(false) in the model.  Maybe I have something else wrong in the grid?
    @(Html.Kendo().Grid(Model)
        .Name("gvLaboratories")
        .Columns(columns =>
        {
            columns.Command(command => { command.Edit(); }).Width(50);
            columns.Bound(l => l.ID);
            columns.Bound(l => l.Description);
            columns.Command(command => { command.Destroy(); }).Width(50);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Server()
                .Model(model =>
                {
                    model.Id(l => l.ID);
                    model.Field(field => field.ID).Editable(false);
                    model.Field(field => field.Description).Editable(false);
                })
            .Create(create => create.Action("AddLaboratory", "SystemAdmin"))
            .Read(read => read.Action("Laboratories", "SystemAdmin"))
            .Update(update => update.Action("UpdateLaboratory", "SystemAdmin"))
            .Destroy(destroy => destroy.Action("DeleteLaboratory", "SystemAdmin"))
        )
    )
    The Editable(false) doesn't seem to do anything.  The grid is still editable and I can add and edit both columns.


  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 29 May 2013 Link to this post

    Hi Timon,


    The reason for the issue in the current implementation is that a PopUp editing mode is being used, and the Editable(false) configuration is not supported with this mode. You can assure that it is working if you change to InLine edit mode. 

    If you would like to override the default template for PopUp editing, you should specify a custom PopUp Editor as demonstrated in the following Code Library.

    I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 29 May 2013 Link to this post

    I've seen that code project but I don't see how to make columns readonly in edit mode but editable in add mode within the custom popup editor.
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 30 May 2013 Link to this post

    Hi Timon,


    In the current scenario, you could use the default editor template and use similar approach, as demonstrated in my second post, where the column is editable by default. You could check if the operation is add or edit via e.model.isNew(), access the window through e.container and find the input to disable.
    E.g.
    function edit(e) {
        if (e.model.isNew() == false) {
            $(e.container).find('input[name="ProductName"]').attr("readonly", true);
        }
    }


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 30 May 2013 Link to this post

    I'm a little confused.  In your previous reply to me you said that that code could not be used when using a PopUp editor for the grid.  You supplied me with a code project on how to do a custom PopUp editor (which I know how to do) but the project does not show how to make a column readonly in edit mode but editable in add mode when using a custom PopUp editor.  So my question is within the custom PopUp editor, how do I make a field readonly in edit mode but editable in add mode?  Do I need two different custom editor templates?  If so, how do I apply one to add and one to edit?

    Thanks,

    Steve




  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 03 Jun 2013 Link to this post

    Hi Timon,


    In my previous answer I tried to explain why the .Editable(false) configuration option was not working when PopUp edit mode is being used.

    To make the column readonly in edit mode but editable in add mode, I would suggest you to use the approach from my last answer and bind to the edit event.
    E.g.
    function edit(e) {
        if (e.model.isNew() == false) {
            $(e.container).find('input[name="ProductName"]').attr("readonly", true);
        }
    }

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 03 Jun 2013 Link to this post

    Ok sorry for the confusion.  I have that code in place but it still does not make the readonly field disabled during edit.  I can still type into the field and submit.  When I try to debug though it never seems to hit the edit event so maybe I have something wrong there.  I am using server binding and razor.  Here is what I have...maybe I am missing something?  Do I need to reference this method somewhere to make sure it gets called?
    .Events(events => events.Edit(
        @<text>
            function (e) {
                if (e.model.isNew() == false) {
                    $("#ID").attr("readonly", true);
                }
            }
        </text>)
    )
  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 03 Jun 2013 Link to this post

    Hi Stephen,


    When a server binding is used, the Grid does not fire most of the client events, including the edit event. In the current scenario you could achieve this on document ready and get the current grid mode through the URL get parameter "Grid-mode".
    E.g.
    $(document).ready(function() {       
        var gridMode = getURLParameter("Grid-mode");
        if (gridMode == "edit") {
            $("#GridPopUp").find('input[name="ProductName"]').attr("readonly", true);
        }
    });
     
    function getURLParameter(name) {
        return decodeURI(
            (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]
        );
    }

    As demonstrated in the example, you could get the window container through it's ID, which follows the pattern GridID + PopUP.

    I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 05 Jun 2013 Link to this post

    Perfect thank you!
  15. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 12 Jun 2013 Link to this post

    Hi,

    I've got one more question on this.  I am trying to do this same thing except for a grid nested within another. So the problem in this case is that the name of the grid is not hardcoded so I don't know how to reference it in the javascript.

    The nested grid is named like this:
    .DetailTemplate(
           @<text>                  
               @(Html.Kendo().Grid(item.User_Facilities)
                   .Name("gridUserFacilities" + item.ID)
    So then in my javascript when I would normally have:
    $(document).ready(function () {
        var gridMode = getURLParameter("gridUserFacilities-mode");
        if (gridMode == "edit") {
            $("#gridUserFacilitiesPopUp").find('input[name="ID"]').attr("disabled", true);
        }
    });
    How do I pass to the javascript the "item.ID" so that I can reference the grid name properly?  Or is there some other way to handle this?

    Thanks,

    Steve



  16. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 14 Jun 2013 Link to this post

    Hi Timon,


    To get the name of the currently edited Grid, you could implement a different logic for parsing the get parameters.
    E.g.
    var query = window.location.search.substring(1);
    var getParameters = query.split("&");
    var gridInfo = getParameters[0];
    var gridName = gridInfo.split("-mode")[0];

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 14 Jun 2013 Link to this post

    Great!  I was able to make this work.  Thanks again!
  18. Vikas
    Vikas avatar
    2 posts
    Member since:
    Jul 2013

    Posted 12 Aug 2013 Link to this post

    Hello,
    I am using Inline editing and i also want to make column editable in create mode and readonly in edit mode
    but the client side event does not fire when i click on edit. It is getting fired only once during grid load ,at that time model is null.

    Below is the sample code:

    @model IEnumerable<CustomerModels>
    @using MvcApplication2_Kendo.Models;
    @{
        ViewBag.Title = "About Us";
    }

    @(Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(Customer => Customer.Name)
                    .Width(200);

            columns.Bound(Customer => Customer.Number);
            columns.Bound(Customer => Customer.Phone);
            columns.Bound(Customer => Customer.DOB).Format("{0:dd-MM-yyyy}").EditorTemplateName("Date");
            columns.Command(command => { command.Edit(); });
        })
        .Filterable(filterable => filterable
                    .Extra(false)
                    .Operators(operators => operators
                        .ForString(str => str.Clear()
                            .StartsWith("Starts with")
                            .IsEqualTo("Is equal to")
                            .IsNotEqualTo("Is not equal to")
                        ))
                    )
        .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)         
                    .Read(read => read.Action("FilterMenuCustomization_Read", "Home"))
                    .Model(model => { model.Id(c => c.Phone); model.Field(c=>c.DOB);})
                    .Update(update => update.Action("FilterMenuCustomization_Update", "Home")).Events(e => e.Change("edit"))
                    .Create(create => create.Action("FilterMenuCustomization_Create", "Home"))
                    )                                   
        .Pageable()
        .Sortable(sortable => sortable
                .AllowUnsort(true)
                .SortMode(GridSortMode.MultipleColumn))
                        .ToolBar(toolbar => toolbar.Create())

        .Resizable(resize => resize.Columns(true))
    )

    <script type="text/javascript">              
                   function edit(e) {
                       if (e.model != null) {
                           if (e.model.isNew() == false) {
                               $(e.container).find('input[name="Name"]').attr("readonly", true);
                           }
                       }                   
                   }
                   </script>

    I am using asp.net mvc razor syntax.
    Any idea as to what i am doing wrong?
  19. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 12 Aug 2013 Link to this post

    Hi Vikas,


    To achieve the described behavior, you should bind to the Edit event of the Grid. The Change event, which is used in in the current implementation is fired when the Grid selection has changed.

    I wish you a great day!
     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. Olga
    Olga avatar
    1 posts
    Member since:
    Apr 2013

    Posted 17 Jan 2014 Link to this post

    Hi,

    In my development I have the same need to set a specific column to "readonly" for an existing records, but have a specific cell editable when a new item is created. I have been following your directions and example but it does not work as desired. Please advice.

    I have a desired column editable, and .Edit() event bind to the grid, but existing records are not set to "readonly".


  21. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 17 Jan 2014 Link to this post

    Hello Olga,


    The current scenario seems to be similar as the one, discussed in the topic. I could not be sure what is the exact reason for the issue, without a look at the code. Could you please share some sample code, so I could inspect further?

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  22. David
    David avatar
    22 posts
    Member since:
    Jun 2013

    Posted 14 Feb 2014 in reply to Dimiter Madjarov Link to this post

    I would like to do the simalur to one of my fields in my grid.
    In my case I would like to set readonly on a field if a check is true.
    So first I was trying to apply the edit to a field on Edit vss. New as this post is doing. But the field is still editable.
    My grid uses a Custom Popup editor as well.
    I tried implementing the  $(docment).ready(function...)
    replacing the "GridPopUP" with my Grid name "clientAttributes"  to use "clientAttributesPopUP" and the field name to my field I would like to disable 'input[name="attributeName"]')
    The rest of the code is the same since I copied it from this post.
    I have the code in a plain script. Do I need to reference this in the Grid definition or should it automatically file when I select either edit or Add?
  23. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 17 Feb 2014 Link to this post

    Hi David,


    It is hard to state the exact cause for the issue from the provided information. Is it possible to provide a small example, demonstrating the exact implementation?

    Regarding the last question, I am not sure what exactly do you mean by "should it automatically fire". Could you elaborate more?

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  24. Pavan
    Pavan avatar
    3 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 in reply to Dimiter Madjarov Link to this post

    Hi,

    Cells in Kendo UI grid appears in editable mode only on click of the cell. But we are looking for the option where we want to have the all rows grid to be edit mode (all cells should appear in edit mode on page load or on click of some button). How can we achieve this in Kendo UI Grid.

    Thanks
  25. Pavan
    Pavan avatar
    3 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 Link to this post

    Hi,

    We are looking for a grid where in all rows in grid should appear in edit mode. But in Kendo UI grid, grid cell will appear in edit mode only after clicking the cell. How can we make all rows in grid appear as editable to the user?

    Thanks
  26. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 31 Jul 2014 Link to this post

    Hi Pavan,


    The current requirement is not supported by the Kendo UI Grid. It supports InCell, InLine and PopUp edit modes.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  27. Pavan
    Pavan avatar
    3 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    Thanks for your quick response. This feature is needed as part of our business requirement. Currently, we are under analysis whether Kendo UI framework fits to our requirements or not. It suits for most of our current requirements. Can you please let us know, whether there is any work around to make all the rows appear in edit mode or not, before we look for other options?

    Thanks,
    Pavan
  28. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 31 Jul 2014 Link to this post

    Hello Pavan,


    There is no workaround for this specific requirement, as it is not supported. Please excuse us for the caused inconvenience.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  29. Amanda
    Amanda avatar
    16 posts
    Member since:
    Jun 2013

    Posted 27 Sep 2015 in reply to Dimiter Madjarov Link to this post

    Hi there,

    Your solution here seems to work for text boxes, but how can it be accomplished for Dropdownlists?

     I have:

    function onComponentGridEditing(arg) {
                if (arg.model.isNew() == false) {
                    arg.container.find("input[name='IDComponentType']").attr("readonly", true);
                }
            }

    If I change IDComponentType to, say, ComponentName, it works.

  30. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 28 Sep 2015 Link to this post

    Hello Amanda,

    The cleanest approach would be to retrieve the DropDownList instance and use the readonly method of it's API.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top