How To Add Unbound Numerical Textbox

[James]

I'm using the MVC Grid to allow users to search for items and add them to a BOM.  The grid currently has three columns, ItemNumber, Description, and a column with a ClientTemplate that calls an Action method and passes it the ItemNumber. 

I need to add a column that has an empty/unbound textbox that only accepts numbers so they can enter a quantity value that will also get passed to the Action method along with the ItemNumber. 

Am I going about this the best way?  Is there a better way?  How can I add a numeric only textbox and capture the value entered and pass it to an Action method along with the ItemNumber?

 

My grid is defined as:

@(Html.Kendo().Grid<AFLExternal.Models.afl_vw_OTS_Items>()
    .Name("OTSItemGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ITEMNMBR).Width(50).Title("")
                .ClientTemplate(
                    "<a href='" +
                        Url.Action("AddItem", "OTSBOM") +
                        "?id=#= ITEMNMBR #'" +
                    " class='btn btn-success'>#= ITEMNMBR #</a>"
                    );
        columns.Bound(c => c.ITEMDESC).Title("Desc").Width(174).HtmlAttributes(new { style = "font-size: 12px;" });
    })
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(false)
        .Batch(true)
        .Model(m =>
        {
            m.Field(p => p.ITEMNMBR).Editable(false);
            m.Field(p => p.ITEMDESC).Editable(false);
        })
        .Read(read => read.Action("OTSItem_Read", "OTSBOM"))
        .ServerOperation(true)
        .Events(events => events.Error("error_handler"))
    )
    .ToolBar(toolBar =>
    {
        toolBar.Search();
    })
    .Height(400)
    .Sortable()
    .Navigatable()
    .Search(srch =>
    {
        srch.Field(f => f.ITEMNMBR);
        srch.Field(f => f.ITEMDESC);
    })
    )

[Neli]

Hello James,

I am not sure I fully understand the issue. Do you need to have a numeric input and a command button in the same column?

In case you need only numbers to be allowed for entering, you could either use the standard '<input type"number />' or you could initialize Kendo NumericTextBox. Below you will find a link to an article that describes how to use Kendo Widgets inside Grid ClientTemplate. The example is with Menu, but you could use the same approach for NumericTextBox. 

- https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq#how-can-i-use-kendo-ui-widgets-inside-grid-client-column-templates

If you need the column to not be bound to any property, you could configure it as below:

 columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
             Html.Kendo().NumericTextBox<int>()
                       .Name("numeric#=Freight#")
                       .HtmlAttributes(new { @class = "custom" })
                       .ToClientTemplate().ToHtmlString()
           );

And below is an example of using the standard '<input type"number />' and a button in a clientTemplate

 

columns.Template(@<text></text>)
            .ClientTemplate("<input type=\"number\"  class='custom' name='custom' /><button onclick='sendData()'>Send id</button>");

 

For example, when the 'Send id' button is clicked and the sendData() function is invoked, you could send the needed data to the remote end point. 

If this is not the exact issue, could you please elaborate a little bit more on the exact scenario, so I could provide you appropriate assistance? 

I hope, that the above helps you. In case you have any other questions, please do not hesitate to contact us.

Regards,
Neli
Progress Telerik