This is a migrated thread and some comments may be shown as answers.

Treeview databinding with ajax

2 Answers 70 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Lee
Top achievements
Rank 1
Lee asked on 10 Apr 2012, 05:12 PM
Hello,
I'd like to know how to trigger the databinding when a button is clicked.  This is my treeview:

@(Html.Telerik().TreeView()
            .Name("HierarchyView")
            .ShowCheckBox(true)
            .DataBinding(dataBinding => dataBinding
                    .Ajax().Select("GetPartList", "Home"))
            .ClientEvents(events => events.OnDataBinding("TreeView_onDataBinding"))
            .BindTo(Model, mappings =>
            {
                mappings.For<MvcTestTelerik.Models.PartModel>(binding => binding
                        .ItemDataBound((item, mainpart) =>
                        {
                            item.Text = "<strong>" +  mainpart.PartNumber + " " + mainpart.PartDescription + "</strong>";
                            item.Encoded = false; // to prevent the treeview from HTML encoding
                        })
                        .Children(branch => branch.childModel)
                        );
                mappings.For<MvcTestTelerik.Models.PartChildModel>(binding => binding
                        .ItemDataBound((item, childpart) =>
                        {
                            item.Text = childpart.PartNumber;
                        })
                        .Children(branch => null)
                        );
            })  
    )

I have a button:
<button class="t-button t-state-default" type="submit" onclick="getPart();">Save</button>

Here is my jvscript for the button event:

function getPart() {
        var part = $(txtPart).val();
         // I'm stuck here - how can I pass the parameter - part - to rebind my treeview?
    }

I have this code to rebind but it does not work:

function TreeView_onDataBinding(e) {
        var treeview = $(this).data("tTreeView");
        var part = $(txtPart).val();
        e.data = { partNum: part };

    }


Please help!  Thanks!!

2 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
answered on 10 Apr 2012, 07:22 PM
I went a little bit further.  I removed the ClientEvents


@(Html.Telerik().TreeView()
            .Name("HierarchyView")
            .ShowCheckBox(true)
            .DataBinding(dataBinding => dataBinding
                    .Ajax()
                    .Enabled(true)
                    .Select("GetPartList", "Home"))
        //.ClientEvents(events => events.OnDataBinding("TreeView_onDataBinding"))
            .BindTo(Model, mappings =>
            {
                mappings.For<MvcTestTelerik.Models.PartModel>(binding => binding
                        .ItemDataBound((item, mainpart) =>
                        {
                            item.Text = "<strong>" + mainpart.PartNumber + " " + mainpart.PartDescription + "</strong>";
                            item.Encoded = false; // to prevent the treeview from HTML encoding
                        })
                        .Children(branch => branch.childModel)
                        );
                mappings.For<MvcTestTelerik.Models.PartChildModel>(binding => binding
                        .ItemDataBound((item, childpart) =>
                        {
                            item.Text = childpart.PartNumber;
                        })
                        .Children(branch => null)
                        );
            })
    )

Now, how can I pass the part as parameter to send to the controller?

function getPart() {
        var part = $(txtPart).val();
        alert(part);
        var treeview = $("#HierarchyView").data("tTreeView");
     
        treeview.ajaxRequest();
    }

0
Lee
Top achievements
Rank 1
answered on 11 Apr 2012, 05:48 PM
Anyone? Please!  Can it be done?
Tags
TreeView
Asked by
Lee
Top achievements
Rank 1
Answers by
Lee
Top achievements
Rank 1
Share this question
or