Column readonly in edit mode but editable in add mode?

[T.]

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!

[T.]

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

[Dario]

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);

[Dimiter Madjarov]

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

[T.]

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!

[Dimiter Madjarov]

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

[Stephen]

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.

[Dimiter Madjarov]

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

[Stephen]

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.

[Dimiter Madjarov]

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

[Stephen]

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

[Dimiter Madjarov]

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

[Stephen]

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>)
)

[Dimiter Madjarov]

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

[Stephen]

Perfect thank you!

[Stephen]

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

[Dimiter Madjarov]

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

[Stephen]

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

[Vikas]

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?

[Dimiter Madjarov]

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

[Olga]

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

[Dimiter Madjarov]

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

[David]

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?

[Dimiter Madjarov]

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

[Pavan]

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

[Pavan]

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

[Dimiter Madjarov]

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

 

 

[Pavan]

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

[Dimiter Madjarov]

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

 

 

[Amanda]

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.

[Dimiter Madjarov]

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

 

 

[Veena]

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.

        @(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()
            .Name("PRRServiceGrid" )
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Hidden(true);
                columns.Bound(p => p.IsEbsOnly).Hidden(true);
                columns.Bound(p => p.ServiceName);
                columns.Bound(p => p.Units).EditorTemplateName("Integer");
                columns.Bound(p => p.BHFormType);
                columns.Bound(p => p.ReduceUnits).EditorTemplateName("Integer");
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
                }).Width(270);
            })
            .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
            .Events(e => e.Edit("onPRRServiceGridEdit"))
            .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequestProvider"))
            .Model(model =>
            {
                model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); model.Field(p => p.ServiceName).Editable(false); model.Field(p => p.BHFormType).Editable(false);
            })
            .Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequestProvider"))
            ))


function onPRRServiceGridEdit(e) {

    var bhFormType = e.model.BHFormType;
    var isEbsOnly = e.model.IsEbsOnly;

    if (bhFormType == null && isEbsOnly)
        $(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);

    else
        $(e.container).find('input[name="Units"]').attr("disabled", true);
}

[Veena]

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.

 

  @(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()
            .Name("PRRServiceGrid" )
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Hidden(true);
                columns.Bound(p => p.IsEbsOnly).Hidden(true);
                columns.Bound(p => p.ServiceName);
                columns.Bound(p => p.Units).EditorTemplateName("Integer");
                columns.Bound(p => p.BHFormType);
                columns.Bound(p => p.ReduceUnits).EditorTemplateName("Integer");
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
                }).Width(270);
            })
            .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
            .Events(e => e.Edit("onPRRServiceGridEdit"))
            .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequestProvider"))
            .Model(model =>
            {
                model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); model.Field(p => p.ServiceName).Editable(false); model.Field(p => p.BHFormType).Editable(false);
            })
            .Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequestProvider"))
            ))


function onPRRServiceGridEdit(e) {

    var bhFormType = e.model.BHFormType;
    var isEbsOnly = e.model.IsEbsOnly;

    if (bhFormType == null && isEbsOnly)
        $(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);

    else
        $(e.container).find('input[name="Units"]').attr("disabled", true);
}

[Veena]

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.

  @(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()
            .Name("PRRServiceGrid" )
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Hidden(true);
                columns.Bound(p => p.IsEbsOnly).Hidden(true);
                columns.Bound(p => p.ServiceName);
                columns.Bound(p => p.Units).EditorTemplateName("Integer");
                columns.Bound(p => p.BHFormType);
                columns.Bound(p => p.ReduceUnits).EditorTemplateName("Integer");
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
                }).Width(270);
            })
            .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
            .Events(e => e.Edit("onPRRServiceGridEdit"))
            .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequestProvider"))
            .Model(model =>
            {
                model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); model.Field(p => p.ServiceName).Editable(false); model.Field(p => p.BHFormType).Editable(false);
            })
            .Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequestProvider"))
            ))


function onPRRServiceGridEdit(e) {

    var bhFormType = e.model.BHFormType;
    var isEbsOnly = e.model.IsEbsOnly;

    if (bhFormType == null && isEbsOnly)
        $(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);

    else
        $(e.container).find('input[name="Units"]').attr("disabled", true);
}

[Dimiter Madjarov]

Hello Veena,

In the case when a widget is used as an editor template you should retrieve it's instance and disable it via it's API.
E.g.

$(e.container).find('input[name="Units"]').data("kendoNumericTextBox").enable(false);

Regards,
Dimiter Madjarov
Telerik

 

 

[Veena]

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

[Dimiter Madjarov]

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

 

 

[Veena]

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

 

Thanks,

Veena

[Barry]

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
 

[Barry]

Idon’t know if you’re using columns or not so I gave readOnly: true option to all cells and then load a renderer. This renderer if he gets the last row makes it editable. <a href="https://get-shareit.com">get-shareit.com</a> <a href="https://get-vidmateapk.com">get-vidmateapk.com</a>
 

[Silviya Stoyanova]

Hello Barry,

I would suggest the following Knowledge Base article on this topic: 

Allow Editing When Creating New Records for the New Records Only

I hope this will help achieve the required behavior.

Kind Regards, Silviya Stoyanova Progress Telerik

[Carlton]

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

[Alex Hajigeorgieva]

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

[raresky]

thanx for sharing the article.

[raresky]

Even your answer is not showing up for me. I got an email with your answer and that works perfect. mybk-experience.onl www.mcdvoicesurvey.onl

[Anton Mironov]

Hello Raresky,

I am glad that the provided approach is a working decision for the needs of your application.

If further assistance is needed, do not hesitate to contact me and the team.

 

Kind Regards,
Anton Mironov
Progress Telerik