Geek Answers Handbook

Change the read-only property of a telerik grid column based on the drop-down list of another column

I use telerik grid in MVC

@(Html.Telerik().Grid<CSSI.VUE.Entities.ICW>()
.Columns(columns =>
                    {
                        columns.Bound(a => a.DRPDATA).Width(25).ClientTemplate("<#= DRPDATAtext #>").Title("manually/system");
                        columns.Bound(a => a.DATAVALUE.Width(15).Title("Amount ($)").HtmlAttributes(new { style = "text-align:right;" }).ReadOnly(true).Format("{0:###,##0.00}");
                    }

The first column is a yes / no drop-down list, and the second column is a text field with a read-only property. I want to change this if the user selects Yes in the first column, then the second text field of the column should not be read-only, the user can enter the amount manually. but if the user selects "No" from the drop-down list, the text field of the second column should be in read-only mode. the system will automatically take the amount from the database.

Is there a better way to get this feature, be it jQuery or MVC. please, help

I tried this with the jQuery function. but it does not work.

function Dropdown_onChange(e) {
var gridData = $('#elgrd').data("tGrid");
var column = gridData.columns[1];
column.readonly = false;
}
+4
4

. onChange

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).Title("Product Name");
        columns.Bound(p => p.UnitPrice).Title("Unit Price");
        columns.Bound(p => p.UnitsInStock).Title("Units In Stock");
    })
    .Pageable()
    .Sortable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        .Type(GridSelectionType.Cell))
    .Events(events => events.Change("onChange"))      
)

JS :

<script type="text/javascript">

function onChange(arg) {
        var selected = $.map(this.select(), function (item) {

            //check for whichever column the select is supposed to be in (1 as a place holder)              
            if ($(item).parent().children().index($(item)) == 1) {
                if ($(item).children().val() == 'YES') { //provided there is only the <select> in that <td>, otherwise you would need to drill down to get at the <select>  
                    var nextColumn = $(item).next(); //get next column cell value
                    nextColumn.readonly = true;
                }
                else {
                    var nextColumn = $(item).next();
                    nextColumn.readonly = false;
                }
            }
        });
    }

telerik , - .

+1

-

function Dropdown_onChange(e) { 
    var val = $(e.target).val();
    $(e.target).parents('td').next('td').find('input').attr('disabled', val !== "YES");
};
0

rad. jQuery, , , . Telerik.

$('.rcbInput').on('change', function(){ if($(this).val() != 'yes'){
$(this).closest('td').next('td').find('.rgInput').disable();
}
});

Telerik, , telerik:

   disable: function() {
      this.set_enabled(false);
      this._textBoxElement.disabled = "disabled";
      this.updateCssClass();
      this.updateClientState();
      this.raise_disable(Sys.EventArgs.Empty);
      },
   enable: function() {
      this.set_enabled(true);
      this._textBoxElement.disabled = "";
      this.updateCssClass();
      this.updateClientState();
      this.raise_enable(Sys.EventArgs.Empty);
     },

. Telerik 1000 JavaScript . - , Telerik.

, . , .

0

Telerik edit , . <td> :

JavaScript

$(document).ready(function () {
        $("#elgrd").kendoGrid({
            edit: function(e) {
                var target = $(e.container).closest("td").next();
                var isEnabled = false; // run your logic to determine the enabled state
                target.enable(isEnabled);
            }
        });
    }
);
0

More articles:


All Articles