Can't display image set in listview template

4 posts, 0 answers
  1. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 16 Aug Link to this post

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

            <div class="iplist">
                Task ID : #:TaskID#<br /> <br />         
                Task Name : #:TaskName#<br /><br />
                From: #= kendo.toString(new Date(PlannedStartDate), 'dd/MM/yyyy') # &nbsp;&nbsp;&nbsp;&nbsp;
                  To: #= kendo.toString(new Date(PlannedDeliveryDate), 'dd/MM/yyyy') #<br /><br />
                Ids: #:Ids#<br /><br />
                         

            # function getProfilePics(Ids) { #
                    
                    var temp = new Array();
                    temp = Ids.split(",");
                    return temp;
                   
                # } #
              

              # for (var i = 0; i < temp.length; i++) { #

                     <div>#=temp[i] #</div>
                               
                <img border="0" alt="profilePicture" id="profileimg" src='@Url.Action("RenderProfileImage", "TT", new { keyUserProfileId = "temp[i]" })' width="30" height="30">
                     
            # } #
                
            </div>
        </script>

     

    I'm having issue for above kendo template code.

     function getProfilePics(Ids) is function of  split  #:Ids# and ID set assign to the array and array values pass to the for loop.

    Inside the for loop array value pass to the url action load image one by one.

    But for loop does not working.

  2. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 21 Aug Link to this post

    Hello Hashini,

    I can assume that the temp value is not available in the for loop as it was created inside the getProfilePics and it stays in its scope.

    In this scenario, I can suggest adding the for loop inside the getProfilePics function.

    If the issue still occurs, please provide a fully runnable example and I will gladly assist.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Hashini Sulakkhana
    Hashini Sulakkhana avatar
    7 posts
    Member since:
    Feb 2017

    Posted 21 Aug in reply to Hashini Sulakkhana Link to this post

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

            <div class="iplist">
                Task ID : #:TaskID#<br /> <br />         
                Task Name : #:TaskName#<br /><br />
                From: #= kendo.toString(new Date(PlannedStartDate), 'dd/MM/yyyy') # &nbsp;&nbsp;&nbsp;&nbsp;
                  To: #= kendo.toString(new Date(PlannedDeliveryDate), 'dd/MM/yyyy') #<br /><br />
                Importance : #=getImportance(Importance)#<br /><br />
                Ids: #:Ids#<br /><br />
               
                #=getProfilePics(Ids)#<br />
               
            </div>
        </script>

        <script>

             function getProfilePics(Ids) { 
                 var val='';
                 var temp = new Array();
                 temp = Ids.split(",");
                
                 for (var i = 0; i < temp.length; i++) { 

                     //val += "value" + temp[i] + "<br/>";

                     val += '<img src="@Url.Action("RenderProfileImages", "Home", new { keyUserProfileId = ' + temp[i] + ' })" width="30" height="30"/>';

                 }
                 return val;          
                 
                } 
    </script>

    Controller Action 

    public ActionResult RenderProfileImages(LoginSID LoginSid, int? keyUserProfileId)
            {
                byte[] image = rule.GetProfile(LoginSid.ProfileUserID == keyUserProfileId ? LoginSid.ProfileUserID : (int)keyUserProfileId).Select(e => e.Profilepic).FirstOrDefault();
                if (image == null)
                {
                    string imgpath = System.Web.HttpContext.Current.Server.MapPath("~/Images/no-pro.jpg");
                    FileInfo fileInfo = new FileInfo(imgpath);
                    byte[] defaultImg = new byte[fileInfo.Length];
                    using (FileStream fs = fileInfo.OpenRead())
                    {
                        fs.Read(defaultImg, 0, defaultImg.Length);
                    }
                    return File(defaultImg, "image/png");
                  
                }
                else
                {
                   return File(image, "image/png");
                }
            }

    I have issue for bold part of the code.temp[i] value does not assign to keyUserProfileId properly. 


  4. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 24 Aug Link to this post

    Hello Hashini,

    This is expected because the JavaScript does not execute when creating the action URL.

    I can suggest checking the following question on StackOverflow demonstrating how this can be resolved:

    https://stackoverflow.com/questions/6456703/how-to-access-javascript-variable-within-url-action

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top