Hi Prasanthan,
Thanks for using Syncfusion product.
Query 1: At the moment Sample folder for the current installion is empty (has Samples and MVC6 Sapmles folder which are both empty). I have tried to uninstall and reinstall but no luck. However I can add reference to the new projects etc and use the library.
Solution: During the installation of Syncfusion Essential Studio setup, the extracting zip application will ship in below temp location.
Location: C:\Users\{User name}\AppData\Local\Temp
We suspect that the installer files are not shipping in your machine due to the ‘Temp’ folder does not have insufficient permission while installing our setup. Please uninstall the Syncfusion setup v13.3.0.7 installed in your system, clean your temp(Start -> Run -> Type %temp% -> Click OK) folder and then follow the below steps while reinstalling the Syncfusion setup v13.3.0.7.
1. After few minutes from when you click “Install” button, there will be a folder named “Install” shipped in your temp location. Please refer the below screenshot.
2. Navigate to the temp location and Right Click on “Install” folder and select Properties.
3. In Properties window select the Security tab, Administrators under the Group or user names, ensure the Permissions for Administrators as shown in the below screenshot and then click Advanced button.
4. Pop up window will be open when you click the Advanced button. Please select the Owner tab and then click Edit button as shown in the below screenshot.
5. Pop up window will be open when you click the Edit button. Under the Change owner to, select Administrators. Then select Replace owner on subcontainers and click objects check box and click OK. Please refer the below screenshot.
After the Essential Studio setup v13.3.0.7 was successfully installed in your system, please ensure that samples are present in the below mentioned location. If the samples are present, you can launch the samples successfully.
Location:
C:\Users\{user name}\AppData\Local\Syncfusion\EssentialStudio\13.3.0.7\MVC
Example:
C:\Users\ManivannanS\AppData\Local\Syncfusion\EssentialStudio\13.3.0.7\MVC
If you still face the same issue, please follow the steps suggested in the below KB article link and send us the zip file which consists of Syncfusion Installer logs generated by our tool. It would be much helpful for us to resolve the reported issue at the earliest.
http://www.syncfusion.com/kb/2331
Query 2: Is it possible to add children to existing nodes in the tree grid, with the sample I have got I can right click and there are two options "Add above" and "Add below" so basically siblings rather than children
Solution: It is possible to add new row child as in TreeGrid control with the help of “EditSettings” “RowPosition” property. Please refer the following code example for details.
@(Html.EJ().TreeGrid("TreeGridContainer") //… .EditSettings(ed => { ed.RowPosition(TreeGridRowPosition.Child)}) ) |
Query 3: It is possible to add a new record to data base with the help “ActionComplete” client side event. Please refer the following code example for details.
@(Html.EJ().TreeGrid("TreeGridContainer") //… .ClientSideEvents(cl=>{cl.ActionComplete("ActionComplete");}) ) <script type="text/javascript"> function ActionComplete(args) { if (args.requestType === 'addNewRow') { //Newly Added Record is obtained here , which can be updated to database addedRecord = args.addedRow; $.ajax({ type: "POST", url: "/TreeGrid/Add",//Add is Server side method data: addedRecord, dataType: "json" }); } //… } </script> |
Solution:
Query 4: Finally how do we use these controls in pages which uses parent layout. For example the default MVC project creates _layout.cshtml and usually I use it as the main layout page.
Solution: we can refer the css and script files from the layout page and render the controls in the view page. Please refer the below code example for details.
[_Layout.CSHTML] <head> @RenderSection("StyleSection", required: false) <!--[if lt IE 9]> <script src="@Url.Content("~/Scripts/jquery-1.11.3.min.js")"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")"></script> <!--<![endif]--> <script src="@Url.Content("~/Scripts/jsviews.min.js")"></script> <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.easing-1.3.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script> <script src="@Url.Content("~/Scripts/cultures/globalize.culture.en-US.min.js")"></script> <script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script> <script src="@Url.Content("~/Scripts/sampleBrowserSite.js")"></script> <script src="@Url.Content("~/Scripts/sampleslist.js")"></script> <script src="@Url.Content("~/Scripts/properties.js")"></script> <script src="@Url.Content("~/Scripts/ZeroClipboard.js")"></script> @RenderSection("ScriptReferenceSection", required: false) </head> |
@section SampleHeading{<span class="sampleName"> TreeGrid/Default</span>} @section ControlsSection{
@(Html.EJ().TreeGrid("TreeGridContainer") //… ) } |
Regards,
Mahalakshmi K.
Hi Prasanthan,
Thanks for the update.
We have prepared a sample in MVC6 to add, edit and delete the database records through TreeGrid. But we have facing some issue while merging “SqlClient” namespace package into the project still we can run the sample. Please find the following code snippet details.
@(Html.EJ().TreeGrid("TreeGridContainer"). //… EditSettings(eve => { eve.RowPosition(TreeGridRowPosition.Child); eve.EditMode(TreeGridEditMode.CellEditing); }). ClientSideEvents(eve=>{ eve.EndEdit("endEdit"); eve.ActionComplete("ActionComplete"); }). ) <script type="text/javascript"> function endEdit(args) { var editedRecord = args.data.item; //This varible holds the data of the edited record. You can updated it to your remote datasource $.ajax({ type: "POST", url: "/TreeGrid/Update", //Update is Server side method data: editedRecord, dataType: "json" }); }
function ActionComplete(args) { var record = args.data; if (args.requestType === 'addNewRow') { //Newly Added Record is obtained here , which can be updated to database addedRecord = args.addedRow; $.ajax({ type: "POST", url: "/TreeGrid/Add",//Add is Server side method data: addedRecord, dataType: "json" });
} else if (args.requestType === 'delete') { var deletedRecord = args.data.item; //This is the deleted item. $.ajax({ type: "POST", url: "/TreeGrid/Delete", //Delete is Server side method data: deletedRecord, dataType: "json" }); if (args.data.hasChildRecords) { deleteChildRecords(args.data); } //If deleted item has child records, we need to delete that too } }
//Delete inner level child records function deleteChildRecords(record) { var childRecords = record.childRecords, length = childRecords.length, count, currentRecord; for (count = 0; count < length; count++) { currentRecord = childRecords[count]; var deletedChildRecord = currentRecord.item; //This is the deleted child item. //If the above deleted child record has child records, then we need to delete that too. if (currentRecord.hasChildRecords) { deleteChildRecords(currentRecord); } } } </script> |
Please find the sample from the following location.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/MVC6TR~1201486423.ZIP
Regards,
Mahalakshmi K.
@(Html.EJ().TreeGrid("TreeGridContainer")
//…
.EditSettings(ed => { ed.RowPosition(TreeGridRowPosition.Child)})
)
Hi Prasanthan,
Please find the responses below,
Query1: And clicking either "Above" or "Below" seems to be adding sibling to the grid row rather than inner child under selected row.
Solution: The previous solution will add a new child to the selected task when we using toolbar add. We can also customize the context menu for add a new row as child using “ContextMenuOpen” client side event.
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve => { eve.ContextMenuOpen("contextmenuopen"); }). ) <script type="text/javascript"> function contextmenuopen(args) { var custommenu = { headerText:"Add as child", menuId:"childadd", parentMenuId:"Add", eventHandler:function (args){ var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); treeObj.addRow(treeObj.model.selectedItem.item, ej.TreeGrid.RowPosition.Child); } } args.contextMenuItems.splice(4, 0, custommenu); // To remove standard context menu items } </script> |
Query2: Also is there any way to rename the context menu options (e.g. "Add Row" to "Add Task")
Solution: We can change the context menu text with the help of same “ContextMenuOpen” client side event. Please refer the following code example for details.
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve => { eve.ContextMenuOpen("contextmenuopen"); }). ) <script type="text/javascript"> function contextmenuopen(args) { args.contextMenuItems[0].headerText = "Add Task"; } </script> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC6_TreeGrid78280929
Regards,
Mahalakshmi K.
Hi Prasanthan,
Thanks for the update.
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Prasanthan,
Sorry about the inconvenience caused.
The workaround provided in our previous update was incorrect as we added the same instance as child to the selected item. And we have resolved now by cloning the new record before adding. Please refer the below code example for details.
function contextmenuopen(args) { var custommenu = { headerText:"Add as child", menuId:"childadd", eventHandler: function (args) { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); var data = $.extend({}, treeObj.model.selectedItem.item); treeObj.addRow(data, ej.TreeGrid.RowPosition.Child); } } args.contextMenuItems[0].headerText = "Add Task"; args.contextMenuItems.splice(1, 0, custommenu); } |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/MVC6_T~1-1439955744.ZIP
Regards,
Mahalakshmi K.
Hi Prasanthan,
Thanks for the update.
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
<button onclick="clickme()" style="margin-bottom:10px">Add Row</button> <script> var Id = 7; function clickme() { Id += 1; var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); var data = { "Id": Id, "Name": "Child Task 3", "StartDate": "02/23/2014", "Duration": 5, "PercentDone": "40", "ParentId": 5 } treeObj.addRow(data, ej.TreeGrid.RowPosition.Child); } </script> |