use a control inside a column on a telerik grid

Question

In asp.net mvc page im using a telerik grid that looks like this

    <div>
    @(Html.Kendo().Grid<Project.Models.Bench>
        ()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(p => p.seatsCount).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
            columns.Bound(p => p.bookedSeats).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
        })

.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            //.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
    //.ServerOperation(true)
.Read(read => read.Action("GetBenches", "home"))
)
    )
</div>

this is my Bench class:

public class Bench
{
    public int id { get; set; }
    public string name { get; set; }
    public bool bookable { get; set; }
    public int zone { get; set; }
    public int seatsCount { get; set; }
    public string area { get; set; }
    public int bookedSeats { get; set; }
    public int freeSeats { get; set; }
}

and my GetBenches method on HomeController

public async Task<ActionResult> GetBenches([DataSourceRequest] DataSourceRequest request)
    {
        BenchesService bService = new BenchesService();
        List<Bench> obj = await bService.getBenches();


        return Json(obj.Select(s => new Bench
        {
            id = s.id,
            bookable = s.bookable,
            name = s.name,
            seatsCount = s.seatsCount,
            zone = s.zone,
            freeSeats = s.freeSeats,
            area = s.area,
            bookedSeats = s.bookedSeats

        }).Distinct().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

i would like to know if i add a .ClientTemplate to one of the columns if i can add a control of this type inside the cell (the one on the "Benefit components" column)

Intrusion

You see this? telerik.com/forums/add-a-sparkline-column-to-a-grid – Loosestrife

yeah but still having a bit of dificulty :\ still q bit newb. What i want is to replace the 2 last columns i have, with one where the values of those 2 would be used to create a sparkline ( total seats vs booked seats ) – Intrusion

any chance you could give me a bit more help? – Intrusion

Answer 1

Well, you could start with something like this perhaps:

@(Html.Kendo().Grid<Project.Models.Bench>
    ()
    .Name("grid")
    .Columns(columns =>
    {
     columns.Bound(p => p.name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
     columns.Bound(p => p.Variance).Title("Booked")
         .ClientTemplate(Html.Kendo().Sparkline()
                        .Name("booked_#=name#"")
                        .Type(SparklineType.Column)
                        .Tooltip(tooltip => tooltip.Format("{0} booked"))                        
                            .DataSource(
                        .DataSource(ds => ds.Ajax()
                          .Read(read => read.Action("Read", "MyController", new { myId = Model.MyID })
                           )
                        .ToClientTemplate()
                        .ToHtmlString()
                       );

    })
    ...

Loosestrife

It's your datasource. There are several ways of connecting the data. You could also grab it from your model. – Loosestrife

Só if i wanted do use 2 fields of my class bench, in this case bookedSeats and freeSeats both of them ints, what would be the best way? – Intrusion

i would really appreciate if you could give a more complete example :) – Intrusion

I haven't used that control per se, but I've found with the Kendo widgets the best approach is to get a minimal example working and then add features and look for answers on specific issues like the datasource, events, axis, etc. – Loosestrife

i really needed this to work , its kind of a blooking point in my work. thanks for the help tho – Intrusion

Here is the online demo link which you may have seen: demos.telerik.com/aspnet-mvc/sparklines/index Otherwise maybe try Sam at this link: samidipbasu.com/about -- he's a developer advocate at Telerik that I found very helpful. – Loosestrife

Yep ive seen that link quite alot these last days eheh ill try Sam then :) – Intrusion

Here's a site Sam showed in his demo where you can work issues out. Found one with a sparkline example as a start. dojo.telerik.com/@harsh/eNUkO – Loosestrife

if in the .ClientTemplate i would have a "<span id='something'></span>" and then with that java script that is show in dojo to create a pie, do you know if there is a way for calling the script for each row? for example when grid data is loaded or something of sorts – Intrusion

I believe that's the intent of this code: .Name("booked_#=name#"") so it generates a different id per row. Whatever is in the #= xxxx # should be an id or unique field – Loosestrife

yep that part i got :) what i was trying to do now , was to call a function when the grid was loaded with info, that wen't trhough every row filling the 3rd column cell with the sparkline, using that javascript on that dojo. but i have a feeling im over complicating things :d – Intrusion

Yes, they are hard coding the data there whereas you will probably need a datasource that gets data from a controller action. I changed my code above to show how I use datasources on grids with MVC actions. – Loosestrife