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.
Unfortunately, activation email could not send to your email. Please try again.

Cannot edit field with column template

Thread ID:

Created:

Updated:

Platform:

Replies:

125212 Jul 30,2016 01:47 PM Aug 5,2016 12:10 AM ASP.NET MVC 7
loading
Tags: Grid
Martin Hoyle
Asked On July 30, 2016 01:47 PM

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 [Syncfusion]
Replied On August 1, 2016 03:14 AM

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. 


Martin Hoyle
Replied On August 1, 2016 05:29 AM

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 [Syncfusion]
Replied On August 2, 2016 08:16 AM

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. 


Martin Hoyle
Replied On August 2, 2016 12:02 PM

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 [Syncfusion]
Replied On August 3, 2016 04:49 AM

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
Replied On August 4, 2016 03:03 PM

Hi

Thanks all working now


Regards

Martin


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 5, 2016 12:10 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;