[Solved] Grid issues in Internet Explorer

[AspenSquare]

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?

[AspenSquare]

Here is a link to the Grid in Chrome; which works fine.

Properly working/displaying Grid.

[Pedro]

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

[AspenSquare]

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.

[Pedro]

I'm glad you found your issue :)

Pedro

[AspenSquare]

Any ideas why this would work in Chrome/Firefox but  not in IE?

[AspenSquare]

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?

[Pedro]

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

[Pedro]

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

[AspenSquare]

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>
}

[AspenSquare]

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

[Pedro]

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?

[AspenSquare]

All I'm getting back is:

"Name=test&AmenityTypeID=3"


In Chrome, I get back:

"Name=test&AmenityTypeID=3&PropertyID=129"

[Pedro]

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>

[AspenSquare]

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.

[Pedro]

Is it still inside your @using (Html.BeginForm()) ?

[AspenSquare]

That worked perfectly. Thank you. I did put it outside my form as you mentioned (doh!).