Can't display image set in listview template

[Hashini Sulakkhana]

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

[Stefan]

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

[Hashini Sulakkhana]

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

[Stefan]

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