We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ajax master details with a combobox and a datagrid

Thread ID:

Created:

Updated:

Platform:

Replies:

118393 Mar 4,2015 07:29 PM UTC Mar 17,2015 12:42 PM UTC ASP.NET MVC 5
loading
Tags: Grid
issam
Asked On March 4, 2015 07:29 PM UTC

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 [Syncfusion]
Replied On March 5, 2015 01:24 PM UTC

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
Replied On March 9, 2015 03:23 PM UTC

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 [Syncfusion]
Replied On March 10, 2015 12:56 PM UTC

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
Replied On March 16, 2015 03:49 PM UTC

worked for me ,
thanks a lot !

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 17, 2015 12:42 PM UTC

Hi Issam,

Thanks for the update,

Regards

Prasanna Kumar N.S.V

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;