Grid Inline Edit - make fields editable based on the value in the model

4 posts, 0 answers
  1. Veena
    Veena avatar
    14 posts
    Member since:
    Oct 2015

    Posted 13 Apr Link to this post

    I have inline grid, I want to edit one field if the model.ebs is true or edit another field if the model.ebs is false.

     

    @(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);
        columns.Bound(p => p.ReduceUnits);
        columns.Bound(p => p.ReimbursementAmount).Format("{0:c}");
        columns.Command(command =>
        {
            command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });   
    })
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
    .Sortable()   
    .Selectable()
    .Events(e => e.Edit("onPRRServiceGridEdit"))
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequest", new { prrId = @Html.Raw(Json.Encode(Model.PrrId)), serviceType = @Html.Raw(Json.Encode(Model.ServiceType)) }))
    .Model(model =>
    {
        model.Id(p => p.Id); model.Field(p => p.Id).Editable(false);
        model.Field(p => p.ServiceName).Editable(false); //I did not make Units, reduce units column editable false
        model.Field(p => p.ReimbursementAmount).Editable(false);
    })
    .Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequest"))
    ))
     
     
    function onPRRServiceGridEdit(e) {
     
        var isEbsOnly = e.model.IsEbsOnly;
        
            if(isEbsOnly) //I made it disable but I want to close the cell. I dont want to make it editable if the value is true            
                $(e.container).find('input[name="ReduceUnits"]').attr("disabled", true);
             
             else
                $(e.container).find('input[name="Units"]').attr("disabled", true);
      
    }

  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 17 Apr Link to this post

    Hello Veena,

    In order to do this you will need to use a custom EditorTemplate for the field in question. This EditorTemplate should use a visible MVVM binding to toggle the display of either the input field or the text element. For example:

    columns.Bound(p => p.ReduceUnits).EditorTemplateName("ReduceUnitsEditor");

     

    @model decimal
     
    <div data-bind="visible: IsEbsOnly">
        @(Html.Kendo().NumericTextBoxFor(m => m)/*..*/)
    </div>
     
    <span data-bind="invisible: IsEbsOnly, text: ReduceUnits">
    </span>

     

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Veena
    Veena avatar
    14 posts
    Member since:
    Oct 2015

    Posted 26 Apr Link to this post

     any help or any suggestions
  5. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 26 Apr Link to this post

    Hello Veena,

    It seems that there has been a glitch in the system. We have answered your question at 18-Apr-2016 but it seems that it has not appeared in the forums. However, I'm pasting the reply once again:

    In order to do this you will need to use a custom EditorTemplate for the field in question. This EditorTemplate should use a visible MVVM binding to toggle the display of either the input field or the text element. For example:

    columns.Bound(p => p.ReduceUnits).EditorTemplateName("ReduceUnitsEditor");

     

    @model decimal
     
    <div data-bind="visible: IsEbsOnly">
        @(Html.Kendo().NumericTextBoxFor(m => m)/*..*/)
    </div>
     
    <span data-bind="invisible: IsEbsOnly, text: ReduceUnits">
    </span>

     

     

    Regards,
    Rosen
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready