CODEWITHSUNDEEP
javascriptjqueryasp.netkendo-uikendo-grid
Suresh
Suresh

Reputation: 117

How to write the click Function for Link button in kendo UI Grid fields in asp

I am the Beginner Actually I tried to Search Google About My Requirement But i Didn't Get Anything. My Page Like one Kendo Grid, that Grid have three Columns and edit and Delete buttons, 1st column Like Link button,, in my grid have ten Rows, My Requirement is if i click the link button means open new web page with clicked Row Details, My Code Like,

 editable  : {mode : "inline"   },
 navigable: true,
 columns:  [  {
           field: "SystemName",
           title: "System Name",
           width:"130px",
           template: '<a href="\\#" class="k-Linkbutton link">#= SystemName #</a>' },
             {
                        field: "SystemIP",
                        title: "System IP",
                          width:"100px" },
                    {
                        field: "SystemType",
                        title: "Type",
                        width:"80px",
                        editor: function (container, options) {
                        $("<input />")
                        .attr("data-bind", "value:SystemType")
                          .appendTo(container)
                           .kendoDropDownList({
                         dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
                    dataTextField: "text",
                    dataValueField: "text"
                }); }},
                    {
                        field: "OSKey",
                        title: "OS Key",
                        width:"200px"
                    },

          { 
                 command: ["edit","destroy"], 
                       title: "&nbsp;", 
                        width: "190px" 
                    }       
                ]

How to open the NEw web page, i Know window.open("aaa.aspx") this is one way but i dont know how to implement that, thanks in advance!!!!

Upvotes: 1

Views: 6614

Answers (3)

Arun Prasad E S
Arun Prasad E S

Reputation: 10115

call a javascript function without posting

                            <asp:GridView runat="server" ID="grdAdvTravel">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <a href="javascript:EditAdvanceTravelFee( '<%#Eval("fee_catg_srno")%>','<%#Eval("trvl_amt")%>','<%#Eval("pay_date")%>','<%#Eval("fee_name")%>','<%#Eval("status")%>' )" class="btn btn-primary">EDIT</a>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

Upvotes: 0

Suresh
Suresh

Reputation: 117

  template: '<a href="\\#" onclick="New()" class="k-Linkbutton link">#= SystemName #</a>' }

Function New()
{
Window.open("Welcom.aspx")
}

Upvotes: 2

Koti Panga
Koti Panga

Reputation: 3720

After your kendo grid binding you can bind click event to link-button like below and see here in action
In below demo observe $('a.k-Linkbutton.link').on("click", function () {});

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>demo</title>
</head>
<body>
    <table id="kendo-grid">
        <tr><td><a href="#" class="k-Linkbutton link">First</a>  </td><td>One</td><td> 1 st</td></tr>
        <tr><td><a href="#" class="k-Linkbutton link">Second</a>  </td><td>Two</td><td>2 nd</td></tr>
    </table>
    <script type="text/javascript">
        /* global variables and function definitions here */
        $(function () {
            //Here you should keep your Kendo grid bind script and other start-up scripts

            //below click event attach should be at the end
            $('a.k-Linkbutton.link').on("click", function () {
                var $rowContent = $.makeArray($(this).closest('tr').children().map(function () { return '<div />' + $(this).html() + "</div>"; })).join(""),
                newWindow = window.open("https" === document.location.protocol ? "javascript:false" : "about:blank", "MsgWindow", "width=500, height=300", true);

                newWindow.document.write($rowContent);

            });

        });
    </script>
</body>
</html>

Upvotes: 0

Related Questions