[Solved] Clientside clone of numeric text box

[Jesse]

My form has a 'click to add additional field' link
clientside I wish to clone an existing a Telerik NumericTextBox, is there a 'best practice' method to use?

I define the Telerik NumericTextBox server side in the view

@Html.Telerik(
    ).NumericTextBox(
    ).Name("Hours_1"
    ).Spinners(false
    ).MinValue(0
    ).MaxValue(24)

This will render html markup that looks like

<div class="t-widget t-numerictextbox" id="Hours_1">
  <input class="t-input" id="Hours_1-input" name="Hours_1" value="" />
</div>

and javascript

jQuery('#Hours_1').tTextBox({
  val:null,
  step:1,
  minValue:0,
  maxValue:24,
  digits:2,
  groupSize:3,
  negative:1,
  text:'Enter value',
  type:'numeric',
  inputAttributes:{}
});

So I tried jquery clone with event copy set to true; this ends up binding both my cloned textbox and the original to the same events; changing one will change the value in the other

// not good because cloned textbox and orignal are both bound to the same events
var clone = $('#Hours_1').clone(true);
// ... code not shown that updates html id to Hours_2 on clone
$('#container-div').append(clone);

other options I have considered
1) jquery clone with false to just get the dom elements
2) try new jquery template and put server code in script template

In both cases above I would then need to instantiate a new jQuery().tTextBox - but I need to copy all options from the original, I can cut and paste these from the generated code but this does not seem like a good solution

maybe there is a built in way to accomplish this?

Thanks for any help

- Jesse

[Jan]

Hi Jesse,

i have exactly the same problem.
Can you show me your javascript code for replacing the id and name attribute values in the object graph returned by clone() ?
My javascript skills are just evolving, so i need some directional help on that :)

Jan

[Jesse]

I am still working through some stuff - I'll try to post some code tomorrow

so far I had to modify the telerik.textbox.js and add a property, looking at other alternatives now

there is an easier solution that means making an ajax server call - I am trying not to do that

[Jesse]

Jan,

turns out the clone doesn't work so good ends up creating multiple textboxes but they are wrapped by the same instance of telerik numerictextbox javascript so changing one seems to update the others

I worked through two different approaches, both involve a heavy dose of javascript

1) hack an additional property on telerik.textbox.js
this uses just javascript with no server calls

2) use RenderAction
my co-worker came up with this approach it works nicely but does cause a server call each time a new textbox is added. The server call is via ajax so it doesn't refresh the browser but is a little bit slower

code is up on github
https://github.com/house9/SampleAspMvc3WithTelerik

there is a download link there for a zip
it is using asp mvc 3 with the latest version of Telerik

it might take a while to grok, not a lot of comments

[Jan]

Hi Jesse,

thanks for the link i will check that out.
In the meantime i have tried the ajax version where the markup with the new telerik control(s) is returned from the server as described here: http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

I tried both versions (MvcAjax and jquery) at least a bit successfull.
I was able to add one row with a few telerik controls that are working as expected.
But when i try to add another table row with telerik controls, the controls are rendered correctly but with no javascript handlers attached.
Very strange... here is my code:
In the View where i want to dynamically add controls:

<a href="#" id="addOrderDetailRowLink">Add Row</a>
<script type="text/javascript">
    $(document).ready(function () {
        $('#addOrderDetailRowLink').click(function (event) {
            event.preventDefault();
            $.get('<%= Url.Action("AddOrderDetailRow", "Order") %>', function (data) {
                $('#detailsTable').append(data);
            });
        });
    });
</script>

The Action which returns the new controls:

public ActionResult AddOrderDetailRow()
{
    var emptyOrderLine = new ViewModels.OrderLineViewModel();
    return PartialView("OrderLineRowEdit", emptyOrderLine);
}

The partial View which is returned:

<%: Html.EditorForModel() %>

And the template control for my ViewModelClass:

<tr>
    <td>
        <%: Html.TextBoxFor(model => model.ArticleId) %>
    </td>
    <td>
        <%: Html.TextBoxFor(model => model.ArticleText)%>
    </td>
    <td>
        <%= Html.Telerik().NumericTextBoxFor(model => model.Quantity)
                            .MinValue(-1000)
                            .MaxValue(1000)
                            .DecimalDigits(2)
                            .EmptyMessage("Wert eingeben")
                            .ButtonTitleDown("Wert herabsetzen")
                            .ButtonTitleUp("Wert erhöhen").Value(1)  %>
    </td>
    <td>
        <%= Html.Telerik().CurrencyTextBoxFor(model => model.UnitPrice)
                            .MinValue(-99999)
                            .MaxValue(99999)
                            .DecimalDigits(2)
                            .EmptyMessage("Wert eingeben")
                            .ButtonTitleDown("Wert herabsetzen")
                            .ButtonTitleUp("Wert erhöhen") %>
    </td>
    <td>
    </td>
    <td>
        <%: Html.Telerik().DropDownListFor(model => model.VATIndex)
                            .BindTo(new SelectList(new[] {
                                new SelectListItem() { Text = "19%", Value = "1" },
                                new SelectListItem() { Text = "7%", Value = "2" }},"Value", "Text"))
        %>
    </td>
</tr>

I can live with the server roundtrip, but its annoying, that this seems to work just for one add operation.
The markup returned from the action is exctly the same, so javascript is executing - but just the first time.
Any thoughts?

Jan

[Jesse]

I would try changing this

$.get('<%= Url.Action("AddOrderDetailRow", "Order") %>', function (data) {
    $('#detailsTable').append(data);
});

to this

$.get('<%= Url.Action("AddOrderDetailRow", "Order") %>',
    function (data) {
        $('#detailsTable').append(data);
    },
    "html"
);

Note the optional 'html' option, the jquery $.get is a shortcut method for jquery $.ajax
http://api.jquery.com/jQuery.get/

'html' is the dataType parameter
from http://api.jquery.com/jQuery.ajax/

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

I am guessing the javascript is being sent back with the html but it is not being evaluated?

[Jesse]

My last post might not be the solution - it is possible 'html' is the default for $.get - I am not sure

You said the first time it works?

is it possible when you add new rows the ids are not unique? if they are not then I think the initail javascript handlers will be bound to only the original inputs

guessing 'model.ArticleId' is null each time you add a new row? I would use the console tab in Firebug with FireFox to check the ids on the rendered html as new rows are added to the form

[Jan]

Hi Jesse,

yes, "html" seems to be the default datatype for get/ajax.
As i wrote, its running inclusive javascript handlers the first time i add the controls to the page.
I thought it has something to to with not unique ids, too. But when i render the template with some orderlines filled in the model, it renders correctly many rows with working javascript handlers.
Every control has the same ID, so thats not the point (i think they have to have the same id for databinding to the model).

So its very strange.
Above all i have stick with the sample from telerik, so i expected that to work.

I have tried your sample and it works fine for me - my application is on mvc2 right now, maybe i try an upgrade and see whats happening there.

Jan

[Jesse]

I still think the issue is with the rendered html ids

if you look at my code I am passing an index which gets appended when building the name of the Telerik control - this differs from yours where it must be auto-generated from your model

I think when you add the 2nd new row it will render the same html id as the one before. I had this issue with my code until I appended the index?

[Jan]

Jesse,

you are totally right! It was the non unique id of the returned controls.
Now its working as expected. Thanks for your help!

Jan