How update datasource dynamically in column's foreign key?

[Juan Cruz]

Hi. I have a tab with 3 grid control

This is mi code:

Tab

@{

    ViewBag.Title = "Index";

}

<h2>Tab</h2>

@(Html.EJ().Tab("Musica")

           .HeightAdjustMode(HeightAdjustMode.Content)

           .ClientSideEvents(e=>e.BeforeActive("before"))

           .Items(data =>

           {

               data.Add().ID("Albums").Text("Albums").ContentTemplate(@<div>@{Html.RenderPartial("Album");}</div>);

                   data.Add().ID("Artistas").Text("Artistas").ContentTemplate(@<div>@{Html.RenderPartial("Artista");}</div>);

                       data.Add().ID("Generos").Text("Generos").ContentTemplate(@<div>@{Html.RenderPartial("Genero");}</div>);

                }))

Grid 1

@(Html.EJ().Grid<object>("AlbumGrid")

            .Datasource(dataSource => dataSource.URL(Url.Action("DataAlbum", "Tab", null, Request.Url.Scheme))

                .UpdateURL(Url.Action("UpdateAlbum", "Tab", null, Request.Url.Scheme))

                .InsertURL(Url.Action("InsertAlbum", "Tab", null, Request.Url.Scheme))

                .RemoveURL(Url.Action("RemoveAlbum", "Tab", null, Request.Url.Scheme))

                .Adaptor(AdaptorType.UrlAdaptor))

            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom).EditMode(EditMode.ExternalForm); })

            .Locale("es-MX")

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(item =>

                {

                    item.AddTool(ToolBarItems.Add);

                    item.AddTool(ToolBarItems.Cancel);

                    item.AddTool(ToolBarItems.Delete);

                    item.AddTool(ToolBarItems.Edit);

                    item.AddTool(ToolBarItems.Update);

                });

            })

            .AllowPaging()

            .AllowReordering()

            .IsResponsive()

            .PageSettings(p => { p.PageSize(5); })

            .AllowResizeToFit()

            .AllowSorting()

            .Columns(columns =>

            {

                columns.Field("AlbumId").HeaderText("Album ID").IsPrimaryKey(true).IsIdentity(true).Add();

                columns.Field("Titulo").ValidationRules(v => v.AddRule("required", true).AddRule("messages", "{required:'requeridos'}")).Add();

                columns.Field("ArtistaId").HeaderText("Artista").ForeignKeyField("ArtistaId").ForeignKeyValue("Nombre").DataSource((IEnumerable<object>)ViewBag.DataSourceArtista).ValidationRules(v => v.AddRule("required", true)).Add();

                columns.Field("GeneroId").HeaderText("Genero").ForeignKeyField("GeneroId").ForeignKeyValue("Nombre").DataSource((IEnumerable<object>)ViewBag.DataSourceGenero).ValidationRules(v => v.AddRule("required", true)).Add();

                columns.Field("Precio").Format("{0:C2}").EditType(EditingType.NumericEdit).ValidationRules(v => v.AddRule("required", true)).Add();

                columns.Field("AlbumArtURL").Add();

            })

            .ClientSideEvents(e => { e.ActionComplete("complete").ActionBegin("begin").EndEdit("endEdit").EndAdd("endAdd").ActionFailure("fail"); })

)

<script type="text/javascript">

    function begin(args) {

        if (args.requestType == "save") {

            this.element.ejWaitingPopup("show");

            

        }

        //this.refreshContent();       

            

    }

    function endEdit(args) {

        this.element.ejWaitingPopup("hide");

    }

    function endAdd(args) {

        this.element.ejWaitingPopup("hide");

    }

    function complete(args) {

        if (args.requestType == "cancel")

            this.element.ejWaitingPopup("hide");

        if (args.requestType == "save")

            this.refreshContent();

    }

    function fail(args) {

        this.cancelEdit();

        alert("Servicio no disponible");

    }

</script>

(The other two are in the attachments)

When I insert or update in the second and the third grid (I use the two datasources of these grids in the first as datasources in foreignKey in two columns - using ViewBag-) I would like that when I insert or update in the first grid, the options to choose are updated.

Can you help me please?

Thank you

Attachment: Consulta_6ffd493b.rar

[Vignesh Natarajan]

Hi Juan, 

Thanks for using Syncfusion products. 

According to your requirement, you need to update the Tab1 Grid column dataSource based Tab2 and tab3 Grids. We have achieved your requirement by sending AJAX post to server to retrieve data from server and bind the data using partial view. 

We have modified your code to update the tab 1 Grid. refer the below code snippet 

@(Html.EJ().Tab("Musica") 

           .HeightAdjustMode(HeightAdjustMode.Content) 

           .ClientSideEvents(e => e.BeforeActive("before")) 

           .Items(data => 

           { 

           data.Add().ID("Albums").Text("Albums").ContentTemplate(@<div id="Album"></div>);   //  Render the tab with div element   

               data.Add().ID("Artistas").Text("Artistas").ContentTemplate(@<div id="Artsista"></div>); 

           data.Add().ID("Generos").Text("Generos").ContentTemplate(@<div id="Genero"></div>); 

           })) 

 

 

          

 

<script type="text/javascript"> 

    var genData, ArtData,URL; 

    $("#Musica").ejTab({ 

        create: function () {    // bind intial Grid (tab1) using create for first time alone  

            $.ajax({ 

                url: "/Home/GetAlbum", 

                success: function (doc) { 

                    $("#Album").html(doc); 

                } 

            }); 

        }, 

        itemActive: function (args) { 

            if (args.activeIndex == 0) {  // based on activeIndex set the url and ID 

                URL = "/Home/GetAlbum"; 

                ID = "Album"; 

            } 

            if (args.activeIndex == 1) { 

                URL = "/Home/GetArts"; 

                ID = "Artsista";               

            } 

            if (args.activeIndex == 2) { 

                URL = "/Home/GetGenes"; 

                ID = "Genero";                 

            } 

            $.ajax({ 

                url: URL, 

                success: function (doc) { 

                    $("#" + ID).html(doc);            // render Grid using partial view method         

                } 

            });             

        } 

        }); 

</script> 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/138254/ze/1634-1898644670.zip  

Refer the below help documentation for your reference 

https://help.syncfusion.com/api/js/ejtab#events:itemactive  

https://help.syncfusion.com/aspnetmvc/grid/how-to#work-with-partial-views  

  

Regards, 

Vignesh Natarajan 

[Juan Cruz]

I have reviewed the code sent to me, made the necessary changes and solved my problem.

I thank you very much for your help

[Vignesh Natarajan]

Hi Juan, 

Thanks for the update. 

We are happy to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan