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

Best way to find the root element by class

2 Answers 468 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 22 May 2013, 02:16 PM
Hello,

Once created, many Kendo components root DOM element are wrapped under new HTML elements.  Any class of the original input will also be copied to some parent elements.

Ex:


1.<input type="text" class="MyClass" />

Notice kendo added the MyClass to the span wrapper at line #1 and #3 once the DateTimePicker is created.

1.<span class="k-widget k-datetimepicker k-header MyClass" style="width: 200px;">
2.    <span class="k-picker-wrap k-state-default">
3.        <input id="mydatetimepicker" style="width: 100%;" data-role="datetimepicker" type="text" class="k-input MyClass" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 5/22/2013 9:50:42 AM">
4.        <span unselectable="on" class="k-select">
5.            <span unselectable="on" class="k-icon k-i-calendar" role="button" aria-controls="datetimepicker_dateview">select</span><span unselectable="on" class="k-icon k-i-clock" role="button" aria-controls="datetimepicker_timeview">select</span>
6.        </span>
7.    </span>
8.</span>

When you access the root input (line #3) with the ID, there's no problem.

1.$('#mydatetimepicker')
2.//Will return the input of line 3

However, if you want to use the class, then is getting more tricky.

1.$('.MyClass')
2.//Will return the span of line 1 and the input of line 3

As each widget (DateTimePicker, DropDownList, ComboBox...) are wrapped differently, it might be a good idea to add a class to the root input that would allow us to spot the input we are looking for?

2 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 23 May 2013, 12:37 PM
Hello Simon,

You can find the origin element using a more specific jQuery selector. Check this jsBin demo, which shows how to achieve this. I will also suggest you share your thoughts in our Kendo UserVoice page.Thus more people can vote for this functionality.

Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon
Top achievements
Rank 1
answered on 28 May 2013, 11:49 AM
Hello Georgi,

Indeed, you can still search by a more specific jquery selector.  But this involve a specific selector to be added to every widget's root input, all over the place.

As you have access to the kendo core, I taught it would be a simple an easy fix that would save some time to many people (well.... at least for the one working with single page applications).

Best regards,

Simon
Tags
General Discussions
Asked by
Simon
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Simon
Top achievements
Rank 1
Share this question
or