Trouble With Grid Templates Using Javascript

[Steven]

There are two things I would like to accomplish:

1. I want to be able to use a Kendo Numeric Textbox in my Kendo Grid without binding it to a field.
2. I want to be able to retrieve this value.

My grid looks as follows:

@(Html.Kendo().Grid<ProofData>()
        .Name("ProofDataGrid")
        .AutoBind(true)
        .HtmlAttributes(new { style = "height: 500px; font-size: 12px;" })
        .Columns(columns =>
        {
            columns.Bound(c => c.Number).Groupable(false);
            columns.Bound(c => c.ProofAmount).Groupable(false);
            columns.Bound(c => c.ProofAssignmentID).Groupable(false);
            columns.Bound(c => c.PrimaryAmount).Groupable(true);
            columns.Bound(c => c.PrimaryAssignmentID).Groupable(true);
            columns.Template(@<textarea></textarea>).Title("FinalData");
        }
        )
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(pageable => pageable
            .Enabled(true)
            .PageSizes(new int[4] { 5, 10, 25, 50 })
            .Refresh(true))
            .Navigatable(n => n.Enabled(true))
        .Sortable()
        .Scrollable()
        .Selectable()
        .DataSource(datasource => datasource
                .Ajax()
                .Batch(true)
                .Update("Editing_Update", "Grid")
                .Model(model => model.Id(c => c.ID))
                .ServerOperation(false))
                        .Events(ev => ev.SaveChanges("debugData"))
    )

When I click a button, I format the Grid as follows:

function formatProofGridData(id) {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Proofing/GetInconsistentData/",
                    dataType: "json",
                    data: { id: id }
                }
            },
            // determines if changes will be send to the server individually or as batch
            batch: true,
                model: {
                    id: "ID",
                    fields: {
                        ID: { validation: { required: true} },
                        Number: { editable: false },
                        ProofAmount: { editable: false },
                        PrimaryAmount: { editable: false },
                        ProofAssignmentID: { editable: false },
                        PrimaryAssignmentID: { editable: false },
                    }
                }
            }
            //...
        });
        $("#ProofDataGrid").kendoGrid({
            dataSource: dataSource,
            toolbar: ["save", "cancel"],
            editable: { update: true },
            scrollable: true,
            sortable: true,
            pageable: true,
            columns: [
                    {
                        field: "Number",
                        title: "Number"
                    },
                      {
                          field: "ProofAmount",
                          title: "ProofAmount"
                      },
                      {
                          field: "PrimaryBidAmount",
                          title: "PrimaryBidAmount"
                      },
                      {
                          field: "ProofAssignmentID",
                          title: "ProofAssignmentID"
                      },
                      {
                          field: "PrimaryAssignmentID",
                          title: "PrimaryAssignmentID"
                      },
                      {
                          title: "FinalData",
                          template: '<input id="numeric" type="number" value="" min="0" max="100" step="1" />'
                      }]

        });
              }

Basically, I'm loading two sets of data side by side to compare the values to determine which has the correct values. The extra non field bound column is for me to input a value. When I click "Save", I am going to use this value to place the corrected value in another table.

I am currently loading the data this way so I can format the data before it hits the grid. So far I have been unsuccessful in converting the textbox into a numeric textbox. And secondly, I also have been unable to figure out how to retrieve the data in the textbox.

I have checked the data in $('#ProofDataGrid').data('kendoGrid').dataSource.data(); but have not seen the data I input into the textbox fields.

Any help for either issue would be appreciated.

[Vladimir Iliev]

Hi Steven,

Basically to be able to achieve the desired behavior you should use create ClientTemplate that contains NumericTextBox helper and use the ToClientTemplate and ToHtmlString extension methods to convert it to valid template. Then you should use the DataBound event of the Grid to find all script tags generated by the NumericTextBoxes and append the to the body:

Template Column:

//generate unique names for every row by including the model ID in the name
columns.Template(t => { }).ClientTemplate((Html.Kendo().NumericTextBox<decimal>().Name("currency_#=ID#").Format("c").Value(30).ToClientTemplate().ToHtmlString()));

DataBound evenr handler:

function onDataBound(e) {
    $("body").append(this.tbody.find("script"))
}

Kind Regards,
Vladimir Iliev
the Telerik team

[Steven]

Hi Vladimir,

I appreciate the response. I have determined how to access the textbox value using a class selector with jQuery:

{
                          title: "Input Field",
                          template: '<input id="numeric" class="inputField" type="number" value="" min="0" max="100" step="1" />'
}

function debugData() {
        var inputField = $(".inputField");
        var x;

        for (var i = 0; i < inputField.length; i++) {
            x = inputField[i].value;
        }
    }

However, as far as changing the textbox to a numeric textbox. I am formatting the grid after it has been generated. So when the function formatProofGridData(id); has been called, the numeric textbox column is overwritten.

How can I format the grid using javascript to generate the template?

{
                          title: "Input Field",
                          template: '???????????????'
}

[Vladimir Iliev]

Hi Steven,

 
I'm not sure If I understand you correctly but if you need to create template column with NumericTextBox widget for the second Grid you can use the following approach:

FinalData column template:

{
    field: "FinalData",
    template: "<input class='numeric' data-role='numerictextbox' value='' data-format='c' min='0' max='100' step='1' />"
}

Define DataBound event of the "ProofDataGrid" which initializes the NumericTextBoxes:

dataBound: function() {
    kendo.bind($("#ProofDataGrid tbody .numeric"), [{}]);
},

Kind Regards,
Vladimir Iliev
the Telerik team