ajax master details with a combobox and a datagrid

[issam]

Hi,

a im looking for some idea on how to setup this (just for the example) :
 - combobox bound to a customers list
-  and a grid bound to the orders list of the selected customer from the combox .

when the user change the customers combobox, a busy indicator is displayed over the grid before displaying the orders

please give me some directions on how to do this .

thanks and good day .

[Sellappandi Ramu]

Hi Issam,

Thanks for using Syncfusion products.

We have analyzed your requirement for “Grid render based on customer selected in combobox” and created a sample. The sample can be downloaded from following link:

Sample: http://www.syncfusion.com/downloads/support/directtrac/118393/MVCGrid-1279106567.zip

In the provided sample we have used EJDropDown Change event to render the grid record based on customer selected. We have used Ajax post to get the related data from controller then render the grid. Please refer the following code snippet.

[Index]

       @Html.EJ().DropDownList("select").TargetID("customerList").Width("200px").SelectedItemIndex(0).ClientSideEvents(e => e.Change("getColumns"))

    </div>

    <div id="customerList">

        <ul>

            <li>ALL</li>

            <li>VINET</li>

            <li>TOMSP</li>

            <li>HANAR</li>

            <li>VICTE</li>

            <li>RICSU</li>

            <li>HILAA</li>

        </ul>

    </div>

</div>

<div>

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

    .Datasource(((IEnumerable<object>)ViewBag.datasource1))

    .AllowPaging()

    .Columns(col =>

                {

                    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();

                                      col.Field("CustomerID").HeaderText("Customer ID").Add();

                    col.Field("EmployeeID").HeaderText("Employee ID").Add();

                    col.Field("Freight").Format("{0:c}").Add();                   

                    col.Field("ShipCity").HeaderText("Ship City").Add();

                }))

    )

</div>

<script>

    function getColumns(args) {

        var dropdownValue = $("#select").ejDropDownList("getSelectedValue");

            $.ajax({

                url: '/Home/DataSource',

                type: 'GET',

                data: { "value": dropdownValue },

                success: function (data1) {

                    $("#Grid").ejGrid({ dataSource: data1 });

                }

            })

    }

</script>

[Controller]

public ActionResult DataSource(string value)

        {

            var userTemplates = OrderRepository.GetAllRecords();

            if (value != "ALL")

            {

                IEnumerable<EditableOrder> res = from d in userTemplates where d.CustomerID == value select d;

                return Json(res, JsonRequestBehavior.AllowGet);

            }

            else

            {

                IEnumerable<EditableOrder> res1 = from d in userTemplates select d;

                return Json(res1, JsonRequestBehavior.AllowGet);

            }

       }

Please try the above sample and get back to us if you have any queries.

Regards,

Sellappandi R

[issam]

Many many thanks ,

i was able to adapt your example to my needs :).

just to note :
- the solution you provided didn't compile (many errors)
- i have changes the return type of the DataSource method in the controller to JsonResult to get things working


now just tunning :

Query 1
how to load grid data at the first time, after droplist initialization ?


Query 2
how to display a busy indicator while data loading .
 i would add a div contining some indicator, and use jquery to switch some css properties  On/Off on the dropdownlist change event and the ajax success function .
sound good to you ? or mabe there is an easier way to do that ?

[Balaji Marimuthu]

Hi Issam,

We are sorry about the inconvenience caused.  Please find the attached sample and code snippet.

Sample: MVCGrid.zip

Query:#1  how to load grid data at the first time, after droplist initialization ?

Your requirement is achieved by using the create event in the Dropdownlist. The create event will call after the dropdownlist initialized and we have loaded the grid data after dropdownlist initialized. Please find the below code snippet.

function create(args) {

        var value = $("#select").ejDropDownList("getSelectedValue");

        $.ajax({

            url: '/Grid/DataSource',

            type: 'GET',

            data: { "value": value },

            success: function (data1) {

                $("#Grid").ejGrid({ dataSource: data1 });

            }

        })

    }

Query:#2  how to display a busy indicator while data loading. i would add a div contining some indicator, and use jquery to switch some css properties  On/Off on the dropdownlist change event and the ajax success function. sound good to you ? or mabe there is an easier way to do that ?

We suggest you to use the ejWaitingPopup control to display the busy indicator over the grid while loading the data, and  the waitingpopup is hide after data bound to the Grid.

@Html.EJ().DropDownList("select").TargetID("customerList").Width("200px").SelectedItemIndex(0).ClientSideEvents(e => e.Change("getColumns"))

<script>

    function getColumns(args) {

        var dropdownValue = $("#select").ejDropDownList("getSelectedValue");

        $("#Grid").ejWaitingPopup("show");

        $.ajax({

            url: '/Grid/DataSource',

            type: 'GET',

            data: { "value": dropdownValue },

            success: function (data1) {

                $("#Grid").ejGrid({ dataSource: data1 });

                $("#Grid").ejWaitingPopup("hide");

            }

        })

      

    }

</script>

Please let us know if you need any further details regarding this issue and let us know if you have any queries.

Please refer the online documentation to use the waitingpopup:

http://help.syncfusion.com/ug/js/default.htm#!documents/conceptsandfeatures58.htm

Regards,

Balaji Marimuthu

[issam]

worked for me ,
thanks a lot !

[Prasanna Kumar Viswanathan]

Hi Issam,

Thanks for the update,

Regards

Prasanna Kumar N.S.V