Dynamically change column EditType

[Andrey]

Hello,

i'm wandering if it is possible to have different edittypes in the same column, depending on some values.

Consider this scenario:

1. We have a treegrid with 2 columns: PropertyName, ProprtyValue, PropertyType.

2. Is it possible to change ProprtyValue column EditType depending on PropertyType. For example have a String input if PropertyType = String and DropDown if PropertyType = Enum or Numeric input if PropertyType = Numeric.

P.S. I use MVC, but this probably should be done on clientSide anyway. 

Thank You

[Jayakumar Duraisamy]

Hi Andrey, 

We have analyzed your requirement and it can be achieved by using edit template support in TreeGrid. By using this support, we can create the custom editor and  we can get the value from that editor at run time. 

This can be achieved by using EditTemplate property of TreeGrid columns,  please refer the following code snippets. 

@(Html.EJ().TreeGrid("TreeGridContainer") 

.Columns(co => 

{ 

   co.Field("TaskId").HeaderText("Id").EditType(TreeGridEditingType.Numeric).Width(45).Add(); 

    co.Field("TaskName").HeaderText("Property Name").EditType(TreeGridEditingType.String).Add();                                    

    co.Field("Type").HeaderText("Type").EditType(TreeGridEditingType.Dropdown).DropDownData((IEnumerable<object>)ViewBag.dropData).Add(); 

    co.Field("Value").HeaderText("Property Value").EditType(TreeGridEditingType.Numeric).EditTemplate(new TreeGridEditTemplate() { Create = "create", Write = "write", Read = "read" }).Add();                   

} 

//.. 

) 

<script type="text/javascript"> 

    function create() { 

        return "<input>"; 

    } 

    function write(args) { 

        var type = args.rowdata["Type"], 

            value = args.rowdata["Value"]; 

        if (type == "enum") { 

            args.element.ejDropDownList({ 

                dataSource: valueList, 

                width: "100%", 

                hieght: "100%", 

                value: value 

            }); 

        } 

        else if (type == "string") { 

            $(args.element).addClass("e-field e-ejinputtext").css("width","100%");             

            $(args.element).val(value); 

        } 

        else if (type == "numeric") { 

            args.element.ejNumericTextbox({ 

                value: value, 

                width: "100%", 

                hieght: "100%" 

            }); 

        } 

    } 

    function read(args) { 

        var obj = $('#TreeGridContainer').ejTreeGrid('instance'), 

            selectedItem = obj.model.selectedItem, 

            type = selectedItem["Type"];             

         

        if (type == "enum") 

            return args.ejDropDownList("getValue"); 

        else if (type == "string") 

            return $(args).val(); 

        else if (type == "numeric") 

            return args.ejNumericTextbox("getValue"); 

         

    } 

     

    </script> 

Also, refer the following UG documentation link to know more about edit template support, 

UG Link: https://help.syncfusion.com/aspnetmvc/treegrid/editing#cell-edit-template  

 

We have also prepared a sample for your reference, please find the sample link below. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_MVC625674512  

Please let us know, if you need any other assistance on this. 

Regards, 

Jayakumar D