[Solved] Checkbox not showing but the bounded value

[pj]

Installed the trial version of Telerik MVC and using C# VS2010 SP1 to create the new project using Telerik MVC 3 Web Application (Razor) Template. Copied the example from CheckBoxesAjax.cshtml.  The only different is the FileID is Guid instead of int.  The checkbox not showing but it shows the value of the FileID on the column.   Appreciated any help!
PJ.

@model IEnumerable<TelerikMvcApp.Models.tblFile>
@{ Html.Telerik().Grid(Model)
        .Name("File")
        .Columns(columns =>
        {
            columns.Bound(f => f.FileID)
                   .ClientTemplate("<input type='checkbox' name='checkedFiles' value='<#= FileID #>' />")                 
                   .Title("Check")
                   .Width(100)
                   .HtmlAttributes(new { style = "text-align:center" });
            
            columns.Bound(f => f.FileID).Width(100);
            columns.Bound(f => f.FileName).Width(200);
            columns.Bound(f => f.InvoiceNo);
            columns.Bound(f => f.AddDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .DataBinding(dataBinding => dataBinding.Ajax()
                .Select("_CheckBoxesAjax", "Grid"))
        .Scrollable()
        .Pageable()
        .Render();
}
<div id="result">
</div>
<p>
    <button class="t-button t-state-default" onclick="displayCheckedFiles()">Display checked files</button>
    <script type="text/javascript">
        function displayCheckedFiles() {
            var $checkedFiles = $(':checked');
            if ($checkedFiles.length < 1) {
                alert('Check a few grid rows first.');
                return;
            }
            $('#result').load('@Url.Action("DisplayCheckedFiles", "File")', $checkedFiles);
        }
    </script>
</p>

[Dadv]

Just try to do this :

columns.Bound(f => f.DocumentId)
                   .ClientTemplate("<input type='checkbox' name='checkedFiles' value='4C515B8A-7AAD-447D-9449-6D37DF6BB9A9' />")
                   .Title("Check")
                   .Width(100)
                   .HtmlAttributes(new { style = "text-align:center" });

To see if the GUID value change anything, but didn't see any problem.

Could you send a sample project ?

[pj]

Thank you Dadv for your response!

When the page initial loaded (or refresh), the checkbox column displays the bounded column value.  Only if click any column to sort or click next page, the checkbox will appear.  Tried the .ClientTemplate("<input type='checkbox' name='checkedFiles' value='4C515B8A-7AAD-447D-9449-6D37DF6BB9A9' />"), it doesn't work.  After sorting by a column or moving to next page, everything seems working. The checked boxes returned the proper values.   Any ideas?  Please see attached project file.  Thanks.

PJ

[Dadv]

Ok easy Fix:

You use Ajax binding AND server binding ...

@{ Html.Telerik().Grid(Model)  => you give the Data for the first load (using server side binding) and no Template for the checkboxes (so it display the value)

the only thing to change is that :

@{ Html.Telerik().Grid<TelerikMvcDemo.Models.MyFile>()

Do not provide the data at start so the ajax binding take the relay and the client template is used.

you could also change in the controller this :

 public ViewResult Index()
        {
            return View(_repository.MyFiles);
        }

to

 public ViewResult Index()
        {
            return View();
        }

it's no more nescessary because it will use _CheckBoxesAjax instead.


Ps: don't forget to change this : 

 columns.Bound(f => f.FileID)
                   .ClientTemplate("<input type='checkbox' name='checkedFiles' value='<#=FileID#>' />")                 
                   .Title("check")
                   .Width(100)
                   .HtmlAttributes(new { style = "text-align:center" });

[pj]

Hi Dadv, Thank you for the crystal clear explanation!

After change to @{ Html.Telerik().Grid<TelerikMvcDemo.Models.MyFile>(),  it works like a charm!

Then,  get a little confused with "Ps:".  What do I need to change the following codes?

 columns.Bound(f => f.FileID)
                   .ClientTemplate("<input type='checkbox' name='checkedFiles' value='<#=FileID#>' />")                 
                   .Title("check")
                   .Width(100)
                   .HtmlAttributes(new { style = "text-align:center" }); 

[Dadv]

To remove the guid  4C515B8A-7AAD-447D-9449-6D37DF6BB9A9 used for the test :)

[pj]

Thanks! That was very thoughtful.  ;-)