Grid of checkboxes

[Joseph]

I have a KendoUI Grid that is made up of several checkbox columns (screenshot attached). I'm having a problems getting the values to my controller. Below is the code I have for the grid. How do I pass checkbox values to my controller?

<div style="width: 1400px; clear: both;">        
        @(Html.Kendo().Grid<MVCTimesheetApplication.Models.REAP>()
            .Name("timesheetGrid")
            .TableHtmlAttributes(new { style = "table-layout: fixed; " })
            .Columns(columns =>
            {
                columns.Bound(t => t.Project).Title("Project").HtmlAttributes(new { style = "white-space: nowrap;" }).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(t => t.DisplayTask).Title("Task").HtmlAttributes(new { style = "white-space: nowrap;" }).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(t => t.IndirectId).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(t => t.State).Width(100).HtmlAttributes(new { style = "text-align: center;" }).EditorTemplateName("ReadOnlyTemplate");
                columns.Bound(t => t.Sunday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Sun<br />{0}", ((DateTime)Session["startDate"]).ToString("M/d")));
                columns.Bound(t => t.Monday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Mon<br />{0}", ((DateTime)Session["startDate"]).AddDays(1).ToString("M/d")));
                columns.Bound(t => t.Tuesday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Tue<br />{0}", ((DateTime)Session["startDate"]).AddDays(2).ToString("M/d")));
                columns.Bound(t => t.Wednesday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Wed<br />{0}", ((DateTime)Session["startDate"]).AddDays(3).ToString("M/d")));
                columns.Bound(t => t.Thursday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Thu<br />{0}", ((DateTime)Session["startDate"]).AddDays(4).ToString("M/d")));
                columns.Bound(t => t.Friday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Fri<br />{0}", ((DateTime)Session["startDate"]).AddDays(5).ToString("M/d")));
                columns.Bound(t => t.Saturday).Width(75).HtmlAttributes(new { style = "text-align:center" }).ClientTemplate("<input type='checkbox' id='cbd#= Task #' />").Title(String.Format("Sat<br />{0}", ((DateTime)Session["startDate"]).AddDays(6).ToString("M/d")));
                columns.Bound(t => t.TotalHours).Width(75).EditorTemplateName("GridDecimal").Title("Hours").HtmlAttributes(new { style = "white-space: nowrap;text-align:center;" });
            })
            .Navigatable()
            .Editable(editable =>
            {
                editable.DisplayDeleteConfirmation(false);
                editable.Mode(GridEditMode.InCell);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                //.Events(events => events.Error("timesheetGrid_error_handler"))
                //.Events(events => events.RequestEnd("timesheetGrid_requestEnd"))
                .Model(model => model.Id(t => t.RowID))
                .Read(read => read.Action("REAP_Read", "Home"))
                .Update(update => update.Action("REAP_Update", "Home"))
            )
        .Events(events => events.DataBound("updateColumnTitles"))
        )
    </div>

Here is my model code...

public class REAP
    {
        [Key]
        public int RowID { get; set; }
        public string TimesheetID { get; set; }        
        public string Project { get; set; }
        public string DisplayProject { get; set; }
        public string Task { get; set; }
        public string DisplayTask { get; set; }
        public string IndirectId { get; set; }
        public string EarningsCodeId { get; set; }
        public string CostCategoryId { get; set; }
        public string State { get; set; }
        public bool Sunday { get; set; }
        public bool Monday { get; set; }
        public bool Tuesday { get; set; }
        public bool Wednesday { get; set; }
        public bool Thursday { get; set; }
        public bool Friday { get; set; }
        public bool Saturday { get; set; }
        public decimal TotalHours { get; set; }        
    }

And the code in my controller...

public ActionResult REAP_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<REAP> reap)
        {
            string userID = Session["UserID"].ToString();
            string timesheetID = Session["TimesheetID"].ToString();
            int retCode = 0;            

            if (reap != null)
            {
                string INSERT_QUERY_NEW = "INSERT INTO RCS_TIME_SHEET_REAP (TIME_SHEET_ID, WEEK_ENDING, PROJECT, TASK, INDIRECT_ID, STATE, SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY) " +
                                          "VALUES (@timesheetID, @weekEnding, @project, @task, @indirectID, @state, @sunday, @monday, @tuesday, @wednesday, @thursday, @friday, @saturday);";            

                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["VTAConnectionString"].ConnectionString))
                {
                    SqlCommand cmd = new SqlCommand(INSERT_QUERY_NEW, conn);
                    CreateREAPParameters(cmd);

                    conn.Open(); 

                    foreach (var row in reap)
                    {
                        try
                        {
                            cmd.Parameters["@timesheetID"].Value = timesheetID;
                            cmd.Parameters["@weekEnding"].Value = "11/5/2016";
                            cmd.Parameters["@project"].Value = row.Project;
                            cmd.Parameters["@task"].Value = row.Task ?? "";
                            cmd.Parameters["@indirectID"].Value = row.IndirectId ?? "";
                            cmd.Parameters["@state"].Value = row.State ?? "";
                            cmd.Parameters["@sunday"].Value = row.Sunday;
                            cmd.Parameters["@monday"].Value = row.Monday;
                            cmd.Parameters["@tuesday"].Value = row.Tuesday;
                            cmd.Parameters["@wednesday"].Value = row.Wednesday;
                            cmd.Parameters["@thursday"].Value = row.Thursday;
                            cmd.Parameters["@friday"].Value = row.Friday;
                            cmd.Parameters["@saturday"].Value = row.Saturday;

                            cmd.ExecuteScalar();
                        }
                        catch(Exception ex)
                        {
                            string x = ex.Message;
                        }
                    }                  

                    conn.Close();
                }
            }

            return this.Json(new { retCode = retCode });
        }

Thanks

 

[Danail Vasilev]

Hello Joseph,

To edit the checkbox you should update its checked property as well. More information about that specific scenario is available in this sample - Use Checkbox Column Templates and Edit

Regards,
Danail Vasilev
Telerik by Progress

[Joseph]

This still does not modify my model and allow me to send the values to my controller. I have to double click the cell, then click the check box again which displays the small red triangle and causes the checkbox to be unchecked. A third click will check it and modify the model. This seems to work differently that other types of grid columns.

[Danail Vasilev]

Hi Joseph,

The provided dojo sample shows how to handle the change event of the checkbox where the model is updated. Do you reproduce the issue with that sample? I am asking because it works as expected on my side.

If the issue is specific to your scenario can you send us a fully runnable sample, so we can examine it further?

Regards,
Danail Vasilev
Telerik by Progress