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>

                       <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?

  2. Alex Hajigeorgieva
    Admin
    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:

    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
     
    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