[Solved] No support for Ajax delete?

[Daniel Cotter]

The new MVC controls are great, but am I right in thinking that there's no way to do an Ajax delete without writing custom code?

Also, shouldn't deletes go to a POST, rather than a GET (as is being done in the Grid demo)?

I have this code creating a grid, but it throws a not-supported exception when I run it (specifically, "Cannot use templates in Ajax or WebService binding mode":

  <div id="formTable">
    <%
      Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns => {
           columns.Add(f => f.MoveOrder);
           columns.Add(f => f.DepartmentName);
           columns.Add(f => f.AuthorizerName);
           columns.Add(f => f.MovingDate);
           columns.Add(f =>
           {
             %>
             <%= Html.ActionLink("Edit", "Editing", new { id = f.Id }, new { @class="t-link action-edit" }) %>
             <%= Html.ActionLink("Delete", "Delete", new { id = f.Id }, new { @class = "t-link action-delete" }) %>
             <%
           });
        })
        .Ajax(ajax => ajax.Action("_GetGrid", "Forms"))
        .Sortable()
        .Pageable()
        .Render();
    %>
  </div>

[Atanas Korchev]

Hi Daniel Cotter,

Indeed template columns are only supported in server-binding mode. A workaround exists however - to use the Format method:

columns.Add(f =>  f.Id)
       .Format(Html.ActionLink("Edit", "Editing", new { id = "{0}" }, new { @class="t-link action-edit" }) +
               Html.ActionLink("Delete", "Delete", new { id = "{0}" }, new { @class = "t-link action-delete" }))
       .Encoded(false)
       .Filterable(false)
       .Sortable(false);

The only drawback is that after getting back from the edit page the grid will reset to first page.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Daniel Cotter]

Thanks, Atanas,

That worked perfectly, but I'm still wary of exposing the Delete action as a GET. Is there a way to have the Grid POST to the Delete (without, for example, first going to a GET-Delete view and then confirming a POST-Delete submit, which is too clunky)?

Thanks,

Daniel

[Atanas Korchev]

Hi Daniel Cotter,

I think a workaround exists for that as well - use a form tag and a submit button in the Format:

columns.Add(c => c.CustomerID).Format(
                        "<form method='post' action='" + Url.Action("Delete", new { id = "{0}" }) + "'>" +
                        "<input type='submit' value='Delete' /></form>")

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Daniel Cotter]

Thanks again for that very clever workaround.

[Andy McShane]

Hi, I found this post and thought it was the answer to my problem, well it is upo to a point. I need to add Edit / View options to an Ajax fed grid. I have tred to use this method with a little success,

    <%
        Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
                         {
                             columns.Add(o => o.ServiceUserId).Format(Html.ActionLink("Edit", "Edit", "ServiceUser",
                                                                                   new { id = "{0}" },
                                                                                   new { @class = "t-link action-edit" })).Title("Action");
                             columns.Add(o => o.ServiceUserId).Title("User ID");
                             columns.Add(o => o.UserMembershipId).Title("Membership ID");
                             columns.Add(o => o.CustomerId).Title("Customer ID");
                             columns.Add(o => o.KnownName).Title("Known As");
                             columns.Add(o => o.ServiceUserUserName).Title("Username");
                             columns.Add(o => o.ServiceUserFirstName).Title("Firstname");
                             columns.Add(o => o.ServiceUserSurname).Title("Surname");
                             columns.Add(o => o.ServiceUserEmail).Title("Email");
                             columns.Add(o => o.DateOfBirth).Format("{0:MM/dd/yyyy}").Title("DOB");
                         })
            .Ajax(ajax => ajax.Action("Index", "ServiceUser"))
            .Pageable()
            .Sortable()
            .Filterable()
            .Render();
      %>

However the above code appears to HtmlEncode the 'edit' field and so does not output a url correctly. In the code view I see the following text;

&lt;a href=''&gt;</td><td>&lt;a class=&quot;t-link action-edit&quot; href=&quot;/PPMSII/ServiceUser/Edit/3&quot;&gt;Edit&lt;/a&gt;

On page, within my grid it is displayed as follows;

<a class="t-link action-edit" href="/PPMSII/ServiceUser/Edit/3">Edit</a>

How can I get the correct output in my grid?

[Atanas Korchev]

Hello Andy McShane,

You have forgotten to set Encoded(false):
columns.Add(o => o.ServiceUserId).Format(Html.ActionLink("Edit", "Edit", "ServiceUser",   
                                                                                   new { id = "{0}" },  
                                                                                   new { @class = "t-link action-edit" })).Title("Action").Encoded(false);

Kind regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Andy McShane]

Doh!!!! Do I feel like an idiot now! Thank you very much for help, much appreciated. :-)

[Vincent Girard]

Is it possible to have the edit action on the DepartmentName for example(columns.Add(f => f.DepartmentName);) in a non AJAX I would do something like this :

colums.Add(c => { Html.ActionLink(f.DepartmentName, "Editing",new { Id = f.Id }); }) 

but if I do so I get the Cannot use templates in Ajax or WebService binding mode exception.

Thx!

[Atanas Korchev]

Hi Vincent Girard,

My previous response shows how to use the Format method :

columns.Add(o => o.ServiceUserId).Format(Html.ActionLink("Edit", "Edit", "ServiceUser",   
                                                                                   new { id = "{0}" },  
                                                                                   new { @class = "t-link action-edit" })).Title("Action").Encoded(false);

You should use this approach to implement templates for ajax binding. You can also check the newly introduced inline editing support as well as the client-side templates.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vincent Girard]

I understand that but what I want is to have my link on a value of my object, not on "Edit". But I can't pass two arguments(the id and the string value) to my .format() method.

columns.Add(o => o.ServiceUserId).Format(Html.ActionLink(o.KnownName, "Edit", "ServiceUser",   

                                                                                   new { id = "{0}" },  
new { @class = "t-link action-edit" })).Title("Action").Encoded(false);

[Atanas Korchev]

Hello Vincent Girard,

Yes this is the limitation of using Format - you can use only the bound field and refer to it as "{0}" (as it is setting the format string for that column). You can use the onRowDataBound event to set the required id or (bind the column to "KnownName" instead). Or you can give the client-side templates a try - they allow you to use all properties of the bound object on the client-side. In your case the template would look like this:

columns.Bound(c => c.ServiceUserId).Title("Department").ClientTemplate("<a href='" + Url.Action("Edit", "ServiceUser") + "/<#=ServiceUserId#>'><#= DepartmentName#></a>");

If you want to try this you should download the Q1 2010 futures release.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jose Montero]

Still it doesnt work. This is my code:

columns.Bound(c => c.SiteNum).Title(

"SDC").ClientTemplate("<a href='" + Url.Action("Edit", "ServiceUser") + "/<#=SiteNum#>'><#= SiteName#></a>");

And only displays the value of SiteNum.

Please help!

Thanks

 

[Vincent Girard]

Are you using the new released dll?

For me it works perfectly, here's my code :

                        

                         colums.Bound(c => c.Title).Title("Titre").ClientTemplate("<a href=\"" + Url.Action(MVC.InscriptionsLoisirs.Modifier()) + "/<#=Id#>\" ><#=Title#></a>");

Does youre object has a SiteName property? Can you look at the rendered HTM?

[Jose Montero]

I am using this version:

C:\Program Files\Telerik\Extensions for ASP.NET MVC Q1 2010

And yea, SiteNum and SiteName are part of my object.

Seriously, thanks for your help!

[Atanas Korchev]

Hello Jose Montero,

The client template will not be applied initial (during server binding). You can leave the grid initially empty (do not call BindTo and do not pass the data source in the controller) so it makes an ajax request as soon as it is loaded.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Vincent Girard]

Hi Jose,

If you do normal binding does it works? columns.Bound(c => c.SiteName);

How do you do youre dataBinding? for myself I do it this way : .DataBinding(d => d.Ajax().Select("ListAjax", "Agenda", new { year = DateTime.Now.Year, month = 0, category = -1 }))

And what is the rendered HTML when you do a viewSource?

Hope this help!

[Jose Montero]

Thanks to all for the help.

1. Yes, if i do a normal binding it works.
2. I am binding this way, this is my code:

<%

=Html.Telerik().Grid<CapacitySummaryDTO>()

 

.Name(

"CapacitySummary")

 

.BindTo((

IEnumerable<CapacitySummaryDTO>)ViewData["capacityList"])

 

.Columns(columns =>

{

 

 

columns.Bound(c => c.SiteNum).Title("SDC").ClientTemplate("<a href='" + Url.Action("Edit", "ServiceUser") + "/<#=SiteNum#>'><#= SiteName#></a>");

 

 

})

 

//.ClientEvents(events => events

 

 

// .OnLoad("onLoad")

 

 

// )

 

.Scrollable()

%>

 

<%

Html.Telerik().ScriptRegistrar().Scripts(scripts =>

scripts.AddGroup(

"CommonScript", group => group

 

.Add(

"~/Scripts/2010.1.218/telerik.calendar.min.js")

 

.Add(

"~/Scripts/2010.1.218/telerik.datepicker.min.js")

 

)

).Render();

3. My rendered html is this:
<div class="t-widget t-grid" id="CapacitySummary"><div class="t-grid-header"><div class="t-grid-header-wrap"><table cellspacing="0"><colgroup><col /></colgroup><tr><th class="t-last-header t-header" scope="col">SDC</th></tr></table></div></div><div class="t-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /></colgroup><tbody><tr><td class="t-last">1011</td></tr><tr class="t-alt"><td class="t-last">4727</td></tr></tbody></table></div><div class="t-grid-footer t-footer"><div class="t-status"><a class="t-icon t-refresh" href="#"></a></div></div></div>  
    
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="/Scripts/2010.1.218/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/2010.1.218/telerik.grid.min.js"></script>
<script type="text/javascript" src="/Scripts/2010.1.218/telerik.calendar.min.js"></script>
<script type="text/javascript" src="/Scripts/2010.1.218/telerik.datepicker.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#CapacitySummary').tGrid({columns:[{"member":"SiteNum","type":"Number","title":"SDC"}], pageSize:0});});


Thanks again!

[Jose Montero]

Hi Atanas:

Ok, this is my code:

<%

=Html.Telerik().Grid<CapacitySummaryDTO>()

 

.Name(

"CapacitySummary")

 

.BindTo((

IEnumerable<CapacitySummaryDTO>)ViewData["capacityList"])

 

.Columns(columns =>

{

 

 

columns.Bound(c => c.SiteNum).Title("SDC").ClientTemplate("<a href='" + Url.Action("Edit", "ServiceUser") + "/<#=SiteNum#>'><#= SiteName#></a>");

 

 

})

 

 

.Scrollable()

And you mean, i should do something like this:

 

<%=Html.Telerik().Grid<CapacitySummaryDTO>()

 

.Name(

"CapacitySummary")

 

.Columns(columns =>

{

 

 

 

 

 

columns.Bound(c => c.SiteNum).Title("SDC").ClientTemplate("<a href='" + Url.Action("Edit", "ServiceUser") + "/<#=SiteNum#>'><#= SiteName#></a>");

 

 

 

})

 

Databinding.....blablabla

 

.Scrollable()

should i need to set the databinding after the creation of the columns, is that whatu mean?

Thanks again!

 

 

[Atanas Korchev]

Hi Jose Montero,

Client templates are not applied during server binding. When you use BindTo the grid is bound server side initially. The workaround should be to simply remove the invocation of BindTo when declaring your grid. Please check the client templates example for a reference and working demo.

I will lock this forum thread as it digressed from the original topic.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.