Cell Editing for Column Template

[Rodrigo]

Hi, i'd like to customize the editing template for both Column and Column Template.

The first column wich has the AllowEditing(false) property, i'd like to render to a label displaying the value, instead to a disabled Input.

The second column wich has a ColumnTemplate and AllowEditing(false) property , i'd like to render to a blank column, instead to a disabled input.

Also for CheckBox columns i'd like to display a disabled checkbox instead of a disabled input:

Thank you.

[Rajapandiyan Settu]

Hi Rodrigo,

Thanks for contacting Syncfusion support.

Query #1: For first column and second column, I would like to render a label displaying the value and blank cell respectively instead to a disabled input.

By using cellEditTemplate feature, you can render custom element while editing a column. please find the below code for your reference.

cellEditTemplate: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit-types#custom-editors-using-template

[index.cshtml]

    col.Field("Freight").HeaderText("Freight").Edit(new { create = "create_Freight", read = "read_Freight", destroy = "destroy_Freight", write = "write_Freight" }).Width("120").AllowEditing(false).Add();

    col.Field("ImageCol").HeaderText("").Template("#ImageTemplate").Edit(new { create = "create_ImageCol", read = "read_ImageCol", destroy = "destroy_ImageCol", write = "write_ImageCol" }).AllowEditing(false).Width("150").Add();

 

<script type="text/x-template" id="ImageTemplate">

   <img style="height: 30px;" class="photo" src=https://ej2.syncfusion.com/javascript/demos/src/grid/images/${EmployeeID}.png alt="${EmployeeID}" />

</script>

 

<script>

    var freightElem

    function create_Freight(args) {

        freightElem = document.createElement('div');

        return freightElem;

    }

    function write_Freight(args) {

        args.element.innerText = args.rowData[args.column.field];

    }

 

    function destroy_Freight(args) {

        freightElem.remove();

    }

    function read_Freight(args) {

        return parseFloat(freightElem.innerText);

    }

   

    var imageColElem

    function create_ImageCol(args) {

        imageColElem = document.createElement('div');

        return imageColElem;

    }

    function write_ImageCol(args) {

    }

 

    function destroy_ImageCol(args) {

        imageColElem.remove();

    }

    function read_ImageCol(args) {

        return "";

    }

</script>

Query #2: for CheckBox columns i'd like to display a disabled checkbox instead of a disabled input

You can achieve this by using EditType as booleanedit.

EditType: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/edit-types#customize-editors-using-params

col.Field("Verified").HeaderText("Verified").DisplayAsCheckBox(true).AllowEditing(false).EditType("booleanedit").Width("150").Add();

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_cellEditTemplate-1302458332.zip

Regards,

Rajapandiyan S