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

Treegrid installation adding children server side

Hi there,
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.
but without the sample folder and being unable to create sample projects I have couple of questions
  1. 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
  2. Is there a way to add the newly added children to data source (e.g, database). (Sorry without sample folder its bit hard to figure these things)
  3. 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.
Regards
Prasanth

15 Replies

PR Prasanth October 15, 2015 09:39 AM UTC

I forgot to mention couple of things in the previous post 

I am using 13.3.0.7 version, Windows 7 and Visual Studio 2015 Community Edition 


MK Mahalakshmi Karthikeyan Syncfusion Team October 16, 2015 01:13 PM UTC

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.



PR Prasanth October 16, 2015 02:39 PM UTC

Hi Mahalakshmi,

Thanks for the prompt reply, specially given it's Friday.  I think you could be right regarding the permission issue.  I will try to follow your instruction and sort the issue on my-side.  I have ran the program to gather Syncfusion Installer logs generated.

I have noticed that sample code you have provided has slightly different syntax and I presume it's due to new version.  I have attached my sample project based on default MVC project VS 2015 template.  I have added ProjectTaskController and corresponding TaskList.cshtml.  I have manually added the required javascirpt, css content (under Content/themes, Files, and Script folders).  As mentioned in the previous post I have tried to modify the _layout.cshtml (to include the script files) and TaskList.cshtml to use TreeGrid.  Not sure how long it will take me to get the Sample folder issue sorted so If you could have a quick look at the project and update the file reference / missing files that will be appreciated.

I have attached the sample project as well as the log files

Once again thanks for getting back to me, fantastic support.  Great product and support, thinking of purchasing extended version.

Regards
Prasanth

Attachment: SyncfusionEStudioLogs_20151017_010124_225b2e2.zip


PR Prasanth October 16, 2015 03:13 PM UTC

Hi there,

Your suggestion seems to have worked.  Sample folder is no longer empty brilliant!

Thank you so much

Regards
Prasanth


MK Mahalakshmi Karthikeyan Syncfusion Team October 19, 2015 04:34 PM UTC

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.



PR Prasanth October 20, 2015 10:43 AM UTC

Hi Mahalakshi,

Thanks for the additional information,

I have been trying to implement addition of child rows as per your suggestion in previous reply by modifying EditSettings

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

//…

  .EditSettings(ed => { ed.RowPosition(TreeGridRowPosition.Child)})

)


However it doesn't seem to have an effect on the functionality.  I am still getting the option via right click on the grid row -> Add Row -> Above or Below.  And clicking either "Above" or "Below" seems to be adding sibling to the grid row rather than inner child under selected row.  I have attached the sample project with TreeGrid that I am testing this functionality wth

Also is there anyway to rename the context menu options (e.g. "Add Row" to "Add Task")

Regards
Prasanthan

Attachment: SyncfusionMvcApplication_c5668730.zip


MK Mahalakshmi Karthikeyan Syncfusion Team October 21, 2015 11:27 AM UTC

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.



PR Prasanth October 21, 2015 11:38 AM UTC

Hi Mahalakshmi,

Thanks again for clear and prompt reply.  Much appreciated.

Regards
Prasanthan


MK Mahalakshmi Karthikeyan Syncfusion Team October 22, 2015 04:16 AM UTC

Hi Prasanthan,

Thanks for the update.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.



PR Prasanth October 22, 2015 10:07 AM UTC

Hi Mahalakshmi,

I have been trying few things to fix a new issue with adding child record.  Soon as I add the Child record 

  1. Context menu on parent row becomes unresponsive -> i.e can't add either child or sibling
  2. I have noticed after some addition even on other rows context menu is either unresponsive or somewhat unpredictable 
For example in the sample you have provided, if I add a child record under the record with ID 2 using "Add as Child" context menu option, I can't no longer add any more child records under the record with ID 2 nor add siblings for record with ID 2.

I am guessing this may be due to row record data not being correctly stored on JavaScript side.   May be if I save the records and reload the tree with every addition/deletion this may be not be an issue?

Regards
Prasanthan




MK Mahalakshmi Karthikeyan Syncfusion Team October 23, 2015 09:41 AM UTC

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.



PR Prasanth October 23, 2015 12:32 PM UTC

Hi Mahalakshmi ,

Thanks for the working solution, I have just tested it and context menu seems to be working

Regards
Prasanth


MK Mahalakshmi Karthikeyan Syncfusion Team October 26, 2015 05:08 AM UTC

Hi Prasanthan,

Thanks for the update.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.



PR Prasanth December 27, 2016 12:45 PM UTC

Hi Mahalakshmi,

Revisiting the thread here.  On a seperate page I am trying to create child node, where I am having difficulty setting the parent ID.  Is it possible to grab the parent node primary ID in JavaScript (ActionComplete function) and set the parent ID. is there a cleaner way to achieve this.

Kind Regards
Prasanth


JS Jonesherine Stephen Syncfusion Team December 28, 2016 06:01 AM UTC

Hi Prasanthan, 
Thanks for contacting Syncfusion support 
We have prepared the work around and added a new record under its respective parent by mapping the parentId in “addRow” Method. If we map the parentId then irrespective of its rowPostion the record will be added under its parent in selfReference dataSource .If the parentId is not mapped then the record will be added as per the rowPosition.  
Please find the code example below: 
<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> 
We have also prepared the sample in version 14.4.0.15 for your reference. Please upgrade your current version to support this behavior. Please find the sample from below location 
Regards, 
Jone sherine P S 


Loader.
Live Chat Icon For mobile
Up arrow icon