Add div element dynamically in kendo grid template specific position

2 posts, 0 answers
  1. Vikash
    Vikash avatar
    2 posts
    Member since:
    Jun 2015

    Posted 05 Nov Link to this post

    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 id="Category">






    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?

  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    117 posts

    Posted 08 Nov Link to this post

    Hi Vikash,

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

    I have created a sample Dojo runnable snippet to illustrate:

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
Back to Top