1

I am new to kendo ui grid development.

I have a requirement where I want to display data in kendo ui grid.

I am able to bind the data to kendo grid using java-script.

This is how I did it.

(document.getElementById(divId)).kendoGrid({
            columns: cols,
            dataSource: data,           
            change: onChange,
            selectable: "multiple",
            //selectable: "multiple cell",
            schema: {
                model: {
                    id: "ID"
                }
            }
        }).data("kendoGrid");

The data is displayed in the grid.

Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.

Please anyone can tell me on this.

1 Answer 1

1

You will have to explicitly define the columns because:

  1. You want to add a columns that is not in the model.
  2. The content of the column is an image that is not a KendoUI basic type that can be inferred from the model definition.

Said so, you have to add a column that is something like:

var cols = [
    // Your other columns
    ...
    {
        title :"Image",
        template: "<img src='my_image.gif'/>"
    },
    // More columns
    ...
];

In addition you might need to use an image that is not a constant but depending on the content of a column. Then you might do:

var cols = [
    // Your other columns
    ...
    {
        title: "Status",
        template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
    },
    {
        title   : "Photo",
        template: "<img src='#= image #'/>"
    }
    // More columns
    ...
];

Where depending on the value of field in your model called status I display the image ok.gif or nak.gif. Or directly use the content of the field image for generating the URL to the image being displayed.

Check here for an overview on KendoUI templates.

2
  • Thanks OnaBai for quick reply. surely will try on this. Just had a question how can I set the title for grid but should not be visible. What actually I want is on the click of the newly created column as mentioned above, I want to get some additional values which will be common for entire grid. So how can I set any additional/custom property and access it. Also it would be very helpful if I can set title for grid but should not be visible. Only I need to access its value. Again thanks for the reply. May 15, 2013 at 8:22
  • I've seen that you posted a question on click on the image. Please, see my answer there. Regards.
    – OnaBai
    May 15, 2013 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.