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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can't refresh

Thread ID:

Created:

Updated:

Platform:

Replies:

131171 Jun 26,2017 11:09 AM UTC Jun 29,2017 05:13 AM UTC ASP.NET MVC 3
loading
Tags: ListBox
Paul Kocher
Asked On June 26, 2017 11:09 AM UTC

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 [Syncfusion]
Replied On 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.    


Paul Kocher
Replied On 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);

})


:)



Selvamani Sankarappan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;