Function accepts numbers but not strings from grid cell

[Mark]

function Increment(AbilityName) {
alert(AbilityName);
}

</script>
<p>
@(Html.Kendo().Grid<AbilityGenerator.ViewModels.AbilityCollection>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AbilityName).Title("Ability");
columns.Bound(c => c.BaseScore).Title("Base Score");
columns.Template(e => { }).ClientTemplate(" ").Width(50);

columns.Bound(c => c.TotalScore).Title("Total Score");
columns.Bound(c => c.AbilityModifierBonus).Title("Ability Bonus");
})
.ClientRowTemplate(
"<tr data-uid='#: uid #'>" +
"<td>" + "<span>#: data.AbilityName #</span></td>" +
"<td>" + "<span>#: data.BaseScore #</span></td>" +
"<td height='35' ><table height='30'><tr><td><img alt='Up' onclick='Increment(#: data.AbilityName #)' height='15' src='/Images/Up.png' /></td></tr><tr><td><object float='left' height='15' data='/Images/Down.png' /></td.</tr></table></td>" +
"<td>" + "<span>#: data.TotalScore #</span></td>" +
"<td>" + "<span>#: data.AbilityModifierBonus #</span></td>" +
"</tr>"
)

.Scrollable(scrollable => scrollable.Enabled(false))

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAbilityScores", "Home"))
)
)

[Dimiter Madjarov]

Hello Mark,

I assume the reason for the issue is that the quotes are breaking the template syntax. Sample approach would to attach the click handler separately via jQuery instead inline. Here is a sample implementation.

Regards,
Dimiter Madjarov
Telerik

 

 

[Mark]

It worked well for a Kendo UI Grid, thank you. Can you show me how with a Razor Template? var model = grid.dataItem($(this).closest("tr")); doesn't work for the MVC Template.

 

@(Html.Kendo().Grid<AbilityGenerator.ViewModels.AbilityCollection>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AbilityId).Hidden();
columns.Template(@<text>@item.AbilityName</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: AbilityName #</span>").Width(50).Title("Ability");
columns.Template(@<text>@item.BaseScore</text>).ClientTemplate("<table><tr><td width='40'><span style='font-size:30px'>#: BaseScore #</span><td><table><tr><td><img width='20' class='Up' alt='Up' src='/Images/Up.png'></td></tr><tr><td><img width='20' class='Down' alt='Down' src='/Images/Down.png'></td></tr></table></td></td></tr></table>").Width(20).Title("Base Score");
columns.Template(@<text>@item.TotalScore</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: TotalScore #</span>").Width(50).Title("Total Score");
columns.Template(@<text>@item.AbilityModifierBonus</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: AbilityModifierBonus #</span>").Width(50).Title("Ability Bonus");
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("GetAbilityScores", "Home"))
.Update(update => update.Action("SaveAbilityScores", "Home"))
.Model(model =>
{
model.Id(p => p.AbilityId);
model.Field(p => p.AbilityName).Editable(false);
model.Field(p => p.TotalScore).Editable(false);
model.Field(p => p.AbilityModifierBonus).Editable(false);
model.Field(p => p.BaseScore).Editable(false);
}))
)

<script>

$("#grid").on("click", ".Up", function (e) {
alert("up");
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem($(this).closest("tr"));
var baseScore = model.BaseScore;
baseScore += 1;
model.set("BaseScore", baseScore);
});

$("#grid").on("click", ".Down", function (e) {
alert("Down");
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem($(this).closest("tr"));
var baseScore = model.BaseScore;
baseScore -= 1;
model.set("BaseScore", baseScore);
});
</script>

[Mark]

The problem was with .Model. This works:

 

@(Html.Kendo().Grid<AbilityGenerator.ViewModels.AbilityCollection>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AbilityId).Hidden();
columns.Template(@<text>@item.AbilityName</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: AbilityName #</span>").Width(50).Title("Ability");
columns.Template(@<text>@item.BaseScore</text>).ClientTemplate("<div style='float:left;margin-Top:10px;margin-right:20px;width:40px;text-align:center'><span style='font-size:30px;margin-top:20px'>#: BaseScore #</span></div><div style='float:left;width:20px'><img width='20' class='Up' alt='Up' src='/Images/UpArrow.png'><img width='20' class='Down' alt='Down' src='/Images/DownArrow.png'></div>").Width(20).Title("Base Score");
columns.Template(@<text>@item.TotalScore</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: TotalScore #</span>").Width(50).Title("Total Score");
columns.Template(@<text>@item.AbilityModifierBonus</text>).ClientTemplate("<span style='font-size:30px;horizontal-align:middle'>#: AbilityModifierBonus #</span>").Width(50).Title("Ability Bonus").Width(30);
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("GetAbilityScores", "Home"))
.Update(update => update.Action("SaveAbilityScores", "Home"))
)
)

 

<script>

$("#grid").on("click", ".Up", function (e) {
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem($(this).closest("tr"));
var baseScore = model.BaseScore;
if(baseScore < 45)
baseScore += 1;
model.set("BaseScore", baseScore);
});

$("#grid").on("click", ".Down", function (e) {
var grid = $("#grid").data("kendoGrid");
var model = grid.dataItem($(this).closest("tr"));
var baseScore = model.BaseScore;
if (baseScore > 1)
baseScore -= 1;
model.set("BaseScore", baseScore);
});

</script>

[Dimiter Madjarov]

Hello Mark,

Thanks for the updates. I am glad the issue is resolved.

Regards,
Dimiter Madjarov
Telerik