We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Cannot edit field with column template

Cannot edit field with column template

Hi

I have just updated to version 14.2.0.26 and editing a field with a column template now doesn't work.
It was working fine with a patch you supplied for the previous version ref Forum: 123605- Cannot edit field with column template.
The textarea renders correctly but the edited value just returns null in the model.


my grid column
 col.Field("Comment").HeaderText("Comment").Width(200).Template("#columnTemplate").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();

Template

<script type="text/x-jsrender" id="columnTemplate">

<textarea rows="4" cols="20">{{:Comment}}</textarea>

</script>   

Edit template
function create() {
 return $(" <div class='e-field'><textarea rows=3 style='width: 100%;'></textarea></div>  "); //creating a textarea
}

 function write(args) {
args.element.find("textarea").val(args.rowdata["Comment"]).attr("name", "Comment"); //Writing the edited text value
}

function read(args) {
 return args.val();//Getting the Edited text value
}


Regards

Martin


7 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 1, 2016 07:14 AM UTC

Hi Martin,  

We are able to reproduce the problem at our end.  

In the version 14.2.0.26, we have updated some changes in the behavior of the editTemplate which breaks the previously provided solution. To handle the updated changes, please update the write event of the editTemplate as follows. 

@(Html.EJ().Grid<object>("Grid") 
    .Datasource((IEnumerable<object>)ViewBag.dataSource) 
    .AllowPaging() 
        ... .  
    .Columns(col => 
    { 
        col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
             . .. .  
        col.Field("ShipAddress") 
            .Template("<textarea rows='4' style='width:100%' cols=95%>{{:ShipAddress}}</textarea>") 
            .EditTemplate(a => 
            { 
                a.Create("create") 
                 .Read("read") 
                 .Write("write"); 
            }).Width(100).Add(); 
    }) 
) 
 
<script type="text/javascript"> 
    function create() { 
        return $(" <div class='e-field'><textarea rows=3 style='width: 100%;'></textarea></div>  "); //creating a textarea 
    } 
    function write(args) { 
        //add an id attribute to textarea and name them as "GridID" + "ColumnName" 
        //id==>GridShipContry 
        args.element.find("textarea").val(args.rowdata["ShipAddress"]).attr("id", args.element.attr("id")).attr("name", "ShipAddress"); //Writing the edited text value 
    } 
    function read(args) { 
        return args.val();//Getting the Edited text value 
    } 
</script> 

We have prepared a sample that can downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 


MH Martin Hoyle August 1, 2016 09:29 AM UTC

Hi

Thanks for that it has solved the problem

Another slightly odd problem - I have a Boolean column

col.Field("Follow_up_complete").HeaderText("Complete").Type("boolean").EditType(EditingType.Boolean).Width(80).Add();

If I add this column as the last column of my grid when I edit the row ( dialog editing) a checkbox is not displayed ( nothing is displayed just the label).
If I move the column to any other position all is fine.

Regards

Martin



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 2, 2016 12:16 PM UTC

Hi Martin, 

We are able to reproduce the problem after binding the Boolean column in the Grid.  

The cause of the problem is the div element holds the “e-field” in the solution. Because of this, Grid considers div and text area as a separate fields which results in hiding the checkbox(last column). Instead of wrapping the textArea element within the div.e-field, we suggest to directly return the textArea.e-field element in the create event. Refer to the following code example. 

@(Html.EJ().Grid<object>("Grid") 
    .Datasource((IEnumerable<object>)ViewBag.dataSource) 
            . . . 
    .Columns(col => 
    { 
              . . . . 
        col.Field("ShipCity") 
            .Template("<textarea rows='4' style='width:100%' cols=95%>{{:ShipCity}}</textarea>") 
            .EditTemplate(a =>  
            {  
                a.Create("create") 
                    .Read("read") 
                    .Write("write");  
            }).Width(100).Add(); 
        col.Field("Verified").Type("boolean").EditType(EditingType.Boolean).Width(100).Add(); 
    }) 
) 
 
<script type="text/javascript"> 
    function create() { 
        return $("<textarea class='e-field' rows=3 style='width: 100%;'></textarea>"); //creating a textarea 
    } 
    function write(args) { 
        //add an id attribute to textarea and name them as "GridID" + "ColumnName" 
        //id==>GridShipContry 
        args.element.val(args.rowdata["ShipCity"]).attr("id", args.element.attr("id")).attr("name", "ShipCity"); //Writing the edited text value 
    } 
    function read(args) { 
        return args.val();//Getting the Edited text value 
    } 
</script> 

We have also modified the sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 


MH Martin Hoyle August 2, 2016 04:02 PM UTC

Hi

Thanks for that - but unfortunately it breaks the editing of the textarea field.

The new symptom is that an existing value for the comment field is not displayed when the edit dialog box opens

Regards

Martin

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 3, 2016 08:49 AM UTC

Hi Martin,  

We are unable to reproduce the issue at our end.  

Please ensure that you have assigned the value for the element in the write event of the editTemplate as shown in the following code example. 

<script type="text/javascript"> 
    function create() { 
        return $("<textarea class='e-field' rows=3 style='width: 100%;'></textarea>"); //creating a textarea 
    } 
    function write(args) { 
        //add an id attribute to textarea and name them as "GridID" + "ColumnName" 
        //id==>GridShipContry 
        args.element.val(args.rowdata["ShipCity"]).attr("id", args.element.attr("id")).attr("name", "ShipCity"); //Writing the edited text value 
    } 
    function read(args) { 
        return args.val();//Getting the Edited text value 
    } 
</script> 

If you are still facing any issue, please share the following information to replicate the issue. 

1)      Code example of the Grid and their events.  
2)      If possible, replicate the issue in the sample attached in our previous update. 

Regards, 
Seeni Sakthi Kumar S. 


MH Martin Hoyle August 4, 2016 07:03 PM UTC

Hi

Thanks all working now


Regards

Martin


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 5, 2016 04:10 AM UTC

Hi Martin, 

We are happy to hear that your problem has been resolved. Please get back to us, if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon