Question

I am creating the buttons in the Kendo Grid successfully , like this below , the buttons are actually rendered at <a href="#" onClick="showDetails ..... >

    columns: [
      { field: "Title", width: "90px", title: "Event<br />Name" },
      { field: "StartDate", title: "Event<br />Date", width: 35 },
      { field: "Keywords", title: "Event<br />Type", width: 35 },
      { field: "TotalDollars", title: "Total<br />Collected", width: 20 },
      { field: "TotalTransactions", title: "# of<br />Trans.", width: 20 },
      { field: "TotalAttending", title: "# of<br />Attending", width: 30 },
      { field: "SocialViews", title: "# of<br />Views", width: 30 },
      { command: { text: "ManageEvent", click: showDetails }, title: " Edit Event", width: "60px" },
      { command: { text: "ViewEvent", click: showEvent }, title: " View Event", width: "60px" }
    ]

now I want to change some attribute in them , if I put the change in the function showDetails() it works fine , but that seems kind of awkward , then on the click function you then change the attribute right before performing more code.

This works

            function showEvent(e) {
            $('.k-grid-ViewEvent').attr('target', '_blank');                
            var event = this.dataSource.getByUid(this.select().data("uid"));
            var id = event.ID;
            window.location = "epage.aspx?e=" + id;
            }     

but this does not , I even tried putting a TimeOut in there to wait for the grid to render , but still nothing.

            $(function () {
            setTimeout(
            $.each('.k-grid-ViewEvent', function () {
                $(this).attr('target', '_blank');
                var event = this.dataSource.getByUid(this.select().data("uid"));
                var id = event.ID;
                $(this).attr('href', id);
            }), 4000);
          });

Anyone have any idea how , preferrably in jQuery , but I don’t really care how , I can dynamically change these commands after they have been rendered with the Kendo Grid Plugin ?

Answer 1

Try template instead of command:

columns: [
    // ...
    { template: '<a href="epage.aspx?e=${ID}" target="_blank">ViewEvent</a>', title: 'View Event', width: 60 }
]