Hi Vivek,
Thanks for using Syncfusion product,
Query1: I am using Syncfusion MVC tree grid, and want to manipulate rows and parent rows through events and javascript.
Solution: we can manipulate the current row that we are in, in all the client side events, for your reference please find the below code snippet to check whether the current editing item is a child item or a parent item.
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve => { eve.BeginEdit("beginEdit"); }). ) <script type="text/javascript"> function beginEdit(args) { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); var columns = treeObj.model.columns; //available columns in the treegrid if (args.data.hasChildRecords) { // condition if the current record is a parent record } else { //condition if the current record is a child record. } //cancelling editing for 'StartDate' column and 'PercentDone' column if (columns[args.columnIndex].field == "StartDate" || columns[args.columnIndex].field == "PercentDone") args.cancel = true; } </script> |
“BeginEdit” client side event will be triggered while we attempt to edit any item.
Please find the Treegrid client side events from the online link below.
http://helpjs.syncfusion.com/js/api/ejtreegrid#events
All the events defined in the above online UG documentation are available in ASP.NET MVC platform, but we need to declare those events in Pascal casing. Intellisense also available for the client side events in ASP.NET MVC platform, please find the below screen shot.
Query 2: As i am new to this, can't able to find useful methods to manipulate rows and columns.
Solution: Please find the list of available public methods in the TreeGrid control , in the below online location
http://helpjs.syncfusion.com/js/api/ejtreegrid#methods
AddRow: with this method we can add any row dynamically with the data and the position to add. please refer the below code snippet to add the add a new row dynamically.
<button id="AddRow">Add new record</button> @(Html.EJ().TreeGrid("TreeGridContainer"). //… ) <script type="text/javascript"> $("AddRow").click(function () { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); // TreeGrid Object var data = { "TaskId": 15, "TaskName": "New Item", "StartDate": "07/31/2015", "EndDate": "08/04/2015", "Duration": 5, "Progress": 60 } treeObj.AddRow(data,ej.TreeGrid.RowPosition.Below) // Hide the Start Date Column })</script> |
Query 3: Is there any client side javascript intellesense available for tree grid.
Solution: we can get the Intellisense inside javascript functions to get the property details. The below screenshot provides the information about the argument available in “BeginEdit” client side event
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.