Disable columns dynamically in grid edit - inline mode, when the value of another column changes

[Rajesh]

I have a column - Mandatory (say a drop down list)

I have 2 optional columns - OptionalColumn1 and OptionalColumn2

Now when the user edits a row, if the value of the Mandatory column is, lets say 2, i do not want OptionalCOlumn1 and OptionalColumn2 to be editable, else they should be ediatble. 

I tried disabling the columns by trapping the valueChange event of the Mandatory column. However, this approach is not feasible, as the controls for OptionalColumn1 and OptionalColumn2 are not even rendered (the cells simply display the data in a <td>.

I am considering trapping the focus event for OptionalColumn1 and OptionalColumn2, and disabling the controls based on the value of Mandatory column. However, this seems like an ugly hack.

Any ideas?

[Rajesh]

Well the idea outlined above did work. There were a few hacks involved (e.g. when disabling a column, the control needs to be created first, as no way to refresh a row, am clearing the data for those columns by setting the innerHTML of the <td> corresponding to the column etc.... ) here's the code

function Grid_onEdit(e) {

    var dataItem = e.dataItem;

    if ($(e.cell).find('#Mandatory').length > 0) {

        $('#Mandatory').bind('valueChange', function (e) {

            //alert("Bound!!");

            if (this.value != 2) {

                dataItem.Dependent= null;

                $('.t-grid-edit-row').each(function () {

                    this.cells[9].innerHTML = ""; //update the value displayed for the dependent column

                });

 

            }

        });

    }

 

    }

    if ($(e.cell).find('#Dependent').length > 0) {

        $('#Dependent').bind('focus', function (e) {//disable the control as soon as it receives focus based on the value of Mandatory

            //alert("Bound!!");

            if (dataItem.Mandatory!= 2) {

                $('#Dependent').attr('disabled', 'disabled');

                this.value = "";

                dataItem.Dependent= null;

            }

            else {

                $('#Dependent').attr('disabled', '');

            }

        });

    }

 

}

Will really appreciate a neater solution!

[mohammed]

I am trying to implement some what similar requirements in MVC gird. I need some help here.

In my case I dont have set # of editable columns at design time. I need to set the editable grid cols at run time depending on how many columns i get from result set that will populate the grid.

Any ideas how to implement this?

[Daniel]

Hello,

Generally speaking, disabling editing is not supported but can be achieved by manipulating the editor function in the column object for the particular member e.g.

function disableEditing(member) {
    var grid = $("#Grid").data("tGrid");
    // Get the column for the particular member
    var column = grid.columnFromMember(member);
    // save in another paramter the edit function so it can be used later
    column.saveEditor = column.edit;
    // assign the display function so the diplay template will be used when entering edit mode
    column.edit = column.display;
}

I am not sure if I understand the exact scenario with setting the editable columns at run time. Could you provide more information about it?

Kind regards,
Daniel
the Telerik team

[mohammed]

I need excel like ediatble grid as shown in below telerik sample. In my case, grid column names are dynamic, PLUS number of grid cols are also dynamic.

http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch

[Daniel]

Hello again,

Binding to different number of columns and properties can be achieved by using the approach shown in the binding to dynamic objects code-library but InCell and InLine editing are not supported in this scenario because the editors can't be generated.
Disabling editing for certain columns in InCell editing is also not supported, but can be achieved by manipulating the column's readonly property on the client. For example:

var grid = $("#Grid").data("tGrid");
var column = grid.columnFromMember("member");
column.readonly = true;

Please note that editing should be enabled on the server for the particular column in order for the editor to be created and serialized.

Regards,
Daniel
the Telerik team

[Syed]

As you mention that InCell and Inline editing is not supported in Dynamic Object Binding to Grid. I am trying to implement Edit function in Such a grid. 
              I am trying to implement two different solution. Any help in one will be good enough.
              1)  For InForm Editing to work we need the the number columns and there types so we can create the form in Editor Templetes I have followed this Link. But in our Scenario we know the types of column(String) but we don't know there name or number. Is there a way to access the Model bind to the Grid in the Editor Template so that we run a loop through it to create the number of TextField at run-time?

             2)  In the second suggested solution I tried to implement Textfiled in the Grid using ClientTemplate in the column which need to be Editable. Here is My grid Code.

<%= Html.Telerik().Grid(Model)

                  .Name("GridDynamic")

                  .HtmlAttributes(new { style = "display:none;" })

                  .DataKeys(keys => keys.Add("class_student_id"))

                            .DataBinding(bindings => bindings.Ajax().Select("ClassMarkSheetDynamic_Select", "Exam"))

                  .Columns(columns =>

                   {

                       if (Model != null)

                       {

                           columns.Bound(Model.Columns[0].DataType, Model.Columns[0].ColumnName); 

                           for (int i = 1; i < Model.Columns.Count - 4; i++)

                           {

                               for (int rows = 0; rows < Model.Rows.Count; rows++)

                               {

                                   if(Some Condition Here){

                                       columns.Bound(Model.Columns[i].ColumnName).ClientTemplate("<input type='text' id='<#=class_student_id #>' class='_grid_marksheet_input' value='<#=" + Model.Columns[i].ColumnName + "#>' />");

                                   }else
                                                                                              {
                                                                                                   columns.Bound(Model.Columns[i].ColumnName);
                                                                                               }

                               }

                              );

                           }

                       

                       }

                   })

         

                       .ClientEvents(events => { events.OnError("OnTelerikError"); events.OnDataBinding("OnGridDynamic_OnDataBinding"); })

       

                       .Sortable()

                           

                      // .Filterable()

                       .Groupable()

                      %>

.First Column I have Student Name Column which is constant. Then Number of Subject column and then I have 4 Id Columns.
I need a condition which help me escape the ClientTemplate if the a particular column(Subject) is not available in the Model at run-time.
I am Initializing the grid with all the columns(all the subject).

Your Help is Appreciated.
Thanks

[Daniel]

Hello Syed,

Straight to your questions:

1. You can pass the DataTable columns to the editor template by using the AdditionalViewData option from the Editable configuration e.g.
   

   .Editable(editable => editable.TemplateName("ProductItem")
       .AdditionalViewData(new {TableColumns = Model.Data.Columns })
       .Mode(GridEditMode.InForm))
   
   //Editor template
   <%
       var columns = ViewData["TableColumns"] as System.Data.DataColumnCollection;
   %>

2. I am not sure if I understand correctly this question. How should the ClientTemplate be escaped and what is the dependency between the row's count and the column binding.
   

Regards,
Daniel
the Telerik team

[Syed]

Thanks for the Speedy Reply.
1)While Implementing The InForm Editing. I have got two set backs.

       a) As I was following your reply When using the AdditionalViewData option from
           the Editable. My telerik extension UI did not recognized this method. I am getting
           the error as 
             "Telerik.Web.Mvc.UI.Fluent.GridEditingSettingBuilder<System.Data.DataRowView>
               does not contain any definition for AdditionalViewData and no extension method
               AdditionalViewData excepting first argu...."

       b)While working with InForm editing in grid I came across with an error
          "A circular reference was detected while serializing an object of type
             'System.Data.DataRowView'" 
        I removed this error by Following this link and apply the  
       Telerik-Extensions-for-ASPNET-MVC-2011-1-319-hotfix. which includes upgrading
        my script. Is there any other way to remove this error? because I am extending
        the current application and I would like to avoid the upgrading of script.

2) I am fairly new to the Telerik Extensions. My question May sound totally ridiculous. As I
mention in my previous post that I am initializing the grid with all the possible column
.e.g.Initializing grid with all the subject of the school. Then if Particular subject(column)
 doesn't exist for a class(runtime Model) then I would like to avoid creating
ClientTemplate for that column(See Attach Additional.png file). Right now i am getting
 error(See Attach file Undefined.png). As That column not available in dynamic model
 at runtime. If I ignore error I am getting this(See Attach file result.png). 


Thanks
Eagerly Awaiting for your response
Syed
           

[Daniel]

Hello Syed,

The AdditionalViewData method is available since the Q3 2011 release and you should update your version in order to use it. Another option would be to add the column collection to the ViewContext ViewData which should be available from the editor template e.g.

<%
 ViewContext.ViewData["columns"] = Model.Data.Columns;
%>

Regarding the circular exception - you can update only the assembly and rename the folder or use the ScriptRegistrar DefaultPath method to reference the old script folder but this is not a tested configuration so we cannot guarantee there won't be any problems.
Regarding your other question -  Reflection can be used to determine if a class contains a property with the name of the column:

Type myType = typeof(MyClass);
var property =  myType.GetProperty("MyProperty");
if (property != null)
{

Kind regards,
Daniel
the Telerik team

[shanker bangari]

please give clearly where i added view context.