locked
Split page problem in javascript and HTML...........

    Question

  • hi,I am displaying some data in list view in split page format whenever i clicks the list item in list view it is displaying on right side.that is fine but i want display the all clicked(selected) items on left side to right side right now it is displaying only single item whichever item is clicked....Thanks in advance
    Wednesday, April 24, 2013 5:42 AM

Answers

  • Flag is selected should be in your data (that is bound to the list view) not markup.

    Can you post you full code or some sample (with some sample data) somewhere so that we can repro it and tell you the approach.

    - Girija

    Thursday, May 02, 2013 6:57 PM

All replies

  • Can you provide some more details.

    - Girija

    Wednesday, April 24, 2013 7:21 PM
  • Thursday, April 25, 2013 6:31 AM
  • hi girija,

    plz find the below screenshots and guide me...Thanks in advance........

    Thursday, April 25, 2013 11:55 AM
  • Hi,

    Do you have the list view selction mode set to "multi" ? see link

    var myListView = document.getElementById("basicListView1").winControl;
    myListView.selectionMode = WinJS.UI.SelectionMode.multi;

    If yes, we need o see your code to know what is going wrong here..

    - Girija


    Thursday, April 25, 2013 7:08 PM
  • hi girija,thanks for ur reply...I set my selection mode as single..if set as multi the selected items are not displaying...Its simply got selecting.......plz guide me
    Friday, April 26, 2013 5:38 AM
  • Hi,

    Please share your code or a sample depicting the problem.. Without the code I cannot help you.

    - Girija

    Friday, April 26, 2013 6:51 PM
  • html code:

                                                                                                         

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>splitPage</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/newHtml/newHtmll.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="/pages/newHtml/newHtmll.js"></script>

    </head>
    <body style="background-image: url('/images/Resources/background.png'); background-size: 100% 100%; height: 900px; ; left: -16px; top: -42px;">

        <!-- This template is used to display each item in the ListView declared below. -->
        <div class="itemtemplate" id="hai" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <img class="item-image" src="#" data-win-bind="src:picture" />
                <div class="item-info">
                    <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title" style="font-size: 25px;"></h3>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle" style="font-size: 25px;"></h6>
                    <h6 class="item-text win-type-ellipsis" data-win-bind="textContent: cost" style="font-size: 20px;"></h6>
                    <img class="item-image1" src="#" data-win-bind="src:image"  />

                </div>
            </div>
        </div>
        <div class="itemtemplate1" id="Div3" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <img class="item-image" src="#" data-win-bind="src:picture" />
                <div class="item-info">
                    <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title" style="font-size: 25px;"></h3>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle" style="font-size: 25px;"></h6>
                    <h6 class="item-text win-type-ellipsis" data-win-bind="textContent: cost" style="font-size: 20px;"></h6>
                    <select class="win-interactive itemCount"  id="dropdownlist" onChange="ShowMenu(document.getElementById('dropdownlist').value, 6);" data-win-bind="selectedIndex:UserData.Index" style="; width: 80px; height: 32px; left: 315px; top: 41px;" >
                            <option value="0">0</option>
                            <option value="1">1</option>
                             <option value="2">2</option>
                             <option value="3">3</option>
                             <option value="4" onchange="copy();" >4</option>
                             <option value="5"> 5</option>
                             <option value="6">6</option>
                             <option value="7">7</option>
                             <option value="8">8</option>
                             <option value="9">9</option>
                             <option value="10">10</option>  

    </select>


                    <img class="item-image1" src="#" data-win-bind="src:image"  />

                </div>
            </div>
        </div>

        <!-- The content that will be loaded and displayed. -->
        <div class="splitpage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <div class="itemlistsection" aria-label="List column">
                <div class="itemlist win-selectionstylefilled" id="viewList" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }" style="left: 0px; top: 0px;"></div>
            </div>
            <div class="articlesection"  aria-label="Item detail column"  style="width: 563.64px; left: 37.5px; top: 0px;">
                <button class="button1" id="button1"  style="; right: 546.01px; left: 4.5px; bottom: 569.96px; top: 277.5px;">Change Date</button>
                <input type="text" class="text1" id="text1" style="">
                <div id="div1" style="; right: 196.14px; left: 159px; bottom: 574px; top: 274.5px; border-width: 0px;"></div>

       <!-- <div class="mediumListIconTextTemplate1" id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="overflow: auto; overflow-x: auto; width: 563.64px; height: 489px; ; left: 6px; top: 399px;">
            <div style="left: 150px; height: 417px;">
                <h4 id="name"  data-win-bind="innerText: title"  style="color: #100F0F; ; left: 19.41px; top: 11.95px; font-size: 20px;"></h4>
                <h6 id="credit" data-win-bind="innerText: subtitle"  style="font-size: 15px; font-weight: 500; color: #100F0F; ; left: 38.81px; top: 46.86px;"></h6>
                <h6 id="Details1" data-win-bind="innerText: cost" style="color: #100F0F; ; left: 252.24px; top: 13.43px; font-size: 15px;"></h6>

                          <img src="#" data-win-bind="alt: title; src: image" style="; left: 374.63px; top: 7.46px;" />


            </div>
        </div>-->
    <!--<div id="view" data-win-control="WinJS.UI.ListView"  data-win-options="{ itemDataSource : visitlist1.itemList1.dataSourcstyle,select(#view2)}" style=" right: -99.36px; bottom: 3px; ">
            <div id="view2" data-win-control="WinJS.Binding.Template"></div>   
            <h4 id="name"  data-win-bind="innerText: title"  style="color: #100F0F; font-size: 20px;"></h4>
                <h6 id="credit" data-win-bind="innerText: subtitle"  style="font-size: 15px; font-weight: 500; color: #100F0F; "></h6>
                <h6 id="Details1" data-win-bind="innerText: cost" style="color: #100F0F; font-size: 15px;"></h6>

                          <img src="#" data-win-bind="alt: title; src: image" style=" " />

                </div>-->

                <article>
                   <div id="articlediv" style="height: 57px; right: 17.64px; "></div>
       <header class="header" style="width: 349.14px;">
                        <div class="text" id="div2">
                            <span id="Span1"></span>
                            <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title" style="font-size: 25px;"></h2>
                            <!--<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>-->
                    <h6 class="item-text win-type-ellipsis" data-win-bind="textContent: cost" style="font-size: 20px;"></h6>

                            <!--<button class="button1" data-win-bind="textContent:button"></button>-->

                        </div>
                        <img class="article-image" src="#" data-win-bind="" style="background-image: url('/images/Resources/visit_logo.jpg'); background-size: 100% 100%;" />
                    </header>
                    <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
                </article>
            </div>
        </div>
    </body>
    </html>

    JS code:

    (function () {
        "use strict";

        var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
        var binding = WinJS.Binding;
        var nav = WinJS.Navigation;
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;

        ui.Pages.define("/pages/newHtml/newHtmll.html", {

            /// <field type="WinJS.Binding.List" />
            _items: null,
            _group: null,
            _itemSelectionIndex: -1,

            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
               
                //the beloew code is according to date selected data
                    var dataArray2 = [
      { title: "Fiandacass", subtitle: "Netherland", cost: "500$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "John cartondd", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "rehmangg", subtitle: "netherland", cost: "200$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "huarei", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "Ram singh", subtitle: "netherland", cost: "200$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "Tera Data", subtitle: "australia", cost: "350$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "boston university", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "hague university,", subtitle: "netherland", cost: "600$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "boston university", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "boston university", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "hague university,", subtitle: "netherland", cost: "200$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" },
      { title: "boston university", subtitle: "australia", cost: "250$", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrowr.png" }];


                    var dataList1 = new WinJS.Binding.List(dataArray2);

                    //// Create a namespace to make the data publicly
                    //// accessible. 
                    var publicMembers =
                        {
                            itemList1: dataList1
                        };
                    WinJS.Namespace.define("itemslist2", publicMembers);
                    var listView2 = document.querySelector("#viewList").winControl;
                    listView2.itemTemplate = document.querySelector(".itemtemplate1");
                    WinJS.Binding.processAll(document.querySelector("#div1"), listView2.itemDataSource);

                    listView2.itemDataSource = itemslist2.itemList1.dataSource;
               

                var dataArray2 = [
      { title: "Product1", subtitle: "Netherland", cost: "$500", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/Arrow.png" },
      { title: "Product2", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product3", subtitle: "netherland", cost: "$200", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "huarei", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product4", subtitle: "netherland", cost: "$200", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product5", subtitle: "australia", cost: "$350", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product6", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product7", subtitle: "netherland", cost: "$600", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product8", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product9", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product10", subtitle: "netherland", cost: "$200", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" },
      { title: "Product11", subtitle: "australia", cost: "$250", picture: "/images/Resources/visit_logo.jpg", image: "/images/resources/arrow.png" }];


                var dataList1 = new WinJS.Binding.List(dataArray2);

                //// Create a namespace to make the data publicly
                //// accessible. 
                var publicMembers =
                    {
                        itemList1: dataList1
                    };
                WinJS.Namespace.define("itemslist", publicMembers);
                var ui = WinJS.UI;
                var datePicker;
                button1.addEventListener("click", function () {

                    var dateDiv = document.getElementById("div1");
                    datePicker = new WinJS.UI.DatePicker(dateDiv);
                    datePicker.onchange = dateChangeHandler;
                    function dateChangeHandler(event) {
                        document.getElementById("text1").value = datePicker.current;
                        var datechange = document.getElementById("text1").value;
                        if (datechange == "Thu May 2 12:00:00 UTC+0530 2013") {
                            var listView = element.querySelector(".itemlist").winControl;
                            //listView.itemDataSource = this._items.dataSource;
                            //listView.itemTemplate = element.querySelector(".itemtemplate");
                            //listView.onselectionchanged = this._selectionChanged.bind(this);
                            //listView.layout = new ui.ListLayout();


                            var listView1 = document.querySelector("#viewList").winControl;
                            listView1.itemTemplate = document.querySelector(".itemtemplate");
                            WinJS.Binding.processAll(document.querySelector("#div1"), listView1.itemDataSource);

                            listView1.itemDataSource = itemslist.itemList1.dataSource;

                        }
                    }
                    document.getElementById("text1").value = datePicker.current;
                    var datechange = document.getElementById("text1").value;

                 





                    

                });
                

                var listView = element.querySelector(".itemlist").winControl;

                // Store information about the group and selection that this page will
                // display.
                this._group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
                this._items = Data.getItemsFromGroup(this._group);
                this._itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;

                element.querySelector("header[role=banner] .pagetitle").textContent = this._group.title;

                // Set up the ListView.
                listView.itemDataSource = this._items.dataSource;
                listView.itemTemplate = element.querySelector(".itemtemplate");
                listView.onselectionchanged = this._selectionChanged.bind(this);
                listView.layout = new ui.ListLayout();

                this._updateVisibility();
                if (this._isSingleColumn()) {
                    if (this._itemSelectionIndex >= 0) {
                        // For single-column detail view, load the article.
                        binding.processAll(element.querySelector(".articlesection"), this._items.getAt(this._itemSelectionIndex));
                    }
                } else {
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        // Clean up the backstack to handle a user snapping, navigating
                        // away, unsnapping, and then returning to this page.
                        nav.history.backStack.pop();
                    }
                    // If this page has a selectionIndex, make that selection
                    // appear in the ListView.
                    listView.selection.set(Math.max(this._itemSelectionIndex, 0));
                }
            },

            unload: function () {
                this._items.dispose();
            },

            // This function updates the page layout in response to viewState changes.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />

                var listView = element.querySelector(".itemlist").winControl;
                var firstVisible = listView.indexOfFirstVisible;
                this._updateVisibility();

                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }

                if (this._isSingleColumn()) {
                    listView.selection.clear();
                    if (this._itemSelectionIndex >= 0) {
                        // If the app has snapped into a single-column detail view,
                        // add the single-column list view to the backstack.
                        nav.history.current.state = {
                            groupKey: this._group.key,
                            selectedIndex: this._itemSelectionIndex
                        };
                        nav.history.backStack.push({
                            location: "/pages/split/split.html",
                            state: { groupKey: this._group.key }
                        });
                        element.querySelector(".articlesection").focus();
                    } else {
                        listView.addEventListener("contentanimating", handler, false);
                        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                            listView.indexOfFirstVisible = firstVisible;
                        }
                        listView.forceLayout();
                    }
                } else {
                    // If the app has unsnapped into the two-column view, remove any
                    // splitPage instances that got added to the backstack.
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        nav.history.backStack.pop();
                    }
                    if (viewState !== lastViewState) {
                        listView.addEventListener("contentanimating", handler, false);
                        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                            listView.indexOfFirstVisible = firstVisible;
                        }
                        listView.forceLayout();
                    }

                    listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
                }
            },

            // This function checks if the list and details columns should be displayed
            // on separate pages instead of side-by-side.
            _isSingleColumn: function () {
                var viewState = Windows.UI.ViewManagement.ApplicationView.value;
                return (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait);
            },

            _selectionChanged: function (args) {
                var listView = document.body.querySelector(".itemlist").winControl;
                var details;
                // By default, the selection is restriced to a single item.
                listView.selection.getItems().done(function updateDetails(items) {
                    if (items.length > 0) {
                        this._itemSelectionIndex = items[0].index;
                        if (this._isSingleColumn()) {
                            // If snapped or portrait, navigate to a new page containing the
                            // selected item's details.
                            nav.navigate("/pages/split/split.html", { groupKey: this._group.key, selectedIndex: this._itemSelectionIndex });
                        } else {
                            // If fullscreen or filled, update the details column with new data.
                            details = document.querySelector(".articlesection");
                            binding.processAll(details, items[0].data);
                            details.scrollTop = 0;
                        }
                    }
                }.bind(this));
            },

            // This function toggles visibility of the two columns based on the current
            // view state and item selection.
            _updateVisibility: function () {
                var oldPrimary = document.querySelector(".primarycolumn");
                if (oldPrimary) {
                    utils.removeClass(oldPrimary, "primarycolumn");
                }
                if (this._isSingleColumn()) {
                    if (this._itemSelectionIndex >= 0) {
                        utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
                        document.querySelector(".articlesection").focus();
                    } else {
                        utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
                        document.querySelector(".itemlist").focus();
                    }
                } else {
                    document.querySelector(".itemlist").focus();
                }
            }
        });
    })();

    Saturday, April 27, 2013 12:11 PM
  • hi girija,I have posted code below...plz guide me Thanks in Advance
    Monday, April 29, 2013 5:47 AM
  • Hi,

    I cannot see anything as the CSS is missing. Also most code for 2nd list is commented out. Please make sure you share a running code not a broken one.

    I hope you are trying to select items on the left list and if a item is selected that should appear on the right hand side and if it is de-selected it should appear on the left hand side ? Is it so ?

    If my understanding is correct this should be easy ? Now the implementation should be easy.

    If you want to click items on left list to add/remove items from right list, in the left list oniteminvoked method get the item. here are the steps :

    1. Create a binding list for left list (lets say list1). Add the items to it. The item object should have all properties with a flag (say IsSelected). While adding the items to list one add then as binding object.

    2. create a binding list for right list (lets say list2). Do not add any items to it.

    3. On item invoked of left list get the item clicked. Check the value if IsSelected. If it false , Set the IsSelected to true. take this item and add it to list2. If it is true, it means that this item is already added. So Set the IsSelected to false and remove the item from list2.

    You will have the templates for the left and right list. In the left list of you want any styles to show it is already added (such as change background) you can use the IsSelected flag to determine that.

    Hope this gives you and idea on how to proceed.

    Let me knew if you need further help.

    - Girija

    Tuesday, April 30, 2013 6:38 PM
  • hi girija thanks for your reply...I didnt get creation of flag isSelected...How to create that...can i create that in markup itself????
    Thursday, May 02, 2013 5:43 AM
  • Flag is selected should be in your data (that is bound to the list view) not markup.

    Can you post you full code or some sample (with some sample data) somewhere so that we can repro it and tell you the approach.

    - Girija

    Thursday, May 02, 2013 6:57 PM