Dynamic name for NumericTextBox in Grid

2 posts, 0 answers
  1. C.P.A.M. Van Aaken
    C.P.A.M. Van Aaken avatar
    3 posts
    Member since:
    Jan 2007

    Posted 05 Sep 2014 Link to this post

    We are trying to render a NumericTextBox in a Kendo grid. But the trick to lookup the id with javascript is not working. Can anyone help?

    My code:
    MVC View:
                @(Html.Kendo().Grid(Model.BeginVoorraadModel.Rows)
                .Name("Begingrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Totaalgewicht).Title("Totaalgewicht<br/>(kg)").ClientTemplate(
                        Html.Kendo().NumericTextBox()
                        .Name("BeginVoorraadModel.Rows[#= index('Begingrid', data)#].Totaalgewicht")   <== here is the problem!
                        .Culture("nl-NL")
                        .Decimals(2)
                        .HtmlAttributes(new Dictionary<string, object> { { "value", "#=Totaalgewicht#" }, { "class", "numTextBox" } })
                        .ToClientTemplate().ToHtmlString());

                    columns.Bound(p => p.Omschrijving).Title("Omschrijving");
                    columns.Bound(p => p.Stikstof);
                    columns.Bound(p => p.Ureum);
                    columns.Bound(p => p.Fosfaat);
                    columns.Command(c => { c.Custom("Del").Click("onRemove"); });
                })
                .ToolBar(toolbar =>
                {
                    toolbar.Create().Text("Toevoegen");
                })
                .Editable(edit => { edit.Mode(GridEditMode.InCell); edit.CreateAt(GridInsertRowPosition.Bottom); })
                .Resizable(resizing => resizing.Columns(true))
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(false)
                    .Model(model =>
                    {
                        model.Id(p => p.Id);
                        model.Field(p => p.Totaalgewicht).Editable(false);
                    })
                    .Read(r => r.Action("ReadBeginVoorraad", "Kunstmest"))
                    .Destroy(r => r.Action("DeleteBeginVoorraad","Kunstmest"))
                ) 

    Javascript:
    function index(grid, dataItem) {
        var data = $('#' + grid).data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

    Thnx!
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 09 Sep 2014 Link to this post

    Hello Van Aaken,

    This is because `BeginVoorraadModel.Rows` is something which is available in server, while `#= index('Begingrid', data)#` expression will be executed on client where the first part will not be available.

    You must use another approach for generating unique ids. 

    Shouldn't the following be enough, if I understand your data correctly:
    .Name("#= Totaalgewicht#")


    Regards,
    Nikolay Rusev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top