This is a migrated thread and some comments may be shown as answers.

Checkboxes not being populated on display.

7 Answers 714 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Chrys asked on 19 Apr 2013, 07:43 PM

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.

7 Answers, 1 is accepted

answered on 23 Apr 2013, 11:14 AM

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!

answered on 24 Apr 2013, 07:29 AM

GirdEditingCollectionWithCheckBoxes.zip

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!

answered on 17 May 2013, 11:53 PM

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