lundi 23 octobre 2017

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:

 <script>

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


    }

</script>


           @(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.ClientID).Hidden();

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

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

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

        columns.ForeignKey(p => p.Level1ID, (System.Collections.IEnumerable)ViewData["level1"], "AccountInternalLevelID", "AccountInternalLevel").Title("Level 1").Width(150).HtmlAttributes(new { id = "Level1Dropdown" });

        columns.ForeignKey(p => p.Level2ID, (System.Collections.IEnumerable)ViewData["level2"], "AccountInternalLevelID", "AccountInternalLevel").Title("Level 2").Width(150).HtmlAttributes(new { id = "Level2Dropdown" });

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



    })

         .HtmlAttributes(new { style = "height: 550px;" })
         .Groupable()
         .Editable(editable => editable.Mode(GridEditMode.InLine))
         .Reorderable(r => r.Columns(true))
         .Sortable()
         .ColumnMenu()
         .Scrollable(scr => scr.Height(430))
         .Filterable()
         .DataSource(dataSource => dataSource
                 .Ajax()
          //.Events(ev=>ev.("OnGridChange"))
            .PageSize(50)
            .Model(model =>
            {
                model.Id(p => p.AccountMappingID);
                model.Field(p => p.AccountsInternalID).Editable(false);
                model.Field(p => p.AccountsExternalID).Editable(false);



            }


            )

         .Update(update => update.Action("Editing_Update", "AppAccounts", new { clientid = @clientid }))
         .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
         .PageSize(20)
     )

            .Pageable(pageable => pageable
                     .Refresh(true)
                    .Input(true)
                    .Numeric(false)
                 )
   .Selectable()

                )

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.




Aucun commentaire:

Enregistrer un commentaire