creating hyperlink in kendo ui grid

Question

1.80/5 (2 votes)

See more:

hi, i have created a hyperlink in the grid.when i click on the link it is navigating to localhost/link and displaying resource not found.what i want is,if i click on the link then it has to directly navigate to the new page.how can i do this?
my syntax is:template:"#= WebsiteLink #".

Posted 24-May-12 18:14pm

charan1431

Add a Solution

Comments

Sandeep Mewara 25-May-12 0:41am

1. What is kendo UI Grid?
2. share the related code snippet to comment. Copy-paste it.

John Bristowe (Kendo UI) 25-May-12 4:58am

Kendo UI is a framework built on jQuery and uses JavaScript, HTML, and CSS to build web and mobile applications. You can read more about Kendo UI at http://kendoui.com/. Kendo UI Web - one of three collections in Kendo UI - has a Grid widget. You can see this widget in-action at http://demos.kendoui.com/web/grid/index.html.

charan1431 25-May-12 5:43am

i have an image field in my database. i want to load the image into the kendo UI grid.how to load the image dynamically?

John Bristowe (Kendo UI) 25-May-12 19:23pm

You're first task is getting access to your image via HTTP. Recently, I blogged about this here: http://bristowe.com/blog/2012/5/9/connecting-the-kendo-ui-datasource-to-remote-data.html After that, it's a simple matter of adding an anchor to the row template.

charan1431 25-May-12 1:09am

it is like dhtmlxgrid, with kendoui the appearence of the grid is good.i loaded the grid from the database.i have a column field of websitelink in my database.when i click on the link in my grid it has to navigate to new webpage.
i wrote the code like:"#= WebsiteLink #".WebsiteLink is my column field in my grid.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

John Bristowe (Kendo UI) · Answer 1 · 2012-05-24T20:07:00

This can be accomplished quite easily with templates.

Assume the following table structure:

HTML

<table id="grid">
    <thead>
        <tr>
            <th>Title</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>${ Title }</td>
        <td><a href="${ URL }" target="_blank">${ URL }</a></td>
    </tr>
</script>

Notice that we've defined a rowTemplate that contains an anchor with a target attribute of _blank.

With this structure defined, we can easily bind to it:

JavaScript

$(document).ready(function(){
    var sampleData = [
        { "Title": "The Code Project", "URL": "http://codeproject.com/" },
        { "Title": "Kendo UI", "URL": "http://kendoui.com/" }
    ];

    $("#grid").kendoGrid({
        dataSource: kendo.data.DataSource.create(sampleData),
        rowTemplate: kendo.template($("#rowTemplate").html())
    });
});

This will generate a Kendo UI Grid with row items that contain hyperlinks.

Roger C Moore · Answer 2 · 2015-06-26T12:16:00

Here is a solution to create a linked column mostly in Kendo JavaScript:

JavaScript

(function(myPage, $, undefined) {

    var IDS = {
        ...
        myGrid: "#my-grid",

        ...

        selectedMasterkey: "#selected-master-key",
        selectedChildkey: "#selected-child-key",
    };

    var Grids = {
        MyGrid: null,
    };

    function initMyGrid() {
        $(IDS.myGrid).kendoGrid({
            selectable: true,
            scrolable: true,
            sortable: true,
            columns: [
                { field: "Key", title: "key", width: "60%" },
                { field: "Weight", title: "Weight", width: "20%" },
                { field: "Link", title: "Link", width: "20%", template:"<a href="../MyData.mvc/Index?key=#=KEY#">#=KEY#</a>"}
            ],

            change: function() {
                var selectedDataItem = this.dataItem(this.select());
                if (PageState.Selected.ChildKey != selectedDataItem.KEY) {
                    PageState.Selected.ChildKey = selectedDataItem.KEY;
                    myGridSelectionChanged();
                }
            },

            ...

        });

        Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');

        Grids.MyGrid .element.on("dblclick", "tbody>tr", "dblclick", function(e) {
            var dbClickedKey = Grids.MyGrid .dataItem($(this)).KEY;
            window.open('../MyData.mvc/Index?key='+dbClickedKey,'_blank');
        });
        bindMyGrid();
    }

    function bindMyGrid() {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "MyData",
                    dataType: "json"
                },
                parameterMap: function(data) {
                    return {
                        myDataId: getQueryStringParameterByName('mydataid')
                    }
                }
            },
            schema: {
                data: function(response) {
                    return response;

                },
                total: function(response) {
                    return response.length;
                },
                parse: function(response) {
                    var myDataList= [];
                    $.each(response, function(i, key) {
                        myDataList.push({ "KEY": key });
                    });
                    return myDataList;
                },
            },
        });
        dataSource.fetch();
        dataSource.view();
        Grids.MyGrid.setDataSource(dataSource);
    }
    ...

    myPage.initialize = function() {
        initMyGrid();
    }

}(window.myPage = window.myPage || {}, jQuery));

Try playing around with javascript here:

JSFiddle

HTH.

creating hyperlink in kendo ui grid

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0