How to customize the column properties in Treegrid

<input type="button" onclick="clickme()" style="margin-bottom:10px" value="Update Column"/>
        <div>
            <ej:TreeGrid runat="server" ID="Container" ChildMapping="Children">
                <Columns>
                    <ej:TreeGridColumn HeaderText="Task Id" Field="Id" Width="60"/>
                    <ej:TreeGridColumn HeaderText="Task Name" Field="Name"/>
                    <ej:TreeGridColumn HeaderText="Start Date" Field="StartDate" TextAlign="Center"/>                                  
                    <ej:TreeGridColumn HeaderText="Progress" Field="PercentDone" TextAlign="Right" />
                </Columns>               
            </ej:TreeGrid>
        </div>
        <script type="text/javascript">
            //To dynamically change the TreeGrid columns
            function clickme() {                
                var treeObj = $("#Container").data("ejTreeGrid"),
                     clonedColumns = $.extend([], treeObj.model.columns),
                     duration = { field: "EndDate", headerText: "End Date", duration: "numericedit" };
                clonedColumns[0].headerText = "Id";
                clonedColumns[1].headerText = "Name";
                clonedColumns[3].headerText = "Percent Done";
                clonedColumns[2].textAlign = ej.TextAlign.Right;
                clonedColumns[3].textAlign = ej.TextAlign.Center;
                //To include new column dynamically
                clonedColumns.push(duration);
                treeObj.setModel({ "columns": clonedColumns });
            }
        </script>