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.
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?
<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
0
AspenSquare
Top achievements
Rank 1
answered on 10 Jul 2012, 06:59 PM
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
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
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?
If I add the following to my view:
And this to my Controller:
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?
@
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
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
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"
"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>
@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!).