[Solved] Binding Grid to Dynamic Datatable with Server Template

[Darren]

I have a grid that is binding to a dynamic data table.  The values can be displayed correctly, but I need to create a custom template for the Boolean columns (i.e. display checkboxes, instead of strings).  My code for the View is below:

@model System.Data.DataTable
@{
    Html.Telerik().Grid(Model)
        .Name("grdUserPermissions")
        .Columns(col =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                if (column.DataType == typeof(Boolean))
                {
                    col.Bound(column.DataType, column.ColumnName)
                        .Template(t =>
                        {
                            var divStart = "<div style='width: 100%; text-align: center;'>";
                            var input = "<input type='checkbox' value=' " + t.Row.ItemArray.GetValue(column.Table.Columns.IndexOf("UserId")) + "'" + (((bool)t.Row.ItemArray.GetValue(column.Table.Columns.IndexOf(column.ColumnName))) ? "checked" : "") + "/>";
                            var divEnd = "</div>";
                            return column.ColumnName;
                            return t.Row.ItemArray.GetValue(2);
                            return string.Format("{0}{1}{2}", divStart, input, divEnd);

                        })
                        .HeaderHtmlAttributes(new { style = "text-align: center;" });
                }
                else
                {
                    col.Bound(column.DataType, column.ColumnName);
                }
            }
        })
        .Render();
}

You may notice that I have three return statements.  These have been used for testing.  

• The first statement always returns the string "DataEntry". 
• The second always returns the string "True" (Since both test users have a value of True for that column). 
• The third always returns a checkbox that is checked if the last column (DataEntry) is true and unchecked if it is false.

 
This is the problem.  I need the checkboxes to reflect the actual values in each column, rather than always reflecting the value of the last column.  Below is the method from the controller that is generating the test data for reference:

[HttpPost]
public ActionResult _GetPermissionsManagerTab(string view, string filter)
{
    var dt = new System.Data.DataTable();
    dt.Columns.Add("UserId", typeof(int));
    dt.Columns.Add("UserName", typeof(string));
    dt.Columns.Add("Administrator", typeof(bool));
    dt.Columns.Add("LEAAdmin", typeof(bool));
    dt.Columns.Add("DataEntry", typeof(bool));
    dt.Rows.Add(1, "Darren", true, false, true);
    dt.Rows.Add(2, "Michael", true, true, false);

    return PartialView("_ViewByUser", dt);
}

Any help with this would be greatly appreciated!
Thanks,
-Darren

[John Hunter]

The code below works.  Notice that I introduced a local copy of the 'Column' variable. The reason your code did not give the results you expected was due to the way you were accessing the 'column' variable inside your anonymous function.  Here is a link that talks about 'Access To Modified Closure' http://dbebek.wordpress.com/csharp/access-to-modified-closure/.  Hope this helps.

@{
    Html.Telerik().Grid(Model)
        .Name("grdUserPermissions")
        .Columns(col =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                if (column.DataType == typeof(Boolean))
                {
                    var localColumn = column;
                    col.Bound(column.ColumnName).Template(t =>
                                                              {
                                  const string divStart = "<div style='width: 100%; text-align: center;'>";
                                  var itemValue = t.Row.ItemArray[localColumn.Ordinal];
                                  var checkedText = itemValue.ToString() == "True" ? "checked" : "";
                                  var input = itemValue.ToString() + "<input type='checkbox' " +  checkedText + "/>";
                                  const string divEnd = "</div>";
                                  return string.Format("{0}{1}{2}", divStart, input, divEnd);
                                                              });
                }
                else
                {
                    col.Bound(column.DataType, column.ColumnName);
                }
            }
        })

        .Render();
}

[Darren]

John,

Thank you for your reply.  It got me on the right track.  The final, working code is displayed below:

Html.Telerik().Grid(Model)
        .Name("grdUserPermissions")
        .Columns(col =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                if (column.DataType == typeof(Boolean))
                {
                    var colIndex = column.Ordinal;

                    col.Bound(column.DataType, column.ColumnName)
                        .Template(t =>
                        {

                            var divStart = "<div style='width: 100%; text-align: center;'>";
                            var itemValue = bool.Parse(t.Row.ItemArray[colIndex].ToString());
                            var checkedText = itemValue ? "checked" : "";
                            var input = "<input type='checkbox' " + checkedText + "/>";
                            var divEnd = "</div>";
                            return string.Format("{0}{1}{2}", divStart, input, divEnd);

                        })
                        .HeaderHtmlAttributes(new { style = "text-align: center;" });
                }
                else
                {
                    col.Bound(column.DataType, column.ColumnName);
                }
            }
        })
        .Render();