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

columns.template not working when using ajax

5 Answers 296 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 08 Jan 2014, 02:52 PM
I've made a Grid that formerly got his data from the Model.
I also had a custom collumn here that i created using columns.template which worked properly.

For sorting and search reasons a changed the datasource to a json from a viewmodel.
When i used this method my data also loaded but the template only displayed an empty column.

This is my code of the Grid:

                        @(Html.Kendo().Grid<KdG.ProjectPortofolio.IntranetApp.ViewModels.Projects.ListProjectViewModel>() 
                              .Name("Grid")
                                        .DataSource(ds => ds.Ajax()
                                                          .Read(r => r.Action("Read", "Project"))
                                        )
                              .EnableCustomBinding(false)
                              .ToolBar(toolBar => toolBar.Custom()
                                    .Text("Exporteer naar Excel")
                                    .HtmlAttributes(new { @class = "export",@id="test" })
                                    .Url(Url.Action("ExportToExcel", "Project",new { page = 1, pageSize = "~", filter = "~", sort = "~" }))
                                    

                              )
                              .Columns(columns =>
                              {
                                  columns.Bound(p => p.Name).Filterable(filterable => filterable.UI("nameFilter")).Title("Naam");
                                  columns.Bound(p => p.Status).Filterable(filterable => filterable.UI("statusFilter")).Title("Status");
                                  columns.Bound(p => p.Category).Title("Categorie");
                                  columns.Bound(p => p.StartDate).Title("Start");
                                  columns.Bound(p => p.EndDate).Title("Einde");
                                  columns.Bound(p => p.AreaOfStudy).Title("Studiegebied");
                                  columns.Bound(p => p.ProjectLeader).Title("Projectleider");
                                  columns.Template(

                                      @<text>
                                        @Html.IconActionLink("glyphicon glyphicon-info-sign", null, "Details", "Project", new { id = item.Id }, new { @class = "btn btn-default btn-xs float FloatLeft" })
                                      </text>);
                              })
                              .Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s
                                  .Clear()
                                  .Contains("Bevat")
                                  .DoesNotContain("Bevat Niet")
                                  .EndsWith("Eindigd met")
                                  )))
                             
                             .Pageable()
                             .Groupable()
                             .Sortable()//Enable paging
)

Thanks in advance

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 08 Jan 2014, 03:31 PM
Hello Tim,


In an Ajax bound Grid you should use the ClientTemplate method and pass a Kendo Template as a value. This topic is discussed in the Grid's FAQ section.

I hope this information helps. Have a great day!

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 09 Jan 2014, 08:22 AM
Hello Dimiter,

Thank you very much for the reply.
I have one question about your suggested sollution.
Is it possible to add an actionlink inside this "collumns.Bound(p => p.Id).Template" like 
"@Html.IconActionLink("glyphicon glyphicon-info-sign", null, "Details", "Project", new { id = item.Id }, new { @class = "btn btn-default btn-xs float FloatLeft" })'

Thanks,

Tim
0
Dimiter Madjarov
Telerik team
answered on 09 Jan 2014, 09:30 AM
Hi Tim,


This topic about building action links is also covered in the FAQ Section. In a client template you should add the <a> tag directly and use the Url.Action helper to generate the URL. The html classes could be added directly to the tag and the additional parameters should be concatenated to the URL.

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 10 Jan 2014, 09:13 AM
Hi Dimiter,

Thank for your instructions i managed to fix with your help.
This is my final code for the template:

                                      columns.Bound(p => p.Id).ClientTemplate(
                                            "<a href='" + 
                                            Url.Action("Details","Project") + 
                                            "/#= Id #'" +
                                            "><i class= 'glyphicon glyphicon-info-sign'></i></a>" +
                                            "#if(ProjectLeaderId ==" + Html.GetLoggedInPerson(Context).Id + ") {#" +
                                            "<a href='" +
                                            Url.Action("EditProject", "Project") +
                                            "/#= Id #'" +
                                            "> <i class= 'glyphicon glyphicon-pencil'></i></a>" +
                                            "# } #"
                                     ).Sortable(false).Title("").Filterable(false);

Kind Regards,

Tim
0
Dimiter Madjarov
Telerik team
answered on 10 Jan 2014, 11:48 AM
Hello Tim,


Thank you for the update. Do not hesitate to contact us again if you need further assistance.
Have a great day!

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Tim
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Tim
Top achievements
Rank 1
Share this question
or