CODEWITHSUNDEEP
javascriptasp.net-mvc-4checkboxkendo-gridkendo-asp.net-mvc
newbie
newbie

Reputation: 173

Enable or disable kendo grid columns based on another column value

I have a kendo grid and I have a check box in it, which is rendered using the client template. If the checkbox is checked then I want the column adjacent to it enabled and if it's not checked then the column should be disabled that is the user should not be able to edit it or type into it. I tried doing it by binding an edit event to the grid but the edit event is called only when the grid goes to edit mode and the function is not called while making changes to the grid. Any guidance is hugely appreciated.

Code snippet:

debugger;

function OnGridChange(e) {

    console.log("grid edit mode",e);

    var model = $("#AppAccountInternalGrid").data("kendoGrid");

    console.log("data source edit mode");

    if (e.model.Roll == "true")


        $(e.container).find('input[name="RollupName"]').attr("disabled", false);

    else

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


}


       @(Html.Kendo().Grid(Model.App_Client_Mapping)
    .Name("AppAccountInternalGrid")
   .Events(ev=>ev.Edit("OnGridChange"))

.Columns(columns =>
{

    columns.Bound(p => p.AccountMappingID).Hidden().Title("AccountMappingID").Width(130);


    columns.Bound(p => p.ExternalAccount).Title("ExternalAccount").Width(150);         

    columns.Bound(p => p.Roll).ClientTemplate("<input  onchange='OnGridChange(#=AccountMappingID#)' type='checkbox' " +
                            "#=Roll? 'checked=checked' : '' #" +
                            "disabled='disabled' </input>").Width(150);


    columns.Bound(p => p.RollupName).Title("RollupName").Width(150).HtmlAttributes(new{@class="disabled"});

    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);



})


     .Editable(editable => editable.Mode(GridEditMode.InLine))          
     .ColumnMenu()
     .DataSource(dataSource => dataSource
             .Ajax()
      //.Events(ev=>ev.("OnGridChange"))
        .PageSize(50)
        .Model(model =>
        {
            model.Id(p => p.AccountMappingID);


        }


        )

     .Update(update => update.Action("Editing_Update", "AppAccounts", new { clientid = @clientid }))

 )



            )

Roll is of bool property in the model, rendering it as a checkbox. Initially, the checkboxes aren't ticked so the user can't edit the rollupname. But when the user enters edit mode and ticks the checkbox then the user should be able to edit the rollname. By default, I want the rollupname to be disabled. It should be enabled on checking the checkbox.

Upvotes: 3

Views: 8940

Answers (2)

Anastasios Selmani
Anastasios Selmani

Reputation: 3699

I had a similar case in a kendo grid. One thing you should know is that when the grid gets in edit mode the fields of the row are focused. From that point of view you could do what I did.

A. When the grid enters the edit mode your checkbox can be called with the name of the field (Roll in your example). In the edit event you should check if the Roll element is checked. The value you will get will be tho row's value. At that point you can just set your input (I'm guessing RollUpName) to disabled

$("#RollUpName").prop("disabled", true);

In order to work dynamically you should add an event listener on the change event of your checkboxes. Possibly by using some class and enter it to your client template. On every change of the checkbox, the checkbox that will have changed will be in the editable row. At that point you can change the editable model of the RollUpName the same way.

Upvotes: 2

Keith
Keith

Reputation: 4147

I use AJAX and javascript to build my Kendo Grid, but basically what you want to do is use a template to build your checkbox column and add a class. Then do a check anytime someone checks to hide/show your column. Here is an example:

$(function () {
$("#grid").kendoGrid({
  columns: [
    { field: "checkbox", template: '<input type="checkbox" style="margin-left: 4px;" class="checkone" />', editable: "false"},
    { field: "RollUp" },
    { field: "age" }
  ],
  editable: false,
  dataSource: [
      { RollUp: "Jane Doe", age: 30 },
      { RollUp: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
  $('.checkone').on('click', function(){
    var checkedBox = $(this).prop("checked");
    if(checkedBox){
       $("#grid").data("kendoGrid").setOptions({ editable: true });
    }else{
       $("#grid").data("kendoGrid").setOptions({ editable: false });
    }
  });
});
});

Let me know if you have any questions.

Upvotes: 1

Related Questions