Function accepts numbers but not strings from grid cell

5 posts, 1 answers
  1. Mark
    Mark avatar
    3 posts
    Member since:
    Jan 2015

    Posted 09 Apr 2015 Link to this post

    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"))
    )
    )
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 10 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. Mark
    Mark avatar
    3 posts
    Member since:
    Jan 2015

    Posted 10 Apr 2015 in reply to Dimiter Madjarov Link to this post

    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>

  4. Mark
    Mark avatar
    3 posts
    Member since:
    Jan 2015

    Posted 11 Apr 2015 in reply to Mark Link to this post

    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>

  5. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 13 Apr 2015 Link to this post

    Hello Mark,

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

    Regards,
    Dimiter Madjarov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top