Can't refresh

[Paul Kocher]

Hi! I'm trying to refresh the data in a ListBox after an item has been added or removed. I'm rendering the ListBox inside a partial with following code:

View:

<div class="modal-header">

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

        <h4 class="modal-title" id="berufsabschlussModal">Qualifikation bearbeiten</h4>

    </div>

    <div class="modal-body">

        <div class="modal-body">

            <div class="row">   

                <div class="col-md-12">

                    @using (Html.BeginForm("AddQualifikation", "Qualifikation", FormMethod.Post))

                    {

                        @Html.AntiForgeryToken()

                    <div class="input-group">

                       <input type="text" class="form-control" value="@Model.Bezeichnung" name="Bezeichnung">

                       <span class="input-group-btn">

                            <button class="btn btn-primary" type="submit"><i class="fa fa-plus fa-lg"></i>&nbsp;&nbsp;Neu</button>

                       </span>

                       

                    </div>

                    }

                </div>

                

            </div>

                <div class="row">

                @using (Html.BeginForm("EditQualifikation", "Qualifikation"))

                {

                <div class="col-md-12">

                    <br />

                                        @Html.EJ().ListBox("editQualifikation").ClientSideEvents(e=>e.Selected("Onselect")).Width("100%").Height("355").Datasource((IEnumerable<QualifikationView                         Model>)ViewBag.datasource).ListBoxFields(df=>

                                 df.ID("QualifikationID").Text("Bezeichnung").Value("Bezeichnung"))

                    @Html.EJ().ScriptManager()

                </div>

                }

                <div class="col-md-12">

                    <br />

                    <div class="input-group">

                        <span class="text-right">Ausgewählte Qualifikation löschen:</span>

                       <span class="input-group-btn">

                           

                            @using (Html.BeginForm("DeleteQualifikation", "Qualifikation", FormMethod.Post))

                            {

                               

                            <button class="btn btn-danger" type="button" onclick="DelQual(this)">

                                <i class="fa fa-trash fa-lg"></i>&nbsp;&nbsp;Löschen

                            </button>

                            <div id="showErrorMessage"></div>

                            @Html.ValidationSummary()

                            }

                        </span>

                       

                    </div>

                    

                </div>

                </div>

            </div>

        </div>

        <div class="modal-footer">

            <div class="form-actions no-color pull-right">

                <div id="mydata"></div>

                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>

            </div>

        </div>

    </div>

<script type="text/javascript">

    selecteditem_id = 0;

    function Onselect(args) {

            selecteditem_id = args.item.attr("id")

                }

    function DelQual(args) {

        $.ajax({

            type: 'POST',

            url: '/Qualifikation/DeleteQualifikation/' + selecteditem_id,

            //data: { id: selecteditem_id },

            success: function (data) {      

                if (data.result) {

                $(':input', '#myForm')

                    .not(':button, :submit, :reset, :hidden')

                    .val('')

                    .removeAttr('checked')

                    .removeAttr('selected');

                }

                else

                {

                   

                    $('#editQualifikation').ejListBox("refresh");

                    

                }

            }

        });

    }       

</script>

Controller:

[HttpPost]

        [ValidateAntiForgeryToken]

        public JsonResult AddQualifikation(QualifikationViewModel model, string Bezeichnung)

        {

            bool isSuccess = false;

            Mapper.Initialize(cfg =>

            {

                cfg.CreateMap<QualifikationViewModel, Qualifikation>();

                cfg.CreateMap<Qualifikation, QualifikationViewModel>();

            });

            ViewBag.datasource = new CareContext().Qualifikation

                .Select(m => new QualifikationViewModel

                {

                    QualifikationID = m.QualifikationID,

                    Bezeichnung = m.Bezeichnung

                }).ToList();

            Qualifikation qualifikation = Mapper.Map<QualifikationViewModel, Qualifikation>(model);

            Qualifikation q = db.Qualifikation.OrderByDescending(c => c.Stufe).FirstOrDefault();

            int newId = (null == q ? 0 : q.Stufe) + 1;

            qualifikation.Stufe = newId;

            qualifikation.QualifikationID = 4;

            

                    db.Qualifikation.Add(qualifikation);

                    db.SaveChanges();

                    return Json(new { result = isSuccess, responseText = "Something wrong!" 

});

Another issue I'm facing is that when customizing the width, ListBox doesn't seem to get initialized properly:

[Selvamani Sankarappan]

Hi Paul,   

   

Thanks for contacting Syncfusion Support.   

   

Query 1 “I'm trying to refresh the data in a ListBox after an item has been added or removed”   

   

We have checked your shared code example. You can refresh the List items using refresh method of ListBox component. Are you trying to remove the selected value in AJAX post? If yes, you can use the in-built methods. Refer to the following link: https://help.syncfusion.com/api/js/ejlistbox#methods:removeitembyindex   

   

Please let us know the reason for removing items using removeAttr('selected') instead of the methods and properties of ListBox component. What are the issues you faced while refreshing the ListItems?   

   

Query 2 “Issue I’m facing is that when customizing the width, ListBox doesn't seem to get initialized properly”   

   

We have prepared a sample based on your code example, but we were unable to reproduce the reported issue.  Please refer to the following sample:   

http://www.syncfusion.com/downloads/support/forum/131171/ze/ListBox_Sample476924105   

   

Kindly modify the above sample to be issue reproducible for us to check at our end or else provide more details about your issue to provide an appropriate solution.  

   

Regards,   

   

Selvamani S.    

[Paul Kocher]

Hi Selvamani!

Thanks for your support! I was able to fix my issues with your help.

Since I still had the problem with the ListBox only being partially available as shown in my screenshot, 

I fixed it by using 

$('#mainModal').on('shown.bs.modal', function () {

    $('#editQualifikation').ejListBox("refresh", false);

})

:)

[Selvamani Sankarappan]

Hi Paul, 

 

Thanks for the update. 

 

We are happy to hear that the reported issues has been resolved.  

Let us know if you need any further assistance. 

 

Regards, 

Selvamani S.