Checkboxes not being populated on display.

8 posts, 0 answers
  1. Chrys
    Chrys avatar
    45 posts
    Member since:
    Feb 2013

    Posted 19 Apr 2013 Link to this post

    I have a grid
    @(
                       Html.Kendo()
                           .Grid<Papr2WebMvc4.Models.PiprForms.PartnershipForm>()
                           .Name("partnerShipFormGrid")
                           .Columns(columns =>
                           {
                               columns.Bound(form => form.Id).Hidden(true);//0
                               columns.Bound(form => form.Date).Format("{0:M/yyyy}").Title("Month");//1
                               columns.Bound(form => form.CommentsDescriptionsNotes).Hidden(true).Title("Partnership Description");//8
                               columns.Command(command => { command.Edit(); command.Destroy(); }).Hidden(false);
                           })//end columns
                        
                           .Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("AddEditPartnership").Window(window => window.Width(750)))
                        
                           .ToolBar(toolbar => toolbar.Create())
                        
                           .Selectable(select => select.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                        
                           .DataSource(datasource => datasource
                                                               .Ajax()
                                                               .ServerOperation(true)
                                                               .Model(model => model.Id(form => form.Id))
                                                               .Read(read => read.Action("GetForm", "Form", new
                                                               {
                                                                   planId = Model.PlanId,
                                                                   planActivityId = Model.Activity.PlanActivityId,
                                                                   activityType = Model.Activity.ActivityType,
                                                                   activityTypeId = Model.Activity.ActivityTypeId
                                                               }))//end read
                                    
                                                               .Create(create => create.Action("AddForm", "Form", new
                                                               {
                                                                   planActivityId = Model.Activity.PlanActivityId,
                                                                   activityTypeId = Model.Activity.ActivityTypeId
                                                               }))//end create
                                                               .Destroy(destroy => destroy.Action("DeleteForm", "Form", new { planActivityId = Model.Activity.PlanActivityId }))
                                                               .Update(update => update.Action("EditForm", "Form", new
                                                               {
                                                                   planActivityId = Model.Activity.PlanActivityId,
                                                                   activityTypeId = Model.Activity.ActivityTypeId
                                                               })))//end datasource
                       //.Events(events => events.Change("onChange").DataBound("onDataBound"))
                           .Pageable(pages => pages.PageSizes(true))

                       )//end partnershipgrid


    Here is my editor template

    @model Papr2WebMvc4.Models.PiprForms.PartnershipForm
    @{
        if (!Model.Year.HasValue)
        {
            Model.Year = null;
        }
        if (!Model.Month.HasValue)
        {
            Model.Month = null;
        }
       Model.Groups= Model.GetGroups(Model.PlanActivityId, 0, Model.Id);
    }
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
     
    <fieldset>
        <legend>@Model.FormActivityType</legend>
     
        <div class="editor-label">
            Month partnerhsips were formed
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Month)/@Html.EditorFor(model => model.Year, new { @placeholder = "yyyy" })
        </div>
    @*    @Html.Hidden("Date", new DateTime(Model.Year.Value, Model.Month.Value, 1))*@
        <div>
            @for(int i=0;i<Model.Groups.Count;i++)
            {
                <label>@Model.Groups.ElementAt(i).GroupName@Html.CheckBox("IsSelectedGroup"+@Model.Groups.ElementAt(i).GroupId)</label>
                @*<label>@Model.Groups.ElementAt(i).GroupName@Html.CheckBoxFor(model => model.Groups.ElementAt(i).IsSelectedGroup, new { @id = "Group" + Model.Groups.ElementAt(i).GroupId })</label>*@
            }
           @* @{Html.RenderAction("GetGroups", "Form", new { planActivityId = Model.PlanActivityId,formId=Model.Id });}*@
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.CommentsDescriptionsNotes, "Additional description of new partnerships")
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CommentsDescriptionsNotes)
        </div>
    </fieldset>
    My problem is that I cannot get the checkbox to show selected when I select a form to edit. I also cannot seem to use checkboxfor in my edit templates because it says value is required and when I select one it selects them all. I can get my checkbox information to save properly using the regular checkbox method but this isn't working for getting those values back.I can use checkboxfor just fin outside of the grid editor templates.

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 23 Apr 2013 Link to this post

    Hello Chrys,

    The Editor Template is serialized and after assigning data attributes to the inputs the MVVM takes care of updating the model of the Grid (all on the client).

    So basically to create checkbox you need to simply bind the checked state of the checkbox to your field.

    e.g.

    <input type="checkbox" data-bind="checked:IsAdmin" />


    Where IsAdmin is the name of the boolean field.

    http://demos.kendoui.com/web/mvvm/elements.html


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Chrys
    Chrys avatar
    45 posts
    Member since:
    Feb 2013

    Posted 23 Apr 2013 Link to this post

    Can  you give me a razor syntax example of this that is closer to using a for or foreach loop to bind the checkboxes?
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Apr 2013 Link to this post

    Hello Chrys,

    I am afraid there is not pure Razor syntax when using the MVVM binding. Take a look at the attached project, it achieves something similar.

    I hope it helps.

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Chrys
    Chrys avatar
    45 posts
    Member since:
    Feb 2013

    Posted 17 May 2013 Link to this post

    My checkboxes when I try to with a simple example it selects both checkboxes. Its like its not recognizing my groups as a list of anything. Here is what I tried when trying to emulate the project that you posted.

    in a  class that my model is specified at the top of the editor I created a list of strings  
    List<string> SelectedGroups
    {get; set;}

    in my grid I set the Model to a default

    model.Field(c => c.SelectedGroups).DefaultValue(new List<string> ());

    in my read operation I set the values for selected groups like so

    form.SelectedGroups=new List {"1","2"}

    in my editor template 
    <label><input type="checkbox" value="1"  data-bind="checked: SelectedGroups" id="Test1"/>Test 1</label>
                <label><input type="checkbox" value="2"  data-bind="checked: SelectedGroups" id="Test2" />Test 2</label>
    But I still get both checkboxes clicked when I click one. Then when I do the update it set SelectedGroups just like it was one checkbox with a value of true.

    Am I missing something. The ui acts like it doesn't recognize SelectedGroups as list of strings
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 May 2013 Link to this post

    Hello Chrys,

    I am not sure what is behind this. Please replicate the case into the sameple project and send it so I can investigate further.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Ed
    Ed avatar
    3 posts
    Member since:
    Jul 2016

    Posted 13 Jun in reply to Chrys Link to this post

    I got the similar problem. How did you fix it?
  8. Martin
    Admin
    Martin avatar
    828 posts

    Posted 15 Jun Link to this post

    Hello,

    As this thread is quite outdated, would you mind assembling a runnable Dojo (or project) that demonstrates your case? 

    Regards,
    Martin
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top