Make certain cells in a grid row read only based on the value of a cell in the row

[Corey Thompson]

Hi. A colleague of mine wrote you guys last week about an issue we are having.

https://www.syncfusion.com/forums/126212/make-certain-cells-in-a-grid-row-read-only-based-on-the-value-of-a-cell-in-the-row

We are still having this issue...

We took the sample you gave us and implemented it as such:

VIEW

@(Html.EJ().Grid("pifContributionsGrid")

.Datasource(ds => ds.Json((IEnumerable<object>)((ContributionQuestionsViewModel)Model.CurrentStep).ContributionList).UpdateURL("PIFBudgetItemUpdate").InsertURL("PIFBudgetItemInsert").RemoveURL("PIFBudgetItemDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});

})

.AllowPaging()

.IsResponsive()

.EnableResponsiveRow()

.Columns(col =>

{

col.Field("Name").HeaderText("Name").EditTemplate(a => { a.Create("ac_contributor_create").Read("ac_contributor_read").Write("ac_contributor_write"); }).TextAlign(TextAlign.Right).Width(90).Add();

col.Field("Territory").HeaderText("Territory").Width(100).IsPrimaryKey(true).EditType(EditingType.String).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();

col.Field("FundingSource").HeaderText("Funding").TextAlign(TextAlign.Right).Priority(2).EditType(EditingType.Dropdown).Width(80).ValidationRules(v => v.AddRule("required", true)).Add();

col.Field("Contribution").HeaderText("Contribution").TextAlign(TextAlign.Right).Width(80).Priority(3).EditType(EditingType.Numeric).Format("{0:C}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 }).ValidationRules(v => v.AddRule("range", "[0,10000]").AddRule("required", true)).Add();

col.Field("IsHost").HeaderText("IsHostRep").Priority(4).Add();

col.Field("District").Visible(false).Add();

col.Field("Repfn").Visible(false).Add();

col.Field("Repmi").Visible(false).Add();

col.Field("Repln").Visible(false).Add();

col.Field("EnterDate").Visible(false).Add();

col.Field("Region").Visible(false).Add();

})

.ClientSideEvents(eve => { eve.ActionBegin("begin").EndEdit("endAdd").EndAdd("endAdd").ActionComplete("contributor_name_autocomplete"); }

))

JS

function contributor_name_autocomplete(args)

{

//GetTerritoryRepsByName

var db = $("#pifContributionsGrid").ejGrid("option", "dataSource");

$("#pifContributionsGridName").ejAutocomplete(

{

dataSource: db,

fields: { text: "DisplayName", key: "Territory" },

select: function (argument)

{

var territory = argument.key;

var productcounter = $("#CurrentPIF_ProductCounter").val();

$("#pifContributionsGridTerritory").val(territory);

//Update the funding drop down with the correct funding types for the entered rep

$.ajax({

url: 'GetPIFFunding',

type: 'POST',

data: { territory: territory, productcounter: productcounter, IsHostRep: false },

success: function (result)

{

//$("#pifContributionsGridFundingSource").ejDropDownList("option", "dataSource", ej.parseJSON(result));

$("#pifContributionsGridFundingSource").ejDropDownList(

{

dataSource: ej.parseJSON(result),

fields: { text: "FundingSource" }

}

);

}

})

}

});

//Disable the fields for host rep

if (args.requestType == "beginedit") {

var data = args.row.find("input");

for (var i = 0 ; i < data.length ; i++) {

if (data[i].name == "IsHost" && parseInt($(data[i]).attr("value")) == 1) {

$(data[i]).addClass("e-disable").attr("disabled", "disabled");

}

}

}

}

We tried your sample, and it worked beautifully. But when we tried to use your code in ours, the "data" array comes back as 0 length. Can you help us? I'm so confused.

[Prasanna Kumar Viswanathan]

Hi Corey, 

Thanks for contacting Syncfusion support. 

We checked with your code example in our sample and we can make the cell as non-editable based on its value. 

Find the code example, screenshot and sample: 

@(Html.EJ().Grid<object>("FlatGrid") 

    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 

    --------------------------------------------- 

   .IsResponsive() 

    .EnableResponsiveRow() 

    .Columns(col => 

     { 

       col.Field("CustomerID").HeaderText("Customer ID").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add(); 

       col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add(); 

       col.Field("ShipCity").HeaderText("Ship City").TextAlign(TextAlign.Right).Priority(2).EditType(EditingType.Dropdown).Width(80).ValidationRules(v => v.AddRule("required", true)).Add(); 

       col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Priority(3).EditType(EditingType.Numeric).Format("{0:C}").ValidationRules(v => v.AddRule("range", "[0,10000]").AddRule("required", true)).Add(); 

       col.Field("EmployeeID").HeaderText("Employee ID").Priority(4).Add(); 

       col.Field("District").Visible(false).Add(); 

             ------------------------------------- 

     }) 

     .ClientSideEvents(eve => { eve.ActionComplete("beginEdit"); }) 

    ) 

 

----------------------------------------- 

var db = $("#FlatGrid").ejGrid("option", "dataSource"); 

       var states = [ 

                 { index: "s1", DisplayName: "VINET" }, { index: "s2", DisplayName: "TOMSP" }, 

                 { index: "s3", DisplayName: "HANAR" }, { index: "s4", DisplayName: "VICTE" }, 

                 { index: "s5", DisplayName: "SUPRD" }, { index: "s6", DisplayName: "CHOPS" }, 

                 { index: "s7", DisplayName: "RICSU" }, 

                 { index: "s8", DisplayName: "WELLI" }, 

                 { index: "s9", DisplayName: "HILAA" }, 

                  

       ]; 

       $("#FlatGridCustomerID").ejAutocomplete( 

      { 

        dataSource: states, 

        fields: { text: "DisplayName", key: "Territory" }, 

        select: function (argument) { 

           var territory = argument.key; 

          

         //Update the funding drop down with the correct funding types for the entered rep 

     } 

}); 

       //Disable the fields for host rep 

       if (args.requestType == "beginedit") { 

           var data = args.row.find("input"); 

           for (var i = 0 ; i < data.length ; i++) { 

               if (data[i].name == "EmployeeID" && parseInt($(data[i]).attr("value")) == 1) { 

                   $(data[i]).addClass("e-disable").attr("disabled", "disabled"); 

               } 

           } 

       } 

    } 

Screenshot: 

 

Sample: http://www.syncfusion.com/downloads/support/forum/126242/ze/Sample145862_(2)-1576637404 

To find the root cause of the issue we need the following details. 

1. Do you face any script error in the console while editing the Grid? If Yes, Share the stackrace of an issue. 

2. You have mentioned that “data” array as 0 while editing the Grid. So, please ensure that the particular row is in editing state. 

3. Share the screenshot of an issue. 

4. If possible, replicate the issue in the attached sample. 

5. Essential Studio Version details. 

Note : In actionComplete event that you have check the condition as 1 for the “isHost” column. So, please ensure that you have binded integer values for the particular column. 

Regards, 

Prasanna Kumar N.S.V