This is a migrated thread and some comments may be shown as answers.

Trouble With Grid Templates Using Javascript

3 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 14 Jan 2013, 10:32 PM
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.

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 16 Jan 2013, 03:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steven
Top achievements
Rank 1
answered on 16 Jan 2013, 06:24 PM
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: '???????????????'
}

0
Vladimir Iliev
Telerik team
answered on 18 Jan 2013, 12:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Steven
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Steven
Top achievements
Rank 1
Share this question
or