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
close icon

Cell Editing for Column Template

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.


1 Reply

RS Rajapandiyan Settu Syncfusion Team January 9, 2023 12:28 PM UTC

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


Loader.
Up arrow icon