Premium forums

Get link on column-resizing table

  • Piyush
    Piyush avatar

    20 Jun 2012 (Link to this post)

    Hi, 
    I am using column-resizing table. On this table I want to add link n any of the column.

    Please check my  java script below. 

     <script>
    var firstNames = ["piyush", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["parmar", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

    function createRandomData1(count) {
    var data = [],
    now = new Date();
    for (var i = 0; i < count; i++) {
    var firstName = firstNames[i],
    lastName = lastNames[i],
    city = cities[i],
    title = titles[i],
    birthDate = birthDates[i],
    age = i;


    data.push({
    Id: i + 1,
    FirstName: firstName,
    LastName: lastName,
    City: city,
    Title: title,
    BirthDate: birthDate,
    Age: age
    });
    }
    var data2 = data;

    return data;
    }
     
                    $(document).ready(function() {



                        $("#grid").kendoGrid({
                            dataSource: {

                                data: createRandomData1(10),

                                schema: {
                                    model: {
                                        fields: {
                                            FirstName: { type: "string" },
                                            LastName: { type: "string" },
                                            City: { type: "string" },
                                            Title: { type: "string" },
                                            BirthDate: { type: "date" },
                                            Age: { type: "number" }
                                        }
                                    }
                                },
                                pageSize: 10
                            },
                            height: 350,
                            sortable: true,
                            resizable: true,
                            pageable: true,
                            columns: [
                                {
                                    field: "FirstName",
                                    title: "First Name ",
                                    width: 100
                                },
                                {
                                    field: "LastName",
                                    title: "Last Name",
                                    width: 100
                                },
                                {
                                    field: "City",
                                    width: 100
                                },
                                {
                                    field: "Title",
                                    width: 100
                                },
                                {
                                    field: "BirthDate",
                                    title: "Birth Date",
                                    template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
                                },
                                {
                                    field: "Age",
                                    width: 50
                                }
                            ]
                        });
                    });
                </script>





Read FAQ or see Kendo UI in action!

Launch Demos