Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Atul S
40
Is it possible to update the images in igGrid without rebinding it.
posted
Consider this scenario, I have a grid which has set of columns. These columns show user related information like first name, last name, email, phone number etc. The first column shows image of the user. I have two services, one to get the images of the user and other is to get rest of the information. Time required to get the user information is much less as compared to getting the image. Hence I want to first show the user information with the generic user image. Once the page is rendered then I would like to fetch the actual images of the users. My question is can I update the images inside a igGrid without rebinding the entire datagrid. I do not want to refresh the page. Atul Sureka
Parents
No Data
Reply
  • 17590
    Offline posted

    Hello Atul,

    Thank you for posting in our community.

    You requirement, to change images in your igGrid without rebinding, can be accomplished by using unbound column with template. Setting unbound property sets whether a column data is derived from the data source. If set to true, the cells in this column are not bound to the data source. The data for this column is populated using formula, unboundValues or setUnboundValues API method (this one is what I am going to use).  Basically, my idea is as following:

    1) Create unbound column for the images in your igGrid.

    2) Set template with image for this column. This can be achieved by using template option. The content of the template should be the HTML markup that goes inside the table cell or the entire cell markup. In your scenario the template is going to be an image element with src attribute set to the image url. For example:

    

     { headerText: "Image", key: "ImageUrl", unbound: true, dataType: "object", template: "<img class='altImage' width='100' height='90' src='${ImageUrl}'/>"}

    3) Initially unboundValues are not set. Alt attribute could be set in order to set an alternating text, image to be shown when there is no image loaded.

    4) When your images are loaded you can add them (in an appropriate format) to an array and use setUnboundValues method to set the values for the unbound column cells. This will change the cell values, respectively the image src will be taken into account and images are going to be loaded without any need of rebinding.

    

    $("#grid").igGrid("setUnboundValues", "ImageUrl",images);

    I am also attaching a small sample for your reference. Please test it on your side and let me know whether it helps you achieve your requirement.

    Please feel free to contact me if you need any further assistance with this matter.

    igGridUnboundImageColumnWithTmpl.zip
Children
No Data