I want to implement functionality to display two groups

Question

I want to implement functionality to display two groups one is for weekdays( Mon -fri) and other is for weekend(Sat-sun) .

And need option of select all in both the groups. Also need to display the slected values of the group. what should I use.

<script>
    var Days = [{
        "key": "Weekdays",
        "items": ["Mon", "Tue", "Wed", "Thu", "Fri"]
    }, {
        "key": "Weekend",
        "items": ["Sat", "Sun"]
    }
    ];
    $(function () {
        $("#simpleList").dxList({
            dataSource: Days,
            height: "100%",
            grouped: true,
            selectionMode: "all",
            showSelectionControls: true,

            collapsibleGroups: false,

            onSelectionChanged: function (data) {
               // $("#selectedItemKeys").text(listWidget.option("selectedItemKeys").join(", "));
            },
            groupTemplate: function (data) {
                return $(" <input type='checkbox' id='myCheck' onclick='myFunction(this)' data-key="+data.key+"> <div>" + data.key + "</div>");

            }
        });
        $("#checked").dxCheckBox({
            value: true
        });


    });


    function myFunction(obj) {

        // If the checkbox is checked, display the output text
        if ($(obj).prop('checked')  == true) {
            if ($(obj).attr("data-key") == 'Weekdays') {
                var newarray = $("#simpleList").dxList("instance").option("selectedItems");
                newarray.includes("Mon", "Tue", "Wed", "Thu", "Fri");

                $("#simpleList").dxList("instance").option("selectedItems", ["Mon", "Tue", "Wed", "Thu", "Fri"]);
            }
            if ($(obj).attr("data-key") == 'Weekend'){
                $("#simpleList").dxList("instance").option("selectedItems", ["Sat", "Sun"]);
            }
        } else {
            $("#simpleList").dxList("instance").option("selectedItems", []); 
        }
    }
</script>

Answer 1

I think what you are looking for is dxTagBox. It allows for batch selection which is basically what you need when selecting from Monday through Friday or weekends. Check this code below for general idea.

$(function(){
  var days = new DevExpress.data.DataSource({
        store: [
          { id: 1, group: 'Weekdays', day: 'Moday' },
          { id: 2, group: 'Weekdays', day: 'Thursday' },
          { id: 3, group: 'Weekdays', day: 'Wednesday' },
          { id: 4, group: 'Weekdays', day: 'Thursday' },
          { id: 5, group: 'Weekdays', day: 'Friday' },
          { id: 6, group: 'Weekend', day: 'Saturday' },
          { id: 7, group: 'Weekend', day: 'Sunday' }
        ],
        key: "id",
        group: "group"
    });

  var days = $("#widget").dxTagBox({
    "dataSource": days,
    "valueExpr": "id",
    "displayExpr": "day",
    grouped: true,
    multiline: true,
    showSelectionControls: true,
    groupTemplate: function(groupData, groupIndex, groupElement){
      groupElement.empty();
      groupElement.append("<div id='" +  groupData.key +"'></div>");
      $("#"+groupData.key).dxCheckBox({
        name: groupData.key,
        text: groupData.key,
        onValueChanged: function(e){
          if(e.component.option("name") == "Weekdays")
            toggleWeekdays(e.value);
          else if(e.component.option("name") == "Weekend")
            toggleWeekends(e.value);
        }
      });
    },
  }).dxTagBox("instance");

  function toggleWeekdays(value){
    var dayValues = [];
    if(value){
      if($("#Weekend").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5,6,7);
      else
        dayValues.push(1,2,3,4,5);
    }
    else{
      if($("#Weekend").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(6,7);
    }
    days.option("value", dayValues);
  }  

  function toggleWeekends(value){
    var dayValues = [];
    if(value){
      if($("#Weekdays").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5,6,7);
      else
        dayValues.push(1,2,3,4,5);
    }
    else{
      if($("#Weekdays").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5);
    }
    days.option("value", dayValues);
  } 
});