Thursday, May 17, 2012

Telerik MVC 3 Controls Injected Dynamically via Template

So... I want to use the Telerik MVC controls (numeric textbox, datepicker, etc) in a template, but rendering the template breaks Telerik's code. Also, I don't want to use an ID to identify them, since I'm using them for each child item. What's a guy to do?

Well, I looked at the response from my partial view, and found that Telerik is initializing them each in their own javascript in the partial view.

So, I pulled out that logic and did it myself.


            $("input[name=editorDate]", control).tDatePicker({
                format: 'M/d/yyyy',
                minValue: $this._model.startDate,
                maxValue: $this._model.endDate
            });
 
            $("[name=percentValue]", control).tTextBox({
                val: 0,
                step: '1',
                minValue: 0,
                maxValue: 100,
                digits: 2,
                groupSize: 3,
                positive: 0,
                negative: 0,
                text: 'Enter value',
                type: 'percent'
            });
            $("[name=amountOffValue],[name=priceValue]", control).tTextBox({
                val: 0,
                step: '1',
                minValue: 0,
                maxValue: 1000000,
                digits: 2,
                groupSize: 3,
                positive: 0,
                negative: 0,
                text: 'Enter value',
                type: 'currency'
            });

 I call these functions after I instantiate a template, and it works great! There are some .css issues with the z index of Telerik's controls, but some finely applied css classes fixed that. 

I didn't see anything on the internet that solved this issue, so I posted this fix. Hope this helps someone!



F~

No comments:

Post a Comment