Grid of checkboxes

4 posts, 0 answers
  1. Joseph
    Joseph avatar
    8 posts
    Member since:
    Feb 2008

    Posted 07 Nov Link to this post

    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

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 09 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. Kendo UI is VS 2017 Ready
  4. Joseph
    Joseph avatar
    8 posts
    Member since:
    Feb 2008

    Posted 09 Nov in reply to Danail Vasilev Link to this post

    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.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 11 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
Kendo UI is VS 2017 Ready