Inline HTML data-role <> script jquery: Kendo Widget Initialization

Question

Using Kendo there are two ways to initialize a Kendo Widget:

one:

<span id=”UniqueID” /></span>
<script>
     $(“#UniqueID”).KendoWidget();
</script>

two:

<span id=”UniqueID”  data-role=”Widget” /></span>
<script>
     Kendo.init($(“#UniqueID”));
</script>

Does anybody know the pro's and con's of there two methods? I want to make sure I am aware of the implications of any specific direction.

and if it's more of less equal, which is the most commonly found mechanism, dev's follow.

Kind Regards, Flippie

Answer 1

I use both. It depends on the complexity of the configuration for that widget, and in some cases, it's not possible (or at least very difficult) to initialize a widget within the HTML due to data context issues; thus, it's easier to initialize it in code. Other times, it's simply personal preference.

For all widgets, I'll start by declaring them in the HTML, like so:

<div id="cases"
  data-role="grid" 
  data-bind="source: cases" 
  data-pageable="{ refresh: true }" 
  data-sortable="{ mode: 'multiple' }" 
  data-filterable="{ 
    extra: false, 
    operators: { string: { contains: 'Contains', eq: 'Is equal to' } }
  }" 
  data-columns="[
    { title: '', template: kendo.template($('#editColumnTemplate').html()), sortable: false, filterable: false, width: 42 },
    { field: 'number', title: 'Number', width: 160 },
    { field: 'subject', title: 'Subject' },
    { field: 'contact', title: 'POC', width: 200 },
    { field: 'referral', title: 'Referred By', width: 100 },
    { field: 'opened', title: 'Opened', format: '{0:d}', filterable: false, width: 120 },
    { field: 'closed', title: 'Closed', format: '{0:d}', filterable: false, width: 120 }
  ]">
</div>

I prefer doing it this way because all of the widget's configuration is declared inline with it's location in the HTML. It's similar in the way that you have to bind data to your view using MVVM frameworks like Kendo and Knockout, so, I like to be consistent. For me, it's easier to maintain because everything is defined in one place and it looks clean. Now, if I run into data context problems where I can't bind a particular observable or data element, say within this grid's columns definition, then I move it all to code.

Either way is more or less equal. I couldn't tell you which is more common. I imagine most developers do it the same way I do - mixing both methods.