MultiSelect into detailTemplate : Selected values

[Adrien]

Hi !

I want to preselect my MultiSelect with values of my ViewModelRole.Functionalities

@(Html.Kendo().Grid<GCM.ViewModel.ViewModelRole>()
      .Name("GridRoles")
      .Columns(columns =>
      {
          columns.Bound(c => c.Designation);
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolbar => {
          toolbar.Create();
      })
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .ClientDetailTemplateId("functionalityPanel")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.Id))
          .Read(read => read.Action("Roles_Read", "Role"))
          .Create(create => create.Action("Roles_Create", "Role"))
          .Update(update => update.Action("Roles_Update", "Role"))
          .Destroy(destroy => destroy.Action("Roles_Destroy", "Role"))
      )
)

<script type="text/javascript">
    function Save(e)
    {
        var roleId = e.event.target.dataset.roleId;

        /*
            AJAX Call to update Role.Functionalities
        */
    }
</script>

<script id="functionalityPanel" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
                  .Name("Fonctionnalities_#=Id#")
                  .Placeholder("Choisissez les fonctionnalitées")
                  .AutoClose(false)
                  .DataValueField("Id")
                  .DataTextField("Code")
                  .Value(new List<int> { 1, 2 })
                  .BindTo(ViewBag.functionalities)
                  .ToClientTemplate()
    )
    <br/>
    @(Html.Kendo().Button()
        .Name("Save_#=Id#")
        .Content("Save")
        .HtmlAttributes(new { data_role_id="#=Id#" })
        .ToClientTemplate())
</script>

and my controller

public class RoleController : Controller
    {
        private SolutecNetContext db = new SolutecNetContext();

        public ActionResult Index()
        {
            ViewBag.functionalities = db.Functionalities.ToList();
            return View();
        }

        public ActionResult Roles_Read([DataSourceRequest]DataSourceRequest request)
        {
            IQueryable<Role> roles = db.Roles;
            DataSourceResult result = roles.ToDataSourceResult(request, role => new ViewModelRole{
                Id = role.Id,
                Designation = role.Designation,
                FunctionalitiesIds = GetFunctionalitiesIds(role.Functionalities)
            });

            return Json(result);
        }

        private List<int> GetFunctionalitiesIds(ICollection<Functionality> functionalities)
        {
            List<int> functionalitiesIds = new List<int>();

            foreach(Functionality f in functionalities)
            {
                functionalitiesIds.Add(f.Id);
            }

            return functionalitiesIds;
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Create([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Designation = viewModelRole.Designation
                };

                db.Roles.Add(entity);
                db.SaveChanges();
                viewModelRole.Id = entity.Id;
            }

            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Update([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Id = viewModelRole.Id,
                    Designation = viewModelRole.Designation
                };

                db.Roles.Attach(entity);
                db.Entry(entity).State = EntityState.Modified;
                db.SaveChanges();
            }

            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Roles_Destroy([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)
        {
            if (ModelState.IsValid)
            {
                var entity = new Role
                {
                    Id = viewModelRole.Id,
                    Designation = viewModelRole.Designation
                };

                db.Roles.Attach(entity);
                db.Roles.Remove(entity);
                db.SaveChanges();
            }

            return Json(new[] { viewModelRole }.ToDataSourceResult(request, ModelState));
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }

 

and I want to do something like

.Value("#=Functionalities#")

Is it possible ? Did I miss something ?

 

Thank for your help !

[Hristo Valyavicharski]

Hi,

You can use TagTemplate. For more details please look here: Kendo MultiSelect Templates

Regards,
Hristo Valyavicharski
Telerik

[Adrien]

Hi,

 

TagTemplate helps me to create design of selected roles, am I wrong ?

I want to select value by default into my client detail template.

 

Regards,

[Adrien]

Hi,
I try to do something with the dataSource. I Try to bind a list of items preselected into my controller but it does not work because multiSelect don't know that it's select element I think ... Is it possible to declare it somewhere ? My code below
@(Html.Kendo().MultiSelect()
        .Name("Fonctionnalities_#=Id#")
        .Placeholder("Choisissez les fonctionnalitées")
        .AutoClose(false)
        .DataSource(source =>
        {
            source.Read(read =>
            {
            read.Action("GetFunctionalitiesOfRole", "Role");
            })
            .ServerFiltering(true);
        })
        .ToClientTemplate()
    )
and the controller
public ActionResult GetFunctionalitiesOfRole(int roleId)
        {
            List<DropDownListItem> d = new List<DropDownListItem>();
            Role role = db.Roles.Include(r => r.Functionalities).Where(r=> r.Id ==roleId).FirstOrDefault();
            if(role != null)
            {
                foreach (Functionality f in db.Functionalities.ToList())
                {
                    d.Add(new DropDownListItem() { Text = f.Code, Value = f.Id.ToString(), Selected = true });
                }
                return Json(d, JsonRequestBehavior.AllowGet);
            }
            else
            {
                // Error : no role find
                return Json("");
            }           
        }

Thank for your answers

[Adrien]

I didn't set "selected" attribute to "true" when the functionality is link to the role in this example.

[Adrien]

I didn't set the "selected" attribute to "true" when the functionality is linked to the role into this example.