This is a migrated thread and some comments may be shown as answers.

Custom Button/HyperLink on Each Row in Telerik Grid

4 Answers 219 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomas
Top achievements
Rank 1
Tomas asked on 09 Jul 2014, 04:43 PM
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

4 Answers, 1 is accepted

Sort by
0
Tomas
Top achievements
Rank 1
answered on 10 Jul 2014, 07:09 AM
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?
0
Vladimir Iliev
Telerik team
answered on 11 Jul 2014, 08:39 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tomas
Top achievements
Rank 1
answered on 11 Jul 2014, 09:44 AM
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" },
0
Vladimir Iliev
Telerik team
answered on 15 Jul 2014, 06:58 AM
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:

Regards,
Vladimir Iliev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Tomas
Top achievements
Rank 1
Answers by
Tomas
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or