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

Duplicate Grid appearing in Internet Explorer

9 Answers 55 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
AspenSquare
Top achievements
Rank 1
AspenSquare asked on 12 Jul 2012, 02:49 PM
I started a new thread for this since the main problem in my old thread was handled.

If there are no rows in my Grid it appears fine in IE but once I add a row I get a duplicate Grid (see attached image).



I can delete from the top Grid but I get an error when attempting to delete from the Bottom Grid.

When I delete an entry from the top grid the rows in the lower grid start to appear in the top Grid as well.

9 Answers, 1 is accepted

Sort by
0
AspenSquare
Top achievements
Rank 1
answered on 12 Jul 2012, 02:54 PM
I forgot to attach my code.....doh!

<div class="clr pt5" style="width:90%;">
    <!-- list -->
    @(Html.Telerik().Grid(Model.AmenityList)
        .DataKeys(k => k.Add(o => o.AmenityID))
        .DataBinding(dataBinding => dataBinding
                .Ajax()
                    .Delete("DeleteAmenity", "Amenity"))
        .Name("PropertyAmenitListGrid")
        .Scrollable()
        .Pageable()
        .Selectable()
        .Columns(col =>
        {
            col.Bound(c => c.Name).Width(140).Encoded(false);
            col.Command(commands =>
            {
                commands.Delete();
            }).Width(100);
        })
    
</div>
0
Pedro
Top achievements
Rank 2
answered on 13 Jul 2012, 03:48 PM
Which IE version are you having this problem with?

Does it work fine if you turn on compatibility mode?

Pedro
0
Pedro
Top achievements
Rank 2
answered on 13 Jul 2012, 03:52 PM
If that doesn't work.

Try adding :
<style>
   .t-grid table
   {
      table-layout: fixed;
   }
</style>
to your page, and see if that fixes it.

Pedro
0
AspenSquare
Top achievements
Rank 1
answered on 13 Jul 2012, 04:00 PM
Neither made a difference.

In compatibility mode the second grid doesn't show up in IE but when I click my add button to add a new row nothing appears.

The new rows will show up in Chrome though.

Once I cleared my cache in IE the two grids still show up.
0
Pedro
Top achievements
Rank 2
answered on 13 Jul 2012, 04:02 PM
Which IE are you using?
0
AspenSquare
Top achievements
Rank 1
answered on 13 Jul 2012, 05:18 PM
IE 9, sorry.
0
AspenSquare
Top achievements
Rank 1
answered on 18 Jul 2012, 05:33 PM
Sorry to get back so late, I was working on something else.

It appears that the 2nd Grid appears when I add this line to the Grid: commands.Delete().ButtonType(Telerik.Web.Mvc.UI.GridButtonType.BareImage); 

Before that everything appears in one Grid.


@(Html.Telerik().Grid(Model.AmenityList)
        .Name("PropertyAmenityListGrid")
        .DataKeys(d => { d.Add(a => a.AmenityID).RouteKey("AmenityID"); })
        .DataBinding(dataBinding => dataBinding
              //Ajax binding
              .Ajax()
                    .Delete("DeleteAmenity", "Amenity")
                   //The action method which will return JSON
                   //.Select("Index", "Amenity")
        )
        .Pageable()
        .Sortable()
        .Selectable()
        .Columns(col =>
        {
            col.Bound(c => c.Name).Width(140).Encoded(false);
            col.Command(commands =>
            {
                commands.Delete().ButtonType(Telerik.Web.Mvc.UI.GridButtonType.BareImage);
            }).Width(100);
        })
        )
0
AspenSquare
Top achievements
Rank 1
answered on 18 Jul 2012, 05:47 PM
From my controller:

public ActionResult Index(int PropID)
       {
           Mvc.Models.Amenity.AmenityModel _amenities = new Models.Amenity.AmenityModel();
           _amenities.AmenityList = Mvc.Models.Amenity.Repository.AmenityMethods.GetAmenitiesAll(PropID);
           _amenities.PropertyID = PropID;
 
           List<Models.AmenityType.AmenityTypeModel> _aList = Mvc.Models.AmenityType.Repository.AmenityTypeMethods.GetAmenityTypes();
           ViewBag.AmenityTypeList = _aList;
 
           return PartialView("~/Views/Amenity/Index.cshtml", _amenities);
       }


[HttpPost]
        public ActionResult AddAmenity(Int32 AmenityTypeID, Models.Amenity.AmenityModel A)
        {
            var checkBox = Request.Form["Yes"];
            if (checkBox != null)
            {
                A.Name = "<b>" + A.Name + "</b>";
            }
            if (ModelState.IsValid)
            {
                Models.Amenity.Repository.AmenityMethods.AddAmenity(A);
            }
            Mvc.Models.Amenity.AmenityModel _amenityModel = new Models.Amenity.AmenityModel();
            _amenityModel.AmenityList = Mvc.Models.Amenity.Repository.AmenityMethods.GetAmenitiesAll(A.PropertyID);
            _amenityModel.PropertyID = A.PropertyID;
 
            return Index(A.PropertyID);
            //return PartialView("~/Views/Amenity/Index.cshtml", _amenityModel);
        }
 
        [GridAction]
        [HttpPost]
        public ActionResult DeleteAmenity(int id)
        {
            Mvc.Models.Amenity.AmenityModel _amenityModel = Mvc.Models.Amenity.Repository.AmenityMethods.GetAmenity(id);
            if (_amenityModel != null)
            {
                Mvc.Models.Amenity.Repository.AmenityMethods.DeleteAmenity(_amenityModel);
            }
             
            return PartialView(new GridModel(Mvc.Models.Amenity.Repository.AmenityMethods.GetAmenitiesAll(_amenityModel.PropertyID)));
        }


0
AspenSquare
Top achievements
Rank 1
answered on 19 Jul 2012, 02:32 PM
I found my problem.

It was in my view. I had the Grid within the BeginForm:

@using (Html.BeginForm())
{
...
...
...
@(Html.Telerik().Grid...
}

Once I moved the grid outside the BeginForm it was fine. I think Internet Explorer was having an issue with the forms as they appeared to be duplicated.
Tags
Grid
Asked by
AspenSquare
Top achievements
Rank 1
Answers by
AspenSquare
Top achievements
Rank 1
Pedro
Top achievements
Rank 2
Share this question
or