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

[Solved] Header & Footer Template Demo but with Ajax

0 Answers 144 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jeff
Top achievements
Rank 1
Jeff asked on 08 Jul 2011, 10:23 PM
Following your http://demos.telerik.com/aspnet-mvc/razor/grid/headerfootertemplates?theme=hay example. I created something similar (see below) just using Ajax instead. Upon selecting multiple rows, I need to post (just the ids of the rows and comments from one of the columns [yet to do] ) via ajax to a controller from a similar button as in the demo, update the status to one of the row properties to true and update the grid to no longer show the selected rows.

I'm not sure how to do that though. Should I surround the grid by
using (Ajax.BeginForm("Update", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "#myDiv" }))

This would replace the whole grid since it updates the entire div. Is there any sample that you can show me to be able to update the rows via Ajax and refresh the grid to no longer show those rows?


@(Html.Telerik().Grid<UnApprovedImageData>()
       .Name("UnApprovedImageData")
       .DataKeys(keys =>
       {
           keys.Add(k => k.LastImage.UserImageId);
       })
       .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetUnApprovedImages", "Admin"))
       .Columns(columns =>
       {
           columns.Bound(i => i.LastImage.UserImageId)
               .ClientTemplate("<input name='checkedRecords' type='checkbox' value='<#= LastImage.UserImageId #>' title='Check'/>")                
               .HeaderTemplate(
                @<text>
                    <input type="checkbox" title="check all records" id="checkAllRecords"/>
                </text>
               )
           .Width(50)
           .HeaderHtmlAttributes(new { style = "text-align:center" })
           .HtmlAttributes(new { style = "text-align:center" });
           columns.Bound(i => i.FirstImage)
               .ClientTemplate(@"<# if (FirstImage == null) { #> <strong>No Data</strong> <# } else { #> <img width='100' height='110' src='" + Url.Content("~/Uploads/") + "<#= LastImage.Filename #>' /> <# } #>")
               .Title("First Pic");                   
           columns.Bound(i => i.LastImage.Filepath)
               .ClientTemplate("<img width='100' height='110' src='" + Url.Content("~/Uploads/") + "<#= LastImage.Filename #>'/>")
               .Title("Last Pic");
           columns.Bound(i => i.InstructionsText);
           columns.Bound(i => i.LastImage.VerificationStatus);          
       })
       .Pageable()
       .Sortable()
       .Filterable()      
)
Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Share this question
or