[Solved] Serializing TreeViewItems

[Rion]

I just recently began using the TreeView MVC component and have been pleased with it so far - however I have ran into a few issues regarding serializing the data, without performing a submit and was wondering if this is possible?

Treeview Code:

<form id="treeViewItems">

        <%= Html.Telerik().TreeView()
            .Name("TreeView")
            .ShowCheckBox(true)
            .BindTo(Model, mappings =>
            {
                mappings.For<Study>(binding => binding
                        .ItemDataBound((item, study) =>
                        {
                          item.Encoded = false;
                          item.Text = "<b>" + study.StudyDescription + "</b>";
                        })
                        .Children(study => study.Series));
                mappings.For<Series>(binding => binding
                        .ItemDataBound((item, series) =>
                        {
                          item.Text = "Series " + series.SeriesNumber.ToString();
                        })
                        .Children(series => series.Instances));
                mappings.For<Instance>(binding => binding
                        .ItemDataBound((item, instance) =>
                        {
                          item.Text = "Instance " + instance.InstanceNumber.ToString();
                          item.Value = instance.InstanceGuid.ToString();
                        })
                        .Children(series => null));
            })
        %>
</form>

I have the Tree set to automatically have all nodes initially checked - and changed the logic such that if an Instance was unchecked - it would uncheck not only the parent Series, but also the "grandparent" Study as well.

Javascript code: (To handle automatic selection - unchecking of "grandparent" nodes)

<script type="text/javascript">
$('#TreeView').find("li")

    .find('> div > .t-checkbox :checkbox')

    .bind('click', function (e) {

              var isChecked = $(e.target).is(':checked');

              var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');

              var item = $(e.target).closest('.t-item');

              var checkboxes = item.find('.t-checkbox :checkbox');

 

              $.each(checkboxes, function (index, checkbox) {

                         $(checkbox).attr('checked', isChecked ? true : false);

                         treeView.checkboxClick(e, checkbox);

              });

 

              var siblings = item.parent().find('> li .t-checkbox');

              var siblingsLength = siblings.length;

              var checkedLength = siblings.find(':checked').length;

 

              if (siblingsLength == checkedLength)
                         {

                         var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');

                         var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');

                         parentCheckBox.attr('checked', true)

                         grandparentCheckBox.attr('checked', true)

                         treeView.checkboxClick(e, parentCheckBox)

                         treeView.checkboxClick(e, grandparentCheckBox)

              } else {

                         var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');

                         var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');

                         parentCheckBox.attr('checked', false)

                         grandparentCheckBox.attr('checked', false)

                         treeView.checkboxClick(e, parentCheckBox)

                         treeView.checkboxClick(e, grandparentCheckBox)

              }

      });

    })
</script>

Now - all of this functionality seems to work just as intended. However - my issue is that when I attempt to perform a submit (in another section of the page) I want to serialize the values of the tree as such:

(sendStudyForm is an area above the TreeView that is encapsulated in a Form - it contains fields that relate to where all of the selected instances will be sent)

$("#sendStudyForm").submit(function () {

            var destination = $("#destination").val();

            $.post("/Images/SendStudies", { instances : $("#treeViewItems").serialize(), 'destinationGuid': destination });
            return false;
});

In my controller - the post hits the proper action, however instances is always Count=0 (for instances) and I am wondering if it is an issue with the $("#treeViewItems").serialize() to not POST the correct List<TreeViewItem> to my Action:

Controller :

[HttpPost]
        public EmptyResult SendStudies(List<TreeViewItem> instances, string destinationGuid)
        {
            //Test
            return new EmptyResult();
        }

[Peter]

Hi,

I will suggest you examine help documentation related with jQuery.serialize(). As you can see serialize() works only for form. Hence you need to find form, which contains treeview and call serialize() method to it.

I have tried to serialize values from this example and found that serialize method work as expected.

Regards,
Peter

[Rion]

Thanks Peter-

I believe the issue that I am having could be the result of some other conflicting things. Basically what I am trying to accomplish is - I have two sections of a form. The top section being a TabStrip - and each content area of the strip contains several input fields and a button (to submit).

Below that is a TreeView - as was previously shown in the earlier post, which is used to select specific items that will be submitted along with the associated fields from inside the TabStrip depending on which button is clicked.

Crude Example (Pseudo-code)

<-- TabStrip here -->

     <--Content Area One-->
         <input id='a' />
         <input id='b' />
         <input id='sendStudies' type='button' value='Send Values' />
     <--Content Area Two-->
         <input id='c' />
         <input id='d' />
         <input id='printStudies' type='button' value='Send Values' />
     <--Content Area Three-->
         <input id='e' />
         <input id='f' />
         <input id='exportStudies' type='button' value='Send Values' />

<--End TabStrip-->

<form id="treeviewForm">
<--Begin TreeView -->

<--End TreeView -->
</form>

Ideally - I would like it if I could simply wire up each of the buttons in the TabStrip areas to send their necessary data along with my List<TreeViewItem> from the TreeView as such:

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

            var destination = $("#destination").val();
            var formdata = $("#treeviewForm").serialize();
            $.post("/Images/SendStudies/", { 'checkedNodes': formdata, 'destinationGuid': destination });
            return false;

        });

However - formdata ever returns is a List<TreeViewItem> with a Count = 0. So - I have not yet figured out a way to accomplish this and am wondering if my form placement should be changed. (Perhaps a single form that encapsulates both the TabStrip and the TreeView?)

Thanks again Peter,

Rion