DataManager/ejGrid without specifying resource path in DataManager

[Sebastian Schocke]

I have been trying to use a global DataManager instance to link to an OData service, and then have each of the grids specify the resource path component, instead of creating a DataManager instance for each grid with the resource path already given. Is this possible?

I have seen this example given:

var dm = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/");
var query = ej.Query()
.from("Orders")
.select("OrderID","CustomerID","OrderDate","Employee.FirstName")
.page(1, 10)
.expand("Employee");
var promise = dm.executeQuery(query);
promise.done(function (e) {
    $('#Grid').ejGrid({dataSource: e.result});
}

But how does this bind to the remote source? If I now have a user that performs a search on this grid, I will have to create a new Query again, instead of using the built in functionality of the Grid, correct?

I was hoping something like this is possible, where the Grid still builds the OData URI.

var dm = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/");
$('#Grid').ejGrid({dataSource: dm, from:"Orders"});

If this is not possible, it's not an issue. It would just seem a cleaner approach to me.

[Gowthami V]

Hi Sebastian

We have analyzed the query that you have mentioned in the previous post. We have created a sample based on your requirement and the same can be downloaded from the following link:

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/CRUD1493267197.zip

In the above sample we have rendered two grids with separate data source, One grid with “Orders” table and the other grid with “Customers” table by passing the separate query for each grid using “query” property of the grid.

Please refer the below code snippet:

<script type="text/javascript">

 $(function () {

            var dataManger = ej.DataManager({

                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

            });

                var queryOrders = ej.Query().from("Orders").select("OrderID", "CustomerID", "OrderDate", "Employee.FirstName").expand("Employee");

                var queryCustomer = ej.Query().from("Customers").select("CustomerID", "CompanyName", "ContactName");

          

                $("#GridOrders").ejGrid({

              

                dataSource: dataManger,

                query: queryOrders

});

  $("#GridCustomer").ejGrid({

 

                dataSource: dataManger,

                query: queryCustomer

  });

        });

    </script>

Please try the above sample and please get back to us if we misunderstood your requirement.

Regards,

Gowthami V.

 

[Sebastian Schocke]

Thank you very much for the prompt response. The query parameter to ejGrid is exactly what I was looking for.

[Sebastian Schocke]

BTW, I just went to double check if I missed it, but it is not a documented option for ejGrid in the JavaScript class reference. Maybe it should be added? It is a very useful option

[Gowthami V]

Hi Sabastian

Thanks for your update.

As you suggested in the previous response we will add the “query” option of the ejGrid to javascript class reference document.

Please get back to us if you have any queries we will happy to assist you.

Regards,

Gowthami V.

 

[Luiz Frederico Jr]

Hi Sebastian

We have analyzed the query that you have mentioned in the previous post. We have created a sample based on your requirement and the same can be downloaded from the following link:

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/CRUD1493267197.zip

In the above sample we have rendered two grids with separate data source, One grid with “Orders” table and the other grid with “Customers” table by passing the separate query for each grid using “query” property of the grid.

Please refer the below code snippet:

<script type="text/javascript">

 $(function () {

            var dataManger = ej.DataManager({

                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"

            });

                var queryOrders = ej.Query().from("Orders").select("OrderID", "CustomerID", "OrderDate", "Employee.FirstName").expand("Employee");

                var queryCustomer = ej.Query().from("Customers").select("CustomerID", "CompanyName", "ContactName");

          

                $("#GridOrders").ejGrid({

              

                dataSource: dataManger,

                query: queryOrders

});

  $("#GridCustomer").ejGrid({

 

                dataSource: dataManger,

                query: queryCustomer

  });

        });

    </script>

Please try the above sample and please get back to us if we misunderstood your requirement.

Regards,

Gowthami V.

 

I am testing your sample Grid Master-Detail in MVC and when select an row in Grid<EmployeeView>("MasterGrid") this trigger the javascript ej.DataManager who use window.gridData...

How could i use the ViewBag.datasource2 to make this sample real live ???

Refrasing, i need replace the window.gridData on javascript by the ViewBag.datasource ok?

<script src="~/Scripts/jsondata.min.js"></script>
<script type="text/javascript">
    $(function () {
        window.rowSelected = function (args) {
            var juserID = args.data.UserId;
            var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where("UserId", ej.FilterOperators.equal, juserID, false).take(100));
            var gridObj = $("#DetailGrid").ejGrid("instance");
            gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));
        }
    });
</script>

[Gowthami V]

Hi Luiz,
We can access the variable defined in the controller in client side using “@Html.Raw” as follows,

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

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

. . . .

)

<script type="text/javascript">

     $(function () {

      

            window.rowSelected = function (args) {

//Access the variable from the controller

                var data =  @Html.Raw(Json.Encode(ViewBag.dataSource2));

                var employeeID = args.data.EmployeeID;

                var detaildata = ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10));

                var gridObj = $("#DetailGrid").ejGrid("instance");

                gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));

            }

        });

    </script>
   

Refer to the below screenshot,



For your reference we have attached the sample below,

http://www.syncfusion.com/downloads/support/directtrac/general/MVCAPP~2-2048912920.ZIP

Regards,

Gowthami V.