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 Refresh.

Hi,
I am in need to reload data on a TreeGrid after a Post Operation based on a parameter.
I tried with this code, that is on the Change Enevt of a DropdonList

function onCustomerChange(args) {
    var ddlCustomer = $("#IdCustomer").data("ejDropDownList");
    var curCutomerId = ddlCustomer.getSelectedValue();
 
    var objData = { idCustomer: curCutomerId };
    var str = JSON.stringify(objData);
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "@Url.Action("GetCustomerProjects""Customer")",
        data: str
    })
.done(function (data) {
    alert(data.success);
    var grid = $("#TreeGridContainer").data("ejTreeGrid");
    grid.dataSource = data.data;
 
    //onClose();
})
.fail(function (data) {
    alert("error");
})
.always(function () {
    //alert("finished");
});
 
 
}
I noticed that there is no methods like "refreshCOntent" as in the Grid.
How can I perform this operation?

    Thanks in advance


   Andrea Perazzolo

P.S. I am using the Unobtrusive Support.


5 Replies

JR John Rajaram Syncfusion Team February 12, 2015 12:05 PM UTC

Hi Andrea,

Thanks for using Syncfusion products.

We have referred your code snippets. We request you to assign the values for data source as like as following code snippets, instead of “grid.dataSource = data.data;” to reload the data on the TreeGrid.

Code snippets:

//...

treeObject = $("#Tree").data("ejTreeGrid");

//...

treeObject.setModel({ dataSource: projectData });

Please refer the following code snippets for more details.

Code snippets:

<body style="position: static; margin: 0px; padding: 2px">

    <div class="ctrllabel">

        Datasource

    </div>

    <br />

    @(Html.EJ().DropDownList("Datasource").TargetID("dataList").Value("DataSource 1").Width("150px").ClientSideEvents(e => e.Change("onChange")))

    <div id="dataList">

        <ul>

            <li>DataSource 1</li>

            <li>DataSource 2</li>

        </ul>

    </div>

    <br />

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

       //...

     .Datasource((System.Collections.IEnumerable)ViewBag.datasource)

       )

    @(Html.EJ().ScriptManager())

    <script>

    //...

         function onChange(args) {

            treeObject = $("#Tree").data("ejTreeGrid");

            if (args.text === "DataSource 1") {

              

                treeObject.setModel({ dataSource: projectData });

            }

            if (args.text === "DataSource 2") {

              

                treeObject.setModel({ dataSource: datas });

            }

        }

    </script>

</body>

We have prepared a sample for reloading the data source. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118206/TreeGridSampleMVC_ReloadDatasource114115127.zip

Please let us know if you need more information on this.

Regards,
John. R




PC Pankaj Chatterjee August 18, 2015 04:24 AM UTC

Hi I am trying the sample provided. It works find when the data is created as an JS array at the client side, however when I  try and go the server side, I am not getting desired result

The server side I am using to return as JsonConvert.SerializeObject(myarray) to convert the List<T> to a Json string and return to the client. The string being returned is in the format 
"[{"FkId":4,"PkId":2,"Name":"NIT Documents"},{"FkId":4,"PkId":3,"Name":"RFP"}]"

But I cannot bind this to the TreeGrid.

Can you tell me why?

regards
Pankaj



MK Mahalakshmi Karthikeyan Syncfusion Team August 18, 2015 12:09 PM UTC

Hi Pankaj,

Thanks for using Syncfusion product,

For your kind information, we were unable to reproduce the issue you have reported. We can able to serialize the data in server side and also we can populate those data to the TreeGrid. Please refer the below code snippet to achieve this.

[CS]

namespace TreeGridSample.Controllers {

    public class TreeGridController: Controller {

        //…

        [HttpPost()]

        public string CustomerData() {

            var DataSource = TreeGridDefaultData.GetMethodData();

            var datasource = JsonConvert.SerializeObject(DataSource);

            return datasource;

        }

        public class TreeGridDefaultData {

            public static List < DefaultData > GetMethodData() {

                //…

            }

        }

    }

}


[CSHTML]

<button id="loadDataSource"> New Data Source</button>

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

    <script type="text/javascript">

        $("#loadDataSource").click(function () {

            $.ajax({

                type: "POST",

                url: "/TreeGrid/CustomerData",

                dataType: "json"

            }).done(function (data) {

                var grid = $("#TreeGridContainer").data("ejTreeGrid");

                grid.setModel({dataSource: data});

            })

        });

    </script>

  </body>

Here we have changed the TreeGrid data source in the button click event which was serialized and returned from the server using AJAX post method.

We have also prepared a sample based on this and you find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/118206/ze/Serialize906535915

Is this your requirement or else please get back us by modifying this sample along with the replication procedure.

And please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.



PC Pankaj Chatterjee August 18, 2015 04:06 PM UTC

Hi Mahalakshmi,

Thanks for the update. Actually the problem was on my end. I was returning a JsonResult and within the function serialising the object, which is not required...

        [HttpPost]

        public JsonResult CustomerData()

        {

            var DataSource = TreeGridDefaultData.GetMethodData();

            //var datasource = JsonConvert.SerializeObject(DataSource);

            return Json(DataSource, JsonRequestBehavior.DenyGet);


        }


If I return the Array object directly without serialisation, then the method works fine.

Thanks for the help.

Pankaj 
 



MK Mahalakshmi Karthikeyan Syncfusion Team August 19, 2015 09:48 AM UTC

Hi Pankaj,

Thanks for the update.

We glad to know that your issue has been resolved.

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

Regards,

Mahalakshmi K.


Loader.
Live Chat Icon For mobile
Up arrow icon