Cannot edit field with column template

[Martin Hoyle]

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

[Seeni Sakthi Kumar Seeni Raj]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/125212/ze/Sample1473144037.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Martin Hoyle]

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

[Seeni Sakthi Kumar Seeni Raj]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/125212/ze/Sample-439659177.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Martin Hoyle]

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

[Seeni Sakthi Kumar Seeni Raj]

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. 

[Martin Hoyle]

Hi

Thanks all working now

Regards

Martin

[Seeni Sakthi Kumar Seeni Raj]

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.