We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't refresh

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:


3 Replies

SS Selvamani Sankarappan Syncfusion Team June 27, 2017 09:34 AM UTC

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:   
   
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.    



PK Paul Kocher June 28, 2017 10:03 AM UTC

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);

})


:)




SS Selvamani Sankarappan Syncfusion Team June 29, 2017 05:13 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon