javascript kendo-ui kendo-treeview kendo-listbox

kendo ui Listbox remove item

Hey all I need some help with getting a selected item and removing it from the kendoListBox.

I currently have successfully been able to add the checked item(s) into the kendoListBox when checking an item in the kendoTreeView but I am unable to find how to go about removing an item when I uncheck it from the kendoTreeView.

let apiData = {
  "object_list": [{
    "Name": "facebook",
    "Description": null,
    "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "twitter",
    "Description": null,
    "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "Google",
    "Description": null,
    "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Search Engines"
  }]
};

$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  check: onCheck,
  dataSource: {
    data: apiData,
    schema: {
      model: {
        children: 'items'
      },
      parse: (data) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

$("#Sources").kendoListBox();

function onCheck(e) {
  var checkedNodes = [];
  var checkedNode = e.node.innerText;
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    console.log("Its already selected *REMOVE*");
    var listBox = $("#Sources").data("kendoListBox");
    
    console.log(listBox);
    
  } else {
    console.log("Its just now been selected *ADD*");
    var listBox = $("#Sources").data("kendoListBox");

    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

        #treeview .k-sprite {
          background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
          background-position: 0 0;
        }

        .folder {
          background-position: 0 -16px;
        }

        .pdf {
          background-position: 0 -32px;
        }

        .html {
          background-position: 0 -48px;
        }

        .image {
          background-position: 0 -64px;
        }

        #filterText {
          width: 100%;
          box-sizing: border-box;
          padding: 6px;
          border-radius: 3px;
          border: 1px solid #d9d9d9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
      <script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>

I have seen a few examples but they all seem to do nothing.

This code below does remove the selected item in the (hidden) select box but not from the kendoListBox.

$("select option[value='" + checkedNode + "']").remove();

It seems that the Kendo UI places this into the kendoListBox when adding an item.

<li class="k-item" role="option" aria-selected="false">facebook</li>

And the code here only shows how to remove the first item in the kendoListBox and not a selected one.

var listBox = $("#listBox").data("kendoListBox");
listBox.remove(listBox.items().first());

I'm sure it will be something easy I am overlooking but it would be great for someone to help me out in finding a way to remove it via the kendoUI api/commands.

Solution

You can do it in two ways:

Using ListBox's remove() method with the target node selected by jQuery:

let apiData = {
  "object_list": [{
    "Name": "facebook",
    "Description": null,
    "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "twitter",
    "Description": null,
    "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "Google",
    "Description": null,
    "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Search Engines"
  }]
};

$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  check: onCheck,
  dataSource: {
    data: apiData,
    schema: {
      model: {
        children: 'items'
      },
      parse: (data) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

$("#Sources").kendoListBox();

function onCheck(e) {
  let checkedNodes = [],
      checkedNode = e.node.innerText,
      listBox = $("#Sources").data("kendoListBox");
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    let $listBoxItem = listBox.wrapper.find(`li:contains("${e.node.innerText}")`);
    listBox.remove($listBoxItem);
  } else {
    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

#treeview .k-sprite {
          background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
          background-position: 0 0;
        }

        .folder {
          background-position: 0 -16px;
        }

        .pdf {
          background-position: 0 -32px;
        }

        .html {
          background-position: 0 -48px;
        }

        .image {
          background-position: 0 -64px;
        }

        #filterText {
          width: 100%;
          box-sizing: border-box;
          padding: 6px;
          border-radius: 3px;
          border: 1px solid #d9d9d9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
      <script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>

Using DataSource's remove() method with the target Model selected from dataItems():

let apiData = {
  "object_list": [{
    "Name": "facebook",
    "Description": null,
    "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "twitter",
    "Description": null,
    "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Social Networks"
  }, {
    "Name": "Google",
    "Description": null,
    "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
    "DocumentType": null,
    "ProviderId": 2,
    "Cat": "Search Engines"
  }]
};

$("#treeview").kendoTreeView({
  checkboxes: {
    checkChildren: true
  },
  check: onCheck,
  dataSource: {
    data: apiData,
    schema: {
      model: {
        children: 'items'
      },
      parse: (data) => {
        let newData = [];

        data.object_list.forEach(item => {
          let parent = newData.find(parentItem => parentItem.text === item.Cat);

          if (!parent) {
            parent = {
              id: 2,
              text: item.Cat,
              expanded: true,
              items: [],
              spriteCssClass: "folder"
            };

            newData.push(parent);
          }

          parent.items.push({
            id: 3,
            text: item.Name,
            spriteCssClass: "image"
          });
        });

        return [{
          id: 1,
          text: 'Categories',
          expanded: true,
          spriteCssClass: "rootfolder",
          items: newData
        }];
      }
    }
  }
});

$("#Sources").kendoListBox();

function onCheck(e) {
  let checkedNodes = [],
      checkedNode = e.node.innerText,
      listBox = $("#Sources").data("kendoListBox");
  
  console.log(e.node.innerText);
  
  if (e.node.ariaChecked == "false") {
    let listBoxItem = listBox.dataItems().find(item => item.text === e.node.innerText);
    
    if (listBoxItem) {
      listBox.dataSource.remove(listBoxItem);
    }
    
  } else {
    listBox.add({
      text: checkedNode,
      value: checkedNode
    });
  }
}

function onExpand(e) {
  if ($("#tbSourcesFilter").val() == "") {
    $(e.node).find("li").show();
  }
}

$("#tbSourcesFilter").keyup(function(e) {
  var filterText = $(this).val().toLowerCase();

  //console.log("filterText: ", filterText);

  if (filterText !== "") {
    $("#treeview .k-group .k-group .k-in").closest("li").hide();
    $("#treeview .k-group").closest("li").hide();

    $("#treeview .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        var treeView = $("#treeview").data("kendoTreeView");
        treeView.expand($(this).parents("li"));
        $(this).show();
      });
    });

    $("#treeview .k-group .k-in:contains(" + filterText + ")").each(function() {
      $(this).parents("ul, li").each(function() {
        $(this).show();
      });
    });
  } else {
    //console.log("k-group: ", $("#treeview .k-group").find("li").show());
    $("#treeview .k-group").find("li").show();
    var nodes = $("#treeview > .k-group > li");
    //console.log("nodes: ", nodes);

    $.each(nodes, function(i, val) {
      //console.log(nodes[i].getAttribute("data-expanded"));
      if (nodes[i].getAttribute("data-expanded") == null) {
        $(nodes[i]).find("li").hide();
      }
    });
  }
});

#treeview .k-sprite {
          background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder {
          background-position: 0 0;
        }

        .folder {
          background-position: 0 -16px;
        }

        .pdf {
          background-position: 0 -32px;
        }

        .html {
          background-position: 0 -48px;
        }

        .image {
          background-position: 0 -64px;
        }

        #filterText {
          width: 100%;
          box-sizing: border-box;
          padding: 6px;
          border-radius: 3px;
          border: 1px solid #d9d9d9;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
      <link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
      <script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
      <script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<input id="filterText" type="text" placeholder="Search categories" />
<div id="treeview"></div>
<select id="Sources"></select>