Add div element dynamically in kendo grid template specific position

[Vikash]

Hi All,

I am using kendo grid row template where i have to add dynamic div based on the text.

Below is my code:

<script id="altRowTemplate" type="text/x-kendo-tmpl">

    <tr class="k-alt" data-uid="#: uid #">

       <td style="width:100%">

                  <div class="col-sm-1">
                         <img src="@Url.Content("~/Content/Images/#: OwnerImage#")" class="img-responsive" style="width:80px; height:50px" alt="1" />
                    </div>

                   <div id="Category">

                          #:changeTemplate(Category)#

                  </div>

         </td>

   </tr>

</script>

for the category in first row value is c# and second row value is: c#, Asp.Net, AngularJs

for change template below is the script function used.

function changeTemplate(category) {var splitCategory = category;var setCategorySpan = '';if (splitCategory.indexOf(',') !== -1) { splitCategory = category.split(',');for (var i = 0; i < splitCategory.length; i++) {var setcolID = 2;// Trim the excess whitespace. splitCategory[i] = splitCategory[i].replace(/^\s*/, "").replace(/\s*$/, "");// Add additional code here, such as: setCategorySpan += "<div class='col-sm-" + setcolID + "'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory[i] + "</span></div>"; setcolID+=2;} $("#dvCategory").append(setCategorySpan);}else { setCategorySpan = "<div class='col-sm-12'><span class='tags' style='font-family:arial; font-size:small'>" + splitCategory + "</span></div>"; $("#dvCategory").append(setCategorySpan);}}

in this function i am checking if value is seprated by comma then split one by one value and add in span tag and that tag should append in div.

i have checked through debug if i am directly appending value to div so this div is no more there, for that purpose i am creating this div in document ready function only:

var container = document.createElement('div'); container.setAttribute('id', 'dvCategory'); container.setAttribute('class', 'row');

if i am using here $('body').append(container);

value is showing but out of grid.

can i get help to set div on the same position where category is there?

[Alex Hajigeorgieva]

Hi Vikash,

I suggest placing the condition inside the template. You will need to escape any code blocks with hash literals as documented at:

http://docs.telerik.com/kendo-ui/framework/templates/overview

I have created a sample Dojo runnable snippet to illustrate:

http://dojo.telerik.com/iGARO

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress