Column readonly in edit mode but editable in add mode?

this is a good answer, cause it does not change the feel, the readonly mode still changes the style and looks like you can edit it but have a bug. You can target a different HTML element in case you do not have a standard input but something else like a select or span or whatever, you can just target the main TD like this $('td[data-container-for="Name"]').html(e.model.Name);

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!

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?
The Editable(false) doesn't seem to do anything.  The grid is still editable and I can add and edit both columns.

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

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.

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.

Regards,
Dimiter Madjarov
Telerik

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

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.

 

Regards,
Dimiter Madjarov
Telerik

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?

Perfect thank you!

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:
So then in my javascript when I would normally have:
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

Hi Timon,


To get the name of the currently edited Grid, you could implement a different logic for parsing the get parameters.
E.g.

 

Regards,
Dimiter Madjarov
Telerik

Great!  I was able to make this work.  Thanks again!

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?

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

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".

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

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?

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

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

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

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

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

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

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.

Hi Dimiter,

I have the same scenario but I have Integer editor template for the column. It is disable but if I click up/down arrows, the values is changing. I want to make sure the user can not change the value if the condition is satisfied.

Hi Dimiter,

I have the same issue. But I have integer editor template on the column. The column is disabled but when click up/down arrows the values is changing. I want to make sure user can not change the value if the condition is met.

 

Hi Dimiter,

I have the same issue. But I have integer editor template on the column. The column is disabled but when click up/down arrows the values is changing. I want to make sure user can not change the value if the condition is met.

Hi Dimiter,

It seems there is glitch in the system. No matter how many times i post it will not show up for me. Even your answer is not showing up for me. I got an email with your answer and that works perfect. Thanks.

 

Thanks,

Veena

Hello Veena,

The answers are shown on the second page of the current thread. Is this not the case on your end?

Regards,
Dimiter Madjarov
Telerik

That is true. There is second page. My bad.

 

Thanks,

Veena

I am trying to make my column read only in edit mood but when key in the spare row (new row) the read only column should be able to accept the input value. https://get-shareit.com
https://get-vidmateapk.com
 

I am following you way and put the renderer into columns,
but when deal with check box it will never enable it back.

Hi, Carlton,

The knowledge base article features a checkbox for the Discontinued property which is enabled both when adding new items and when editing.

Can you share an example to illustrate your scenario so we can investigate the specific configuration?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik