load a grid depending on the click of a dropdown list

1 posts, 0 answers
  1. lola
    lola avatar
    1 posts
    Member since:
    May 2016

    Posted 03 May Link to this post

    Hi,

    i am new at developping in ASP.net using Kendo UI.

    I have two grid and i want to load one of them depending on the choice of the dropdown list.

    i mean, if the user choose Externe in the dropdown list, the grid with the externalentrepriseviewmodel should be loaded. Else the grid with the internalentrepriseviewmodel should be loaded.

    Don't know how to do it. Please help me.

    here is my view code:

     

    001.@model DGBFIP.SDP.ViewModel.Areas.Repository.Entreprise.EntrepriseViewModel
    002.@using DGBFIP.SDP.ViewModel.Areas.Repository.Entreprise
    003.@{
    004.    
    005.    Layout = "~/Views/Shared/_Layout.cshtml";
    006.}
    007. 
    008. 
    009.@Html.HiddenFor(model => model.Id)
    010.@Html.HiddenFor(model => model.CurrentUserId)
    011. 
    012.@Html.LabelFor(model => model.type)
    013.@Html.Kendo().DropDownListFor(model => model.type).DataTextField("Text").DataValueField("Value").DataSource(source =>
    014.{
    015.    source.Read(read =>
    016.    {
    017.        read.Action("GetType", "Enterprise", new { area = "Repository" });
    018.    });
    019. 
    020.}).HtmlAttributes(new { style = "width: 75%" }).OptionLabel("Choisissez le type d'entreprise")
    021. 
    022.@(Html.Kendo().Grid<ExternalEntrepriseViewModel>()
    023.        .Name("grid")
    024.        .AutoBind(false)
    025.        .Columns(columns =>
    026.        {
    027.            columns.Bound(c => c.Id).Visible(false).Hidden(true);
    028.            columns.Bound(c => c.CurrentUserId).Visible(false).Hidden(true);
    029.            columns.Bound(c => c.type);
    030.            columns.Bound(c => c.Name);
    031.            columns.Bound(c => c.telephone);
    032.            columns.Bound(c => c.fax);
    033.            columns.Bound(c => c.email);
    034.            columns.Bound(c => c.continent);
    035.            columns.Bound(c => c.pays);
    036.            columns.Bound(c => c.address);
    037.            columns.Command(command => { command.Edit().Text("Modifier").UpdateText("Enregistrer").CancelText("Annuler"); command.Destroy().Text("Supprimer"); }).Width(250);
    038.        })
    039. 
    040.             .ToolBar(toolbar => toolbar.Create().Text("Ajouter une entreprise externe")) @*Ajout du bouton ajouter un type de financement*@
    041. 
    042..Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_entrepriseexterne").Window(x => x.Title("Editer .....")))
    043.            .Scrollable()
    044.            .Sortable()
    045.            .Filterable(x => x.Mode(GridFilterMode.Row))
    046.            .Pageable(pageable => pageable
    047.                .Refresh(true)
    048.                .PageSizes(true)
    049.                .ButtonCount(5))
    050.            .DataSource(dataSource => dataSource
    051.                .Ajax()
    052.                .Model(model => model.Id(p => p.Id))
    053.                   .Read(read => read.Action("GetAll", "Enterprise", new { area = "Repository" }).Data("AdditionalData"))
    054.                   .Create(create => create.Action("Create", "Enterprise", new { area = "Repository" }))
    055.                       .Destroy(delete => delete.Action("Destroy", "Enterprise", new { area = "Repository" }))
    056.                       .Update(update => update.Action("Update", "Enterprise", new { area = "Repository" }))
    057. 
    058.                .PageSize(20)
    059.            )
    060.)
    061. 
    062.@(Html.Kendo().Grid<InternalEntrepriseViewModel>()
    063.        .Name("grid2")
    064.        .AutoBind(false)
    065.        .Columns(columns =>
    066.        {
    067.            columns.Bound(c => c.Id).Visible(false).Hidden(true);
    068.            columns.Bound(c => c.CurrentUserId).Visible(false).Hidden(true);
    069.            columns.Bound(c => c.type);
    070.            columns.Bound(c => c.Name);
    071.            columns.Bound(c => c.telephone);
    072.            columns.Bound(c => c.fax);
    073.            columns.Bound(c => c.email);
    074.            columns.Bound(c => c.province);
    075.            columns.Bound(c => c.address);
    076.            columns.Bound(c => c.rccm);
    077.            columns.Bound(c => c.statistic);
    078.            columns.Command(command => { command.Edit().Text("Modifier").UpdateText("Enregistrer").CancelText("Annuler"); command.Destroy().Text("Supprimer"); }).Width(250);
    079. 
    080.        })
    081. 
    082.             .ToolBar(toolbar => toolbar.Create().Text("Ajouter une entreprise locale")) @*Ajout du bouton ajouter un type de financement*@
    083. 
    084..Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_entrepriselocale").Window(x => x.Title("Editer .....")))
    085.                .Scrollable()
    086.                .Sortable()
    087.                .Filterable(x => x.Mode(GridFilterMode.Row))
    088.                .Pageable(pageable => pageable
    089.                    .Refresh(true)
    090.                    .PageSizes(true)
    091.                    .ButtonCount(5))
    092.                .DataSource(dataSource => dataSource
    093.                    .Ajax()
    094.                    .Model(model => model.Id(p => p.Id))
    095.                       .Read(read => read.Action("GetAll", "Enterprise", new { area = "Repository" }))
    096.                       .Create(create => create.Action("Create", "Enterprise", new { area = "Repository" }))
    097.                           .Destroy(delete => delete.Action("Destroy", "Enterprise", new { area = "Repository" }))
    098.                           .Update(update => update.Action("Update", "Enterprise", new { area = "Repository" }))
    099. 
    100.                    .PageSize(20)
    101.                )
    102.)
    103.<style>
    104.   #grid {
    105.        display: none;
    106.    }
    107.   #grid2 {
    108.        display: none;
    109.    }
    110.</style>

Back to Top