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

Grid issues in Internet Explorer

16 Answers 112 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 10 Jul 2012, 06:56 PM
I'm having a problem with the Telerik Grid in Internet Explorer (tested in 8 and 9). Here is the code I have in my view.


<div class="clr pt5" style="width:90%;">
<!-- list -->
    @(Html.Telerik().Grid(Model.AmenityList)
        .DataKeys(k => k.Add(o => o.AmenityID))
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("Index", "Home")
                .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);
        })
    )
    @Html.HiddenFor(x => x.PropertyID)
</div>


The Grid looks fine in IE until I add data to it (It looks/works fine in Chrome/Firefox). Once I add data to the Grid, instead of adding a row to my existing Grid it looks like it adds another Grid under my original Grid. See image:

 Double Grid?

16 Answers, 1 is accepted

Sort by
0
AspenSquare
Top achievements
Rank 1
answered on 10 Jul 2012, 06:59 PM
Here is a link to the Grid in Chrome; which works fine.

Properly working/displaying Grid.
0
Pedro
Top achievements
Rank 2
answered on 10 Jul 2012, 07:45 PM
I have many grids being used in my applications and they all look and work well in all the browsers.

I cant recreate your scenario.

I do have a question though:
Why do you have @Html.HiddenFor(x => x.PropertyID) below your grid?

Pedro
0
AspenSquare
Top achievements
Rank 1
answered on 10 Jul 2012, 07:47 PM
It's funny you mention that as that appears to be my problem. I was trying to pass the PropertyID back to my Controller and it works fine in Chrome/Firefox but the PropertyID is null when using IE.
0
Pedro
Top achievements
Rank 2
answered on 10 Jul 2012, 07:49 PM
I'm glad you found your issue :)

Pedro
0
AspenSquare
Top achievements
Rank 1
answered on 10 Jul 2012, 08:02 PM
Any ideas why this would work in Chrome/Firefox but  not in IE?
0
AspenSquare
Top achievements
Rank 1
answered on 10 Jul 2012, 08:39 PM
I have this in my view but no Html.EndForm(). It seems Chrome/Firefox can figure out when the form ends but IE doesn't?

@using (Html.BeginForm())
{


If I add the following to my view:

<input type="hidden" value="@Model.PropertyID" name="PID" />
<input type="text" value="1234" name="test" />

And this to my Controller:

var PID = Request.Form["PID"];
var checkBox = Request.Form["Yes"];
var x = Request.Form["test"];

PID, checkBox and x are all Null when using Internet Explorer but they have the expected values when using Chrome/Firefox.

Is there another way or a proper way that I can pass my PropertyID back to my Controller?
0
Pedro
Top achievements
Rank 2
answered on 10 Jul 2012, 11:20 PM
Whenever there's an @using, you don't need to close or de-allocate the instance. 

As for the inputs. I'm gonna test this with my application and i'll get back to you.

Pedro
0
Pedro
Top achievements
Rank 2
answered on 10 Jul 2012, 11:28 PM
I tested the inputs, and Request.Form["test"] worked in all three browsers (IE, Chrome, Firefox).

Is this something that you need when you're editing an item?
Cause if so, the @Html.HiddenFor() works for that.

If not, have you tried using a query string variable?

or a Session variable?

Pedro
0
AspenSquare
Top achievements
Rank 1
answered on 11 Jul 2012, 01:23 PM
I was trying to use @Html.HiddenFor(x => x.PropertyID) but for some reason, when I use Internet Explorer it isn't picking up that value.


@model Web.CMS.Mvc.Models.Amenity.AmenityModel
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
 
    @Html.ValidationSummary(false, "Please fix these errors.")
 
     
     
    <!-- //////////////////////////////////////////////////////////////////////////////////////// -->
   <div class="iconSecAmenities fl">
        </div>
        <div class="H1 fl">
            Amenities</div>
        <div class="clr">
        </div>
        <div class="lineBreak"></div>
        <br />
        <br />
    <!-- //////////////////////////////////////////////////////////////////////////////////////// -->
     
    <div class="fl w120 b">
        Amenity Name</div>
    <div class="fl">@Html.TextBoxFor(x => x.Name)</div>
 
 
    <div class="fl w120 b clr">
        Amenity Type</div>
    <div class="fl" style="padding-left:2px;">      
        @Html.DropDownListFor(m => m.AmenityTypeID, new SelectList(ViewBag.AmenityTypeList, "AmenityTypeID", "Name"), Model.AmenityID)
    </div>
    <div class="fl clr w120 b">Make Bold</div>
    <div class="fl"><input name="Yes" type="checkbox" value="Yes" /></div>
    <!-- //////////////////////////////////////////////////////////////////////////////////////// -->
     
    <div class="clr"></div>
    <br />
    <div class="buttonAdd fl" onclick="Amenity_AddAmenity(); return false;">
        <a href="./"></a>
    </div>   
     
     
    <div class="clr pt5" style="width:90%;">
        <!-- list -->
        @(Html.Telerik().Grid(Model.AmenityList)
            .DataKeys(k => k.Add(o => o.AmenityID))
            .DataBinding(dataBinding => dataBinding
                .Ajax()
                    .Select("Index", "Home")
                    .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);
                col.Bound(c => c.PropertyID).Hidden(true);
            })
        )
 
        @Html.HiddenFor(x => x.PropertyID)
        XXX @Model.PropertyID XXX
        <input type="hidden" value="@Model.PropertyID" name="PID" />
        <input type="text" value="1234" name="test" />
    </div>
     
     
    <!-- add item -->
    <div class="clr">
    </div>
    <br /><br />
    <div class="fl w120 b">
        Property Map
    </div>
 
    <div class="fl">
        @(Html.Telerik().Upload()
        .Name("attachments")
        .Async(async => async
            .Save("Save", "Amenity",
                new { messageId = ViewBag.MessageId })
            .Remove("Remove", "Amenity",
                new { messageID = ViewBag.MessageId })
        ))
    </div>
     
    <br /><br /><br /><br /><br />
    <div class="buttonSave fl pr10 clr">
        <a href="./"></a>
    </div>
    <div class="buttonCancel fl">
        <a href="./"></a>
    </div>
 
<script src="@Url.Content("~/Scripts/amenity.index.debug.js")" type="text/javascript"></script>
}
0
AspenSquare
Top achievements
Rank 1
answered on 11 Jul 2012, 01:27 PM

Contents of my amenity.index.debug.js, which is called when I click my button to add to my Grid. 

function Amenity_AddAmenity() {
    $.ajax
        ({
            type: "POST"
            , url: "/WebCMS/Amenity/AddAmenity"
            , data: $("Form").serialize()
            , success: function (data) {
                $("#module-div").html(data);
            }
            , error: function (error) {
                alert("There was an error attempting to add the Amenity to the property");
            }
        });
}
0
Pedro
Top achievements
Rank 2
answered on 11 Jul 2012, 02:06 PM
When you're in your Internet Explorer have you tried running $('form').serialize(); in the console and seeing if you get all the values you need?
0
AspenSquare
Top achievements
Rank 1
answered on 11 Jul 2012, 02:22 PM
All I'm getting back is:

"Name=test&AmenityTypeID=3"


In Chrome, I get back:

"Name=test&AmenityTypeID=3&PropertyID=129"
0
Accepted
Pedro
Top achievements
Rank 2
answered on 11 Jul 2012, 02:31 PM
This is probably a long shot but have you tried moving your @Html.HiddenFor(x => x.PropertyID) before your other inputs?

@Html.HiddenFor(x => x.PropertyID)          //<------- Place it here

<div class="fl w120 b">
        Amenity Name</div>
<div class="fl">@Html.TextBoxFor(x => x.Name)</div>
 
 
<div class="fl w120 b clr">
        Amenity Type</div>
<div class="fl" style="padding-left:2px;">      
        @Html.DropDownListFor(m => m.AmenityTypeID, new SelectList(ViewBag.AmenityTypeList, "AmenityTypeID", "Name"), Model.AmenityID)
</div>
0
AspenSquare
Top achievements
Rank 1
answered on 11 Jul 2012, 02:36 PM
I put it at the top of the page, right under @model Web.CMS.Mvc.Models.Amenity.AmenityModel and got back the same results as before.
0
Pedro
Top achievements
Rank 2
answered on 11 Jul 2012, 02:38 PM
Is it still inside your @using (Html.BeginForm()) ?
0
AspenSquare
Top achievements
Rank 1
answered on 11 Jul 2012, 02:45 PM
That worked perfectly. Thank you. I did put it outside my form as you mentioned (doh!).
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