Listbox on Modal

[Enrico]

Hi, I'm having a problem on rendering my listbox every time I call my modal.

 

Please see the attached file.

here's my code:

<div class="modal fade" id="assign-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

    <div class="modal-dialog" role="document" style="max-width:790px!important;">

        <div class="modal-content">

            <div class="modal-header" style="display:block">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                <h4 class="modal-title" id="myModalLabel">t</h4>

            </div>

                <div class="modal-body">

                    <input type='text' id='searchBox' class='k-textbox' placeholder='Search' />

                    <div id="example" role="application">

                        <div class="demo-section k-content">

                            <div>

                                <label for="optional" id="agents">FROM</label>

                                <label for="selected">TO</label>

                                <br />

                                <select id="unoptional"></select>

                                <select id="unselected"></select>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button id="SaveEdit" type="button" data-save class="btn btn-primary">Assign</button>

                    <button type="button" class="btn btn-default" data-cancel>Cancel</button>

                </div>

        </div>

    </div>

</div>

 

$("#optional").kendoListBox({
                    connectWith: "selected",
                    dataTextField: "FullName",
                    dataValueField: "FullName",
                    selectable: "multiple",
                    toolbar: {
                        tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
                    },
                    dataSource: {
                        serverPaging: true,
                        transport: {
                            read: {
                                url: myUrl,
                                dataType: "json"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        FullName: { type: "string" },
                                        Id: { type: "string" }
                                    }
                                }
                            }
                        }
                    }
            });
            $("#selected").kendoListBox({
                dataTextField: "FullName",
                dataValueField: "FullName",
                selectable: "multiple",
            });

 

[Enrico]

Any update?

[Konstantin Dikov]

Hi Enrico,

In the attached screenshot it seems that the ListBox widgets are correctly initialized, so could you please elaborate what is the exact issue that you are facing? If the problem is with the missing data, you could see if the dataSource configuration is correct.

You can also inspect the browser's console for any JavaScript errors that could help you identify the root of the problem.

If the problem persists, please try to isolate the issue in a dojo example that we can test and debug locally:

• http://dojo.telerik.com/

Regards,
Konstantin Dikov
Progress Telerik

[Enrico]

hi Konstantin,

There's no issue with the data. the problem is in the layout. as you can see on my screenshot, the tools rendered 3 times as well as $("#optional").kendoListBox().

 

Thanks,

Enrico

[Enrico]

Any updates?

[Konstantin Dikov]

Hello Enrico,

It is possible that you are initializing the ListBox multiple times, but without an example that we can test and debug locally it will be really difficult to pinpoint the root of the problem. Could you please try to isolate this in a dojo example that we can test locally?


Regards,
Konstantin Dikov
Progress Telerik