Custom Button/HyperLink on Each Row in Telerik Grid

[Tomas]

I have a search page for Cars where the results are put in a Telerik Grid.  There is an ajax call made to my API controller which returns result.  The success function of my ajax call is as shown:

success: function (result) {
    CarSearchResultsToGrid(result, "carSearchGridResults");
}

The function CarSearchResultsToGrid is shown below:

function CarSearchResultsToGrid(result, gridId) {

    var dataSource = new kendo.data.DataSource({
        data: result,
        pageSize: 10
    });

    $("#" + gridId).data("kendoGrid").setDataSource(dataSource);
}

I then have the following code in a PartialView 

@(Html.Kendo().Grid<CarSearchl>()
                      .Name("carSearchGridResults")
                      .Columns(columns =>
                      {
                          columns.Bound(c => c.CarNumber)
                              .Width(60);
                          columns.Bound(c => c.OwnerName)
                              .Width(100);
                          columns.Bound(c => c.Colour)
                              .Width(100);
                          columns.Bound(c => c.FuelType)
                              .Width(80);
                          columns.Bound(c => c.LastServiceDate)
                              .Format("{0:dd/MM/yyyy}")
                              .Width(50);
                          columns.Bound(c => c.ManufacturerName)
                              .Width(80);
                           columns.Command(command =>
                               {
                                  command.Edit();
                                  command.Custom("Create").Click("PropertyPage.DeleteProperty");
                               })
                               .Title("Create New Car Report")
                               .Width(166);
                      })
                      .Pageable(pageable => pageable
                          .PageSizes(true)
                          .ButtonCount(5))
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .Model(model => model.Id(a => a.CarNumber))
                          .Update(update => update.Action("Create", "Property"))
                      )
                )

What I am trying to achieve which is not working currently is to have a button or clickable link on each row in the final column with the Title of that column being Create New Car Report and the Button or Hyperlink in each row just saying 'Create'.  I had tried to add the columns.Commad as shown above but it is not working.  What I need is for the Button or Link to be added to each row - On clicking either the link or button the User will be Navigated to another page - so I would like to Hit an Action method in a controller - and to the action on the controller I want to pass some data from the row on which the button was clicked - so I would like to pass the CarNumber which will be unique on each row, I would like to pass the OwnerName and finally the ManaufacturerName - can anyone help as to achieve this?

Many Thanks

[Tomas]

Ended up using a @Html.ActionLink on the .ClientTemplate and then added html attributes to style the ActionLink as a button - works nicely.  The only problem I am having now is that for some reason the LastServiceDate which is returned as DateTime.Now - and then I am trying to format on the grid it is displaying the Time Portion of the date as well?

[Vladimir Iliev]

Hi Tomas,

From the provided information it seems that the "LastServiceDate" is never parsed as the DataSource initialized from JavaScript doesn't contain "schema.model.fields" configuration where the field types are specified. I would suggest try the following:

var dataSource = new kendo.data.DataSource({
  data: result,
  pageSize: 10,
  schema: {
    model: {
      fields: {
        LastServiceDate: {type: "date"}
      }
    }
  }
});

Regards,
Vladimir Iliev
Telerik

 

 

[Tomas]

Hi Vladimir,

Do I need to then Format this date in js?  I made change as you suggested and output on grid now looks like:

Wed Jul 23 2014 05:42:08 GMT-0400 (Eastern Daylight Time)

Whilst I really just want 23/7/2014

and if I want to sort the data by most recent Service Date again in the js should I be able to do something like:

sort: { field: "LastServiceDate", dir: "desc" },

[Vladimir Iliev]

Hi Tomas,

Basically the format specified in the Format method of the Grid column should be applied to the date once it's correctly parsed to JavaScript Date (please check this screencast):

columns.Bound(c => c.LastServiceDate).Format("{0:dd/MM/yyyy}")

Also you can sort the data as you suggested using the "sort" method of the Grid DataSource on the client side:

• dataSource: sort method

Regards,
Vladimir Iliev
Telerik