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

ListBox refresh with HTML

5 Answers 267 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 31 Jan 2020, 11:42 PM

I am trying to add and remove listbox items via modifying the select tag it is based off of when initilizing. So when a user presses a button it will add options tags to the select and when the user presses another button it should refresh the listbox with the new items added by the user. For some reason I cannot get it to work. I've tried destroy() and then remaking the listboxes but that only gives me an empty listbox with no controls. Any help would be appreciated thank you

Here is my code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <base href="https://demos.telerik.com/kendo-ui/listbox/index?_ga=2.84834905.1992168603.1580165777-1170392125.1577463742">
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
  </head>
  <body>
     <form id="form1" runat="server">
    <div runat="server" id="example" role="application" >
      <select runat="server" id="size" style="width: 100%;" ></select><br><br>
      <div class="demo-section k-content">
        <div>
            <label for="optional" id="employees">Allowed Roles</label>
            <label for="selected">Disallowed Roles</label>
            <br />
            <select id="optional" runat="server">
                <option value="min">Text1</option>
                <option value="Adn">Text Fo</option>
                <option value="Adm">Text #</option>
                <option value="Ain">Text 5</option>
            </select>
            <select id="selected" runat="server">
                <option value="min">Text Six</option>
                <option value="Amin">Text Sev</option>
                <option value="Adn">Text Eght</option>
                <option value="AT">Text Twentt</option>
            </select>
        </div>
        <input type="button" id="submit" value="submt" class=""/>
       <input type="button" id="Button1" value="yoooo"/>

      </div>
    </div>
    <style>
      html {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
      }
      #panelbar {
        width: 600px;
        max-width: 700px;
        margin: 0 auto;
      }
      .demo-section label {
        margin-bottom: 5px;
        font-weight: bold;
        display: inline-block;
      }
      #employees {
        width: 270px;
      }
      #example .demo-section {
        max-width: none;
        width: 600px;
      }
      #example .k-listbox {
        width: 236px;
        height: 310px;
      }
      #example .k-listbox:first-of-type {
        width: 270px;
        margin-right: 1px;
      }
    </style>
       <script>
         $(document).ready(function () {

    var template = "<option value='#: Department #'>#: Function #</option>";
    $("#submit").click(function () {
        var d = $('#size').val();
        alert(d);  //alert(c);
        $('#optional > option').each(function () {
            //alert($(this).text() + ' ' + $(this).val());
        });
        var listBox1 = $("#optional").data("kendoListBox");
        // refreshes the list box
        listBox1.remove(listBox1.items());
        listBox1.destroy();
        var listBox = $("#selected").data("kendoListBox");
        // refreshes the list box
        listBox.remove(listBox.items());
        listBox.destroy();

        listbox.items.add

        alert("destroyed kendo boxes")
        $("#optional").kendoListBox({
            connectWith: "selected",
            toolbar: {
                tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
            }
        });
        $("#selected").kendoListBox();
        //$("#size").append('<option value="empl@c1.com">option6</option>');
        //$("#size").kendoDropDownList({onChange: onChange});
    });

    $("#Button1").click(function () {
        $('#optional').append(`<option value="dios"> carao </option>`); 
        $('#selected').append(`<option value="dios"> carao </option>`); 
    });

    $("#optional").kendoListBox({
        connectWith: "selected",
        toolbar: {
            tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
        }
    });
    $("#selected").kendoListBox();

    $("#size").kendoDropDownList({
        change: onChange
    });

    function makeid(length) {
        var result = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }

    //called when user switches employee name in drop down list 
    //to do -- remove all current contents and replace with permissions for that user
    function onChange() {
        //alert("here");
        //$("#optional").empty();
        // refreshes the list box
        //listbox.refresh();
        //listBox.dataSource.read();
    };
});

       </script>
    </form>
  </body>
</html>

5 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 04 Feb 2020, 01:35 PM

Hi David,

I have noticed that the provided Dojo sample throws an error and it is because of the implementation of the "submit" button click handler. I am not completely sure why would you like to delete the items of the ListBox widgets. Could you provide more information on the same?

As per the editing of the items in the ListBox widgets, it is recommended to use one shared data source and handle the add and remove events. Within their handlers, update the data source. An example could be found here:

https://demos.telerik.com/kendo-ui/listbox/drag-and-drop

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
David
Top achievements
Rank 1
answered on 04 Feb 2020, 04:46 PM
I am trying to use the listbox and the drop down list as a way to edit user permissions. The drop down list will have all users. The listbox will have the permissions, they vary by user and department.(permissions vary by department). I want the listbox to update both columns, one being the users permissions and the other being all available permissions within users department.
0
Tsvetomir
Telerik team
answered on 06 Feb 2020, 11:41 AM

Hi David,

Just to recap the whole scenario, you would like to have a data item inside the DropDownList. This data item should have a collection of permissions. After that, one of the ListBox widgets should have all of the permissions excluding the ones from the data item and the other should have the permissions of the data item. Is that correct? 

Whenever a change in the selected data item is present, you should alternate the data source of the respective ListBox widgets. You should alternate the data of the ListBox widgets by passing the collection of permissions to the data() method of the respective data source:

$($0).getKendoListBox().dataSource.data(array); // pass the collection of permissions here

You would have to apply the same approach for the other widget by subtracting the permissions that the item already has.

All the other logic for editing should happen inside the add and remove events of the ListBox widgets. In case additional clarifications are needed, feel free to get back to me.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
David
Top achievements
Rank 1
answered on 06 Feb 2020, 04:09 PM
I am able to modify the listbox with a datasource object like the method posted above however, when I try to access the text and value values when a submit button is pressed I dont get what is displayed i just get [Object object] for text and [Object object] for value. Any reason as to why ? would the listbox modify the data source array and I just loop through that?
0
Viktor Tachev
Telerik team
answered on 10 Feb 2020, 01:27 PM

Hello David,

 

The behavior you describe can be observed when a widget is bound to complex objects. In that scenario the respective widget can be configured to specify what field will be used for displaying and for a value.

The properties are called dataTextField and dataValueField. They have corresponding counterparts in the DropDownList as well and work the same way.

 

 

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListBox
Asked by
David
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
David
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or