databinding with additional parameter depending on dropdown value

[SP]

Hello Syncfusion team,

I have an ejGrid (12.1.0.24) with remote data binding.

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

               // .Datasource(ds => ds.URL("Controller/Action").Adaptor(AdaptorType.UrlAdaptor))                     

                .AllowPaging()

                .Columns(col =>

                {})

I want to pass additional parameter depending on dropdown value, so I write 

 $(document).ready(function () {

        var dataManager = ej.DataManager({

            url: "Dashboard/Patients_Read",

            adaptor: new ej.UrlAdaptor()                --(I tried also "UrlAdaptor")

        });

        $("#patientsGrid").ejGrid({

            dataSource: dataManager,           

            query: new ej.Query().addParams("selecedYear", "2014")  //extra parameter

        });

    })

I am planning on doing this also onChange event of the dropdown.

and I get errors 

Uncaught TypeError: Cannot read property 'items' of undefined

Uncaught TypeError: Cannot read property 'find' of null

or if I add only query  like so

$("#patientsGrid").ejGrid({           

    query: new ej.Query().addParams("selecedYear", "2014")  //extra parameter

});

and open the 

 .Datasource(ds => ds.URL("Controller/Action").Adaptor(AdaptorType.UrlAdaptor))              

In the controller I receive Syncfusion.JavaScript.DataManager object with nulls and 0s.

 

[Gowthami V]

Hi Shane,

Thanks for using Syncfusion products.

Query 1: I am planning on doing this also onChange event of the dropdown.

We have analyzed your issue and we are unable to reproduce the reported issue.

We have created a sample based on your requirement and the same can be downloaded from the following link.

Sample Link: SampleDemo.zip

In the above sample we have passed the extra parameter to the grid using addParams property in Change event of the dropdown list as follows.

@Html.EJ().DropDownList("selectCar").TargetID("carsList").(ClientSideEvents(e => e.Change("change"))

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

. . . .

)

<script type="text/javascript">

  

    function change(args) {

        if (args.itemId == 1) {

        

       var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" });

                $("#Grid").ejGrid({

                    dataSource: data,

                    query: new ej.Query().addParams("employeeID", 4)

                });

          

        }

}

    </script>      

Query 2: if I add only query  like so

We have analyzed the issue and we suggest you to pass the query in ActionBegin clientside event of the grid for passing the extra parameter at initial load of the grid as follows.

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

.Datasource(d => d.URL("/Home/Event").Adaptor(AdaptorType.UrlAdaptor))

. . . .

.ClientSideEvents(eve => { eve.ActionBegin("begin");})

)

<script type="text/javascript">

    function begin(args)

    {

        this.model.query.addParams("employeeID", 4);

    }

  </script>

Please refer the below screenshot for more clarification.

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.

[SP]

Hi Gowthami,

Thanks for the sample it works yeah, unfortunately not in my code. 

at first select, everything goes ok, but then it gives the following:

Uncaught DataManager - executeLocal() : Json data is required to execute

Error: DataManager - executeLocal() : Json data is required to execute

    at u (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:70811)

    at Object.t.DataManager.executeLocal (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:22866)

    at Object.t.widget._ensureDataSource (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1522982)

    at Object.t.gridFeatures.common._processBindings (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1290340)

    at Object.t.gridFeatures.common.refreshContent (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1272306)

    at Object.t.gridFeatures.common._refreshDataSource (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1274473)

    at Object.t.gridFeatures.common._setModel (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1344744)

    at Object.t.widgetBase.setModel (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:10499)

    at t.widget.n.fn.(anonymous function) [as ejGrid] (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:14878)

    at Object.change (http://localhost:5424/:278:20)

this is my grid

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

                .AllowPaging()

                .Columns(col =>

                {

                    col.Field("Id").Visible(false).Add();

                   ....  

                })

            )

dropdown

@(Html.EJ().DropDownList("SelectedYear").Datasource((IEnumerable<IdName>)ViewBag.Years).SelectedItemIndex(0)

            .DropDownListFields(df => df.ID("Id").Text("Name").Value("Name")).ClientSideEvents(e=>e.Change("change")))

function change(args) {      

        var data = ej.DataManager({ url: "/Dashboard/Patients_Read", adaptor: "UrlAdaptor" });

        $("#patientsGrid").ejGrid({

            dataSource: data,

            query: new ej.Query().addParams("selectedYear", 2015)  //args.value

        });

 }

when I add 

.Datasource(ds => ds.URL("Controller/Action").Adaptor(AdaptorType.UrlAdaptor)).ClientSideEvents(eve => { eve.ActionBegin("begin");}) 
 function begin() {
        this.model.query.addParams("selectedYear", 2014);
    }

on dropdown change I get 

Uncaught ej.Query: Custom Param is conflicting other request arguments

Error: ej.Query: Custom Param is conflicting other request arguments

    at u (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:70811)

    at Object.t.UrlAdaptor.extend.processQuery (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:35092)

    at Object.t.DataManager.executeQuery (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:22352)

    at Object.t.gridFeatures.common._processBindings (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1290797)

    at Object.t.gridFeatures.common.refreshContent (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1272306)

    at Object.t.gridFeatures.common._refreshDataSource (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1274473)

    at Object.t.gridFeatures.common._setModel (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:1344744)

    at Object.t.widgetBase.setModel (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:10499)

    at t.widget.n.fn.(anonymous function) [as ejGrid] (http://localhost:5424/bundles/ej?v=m1kaEGu92MV_PbewRIjPT42ZqaxdcbSsBxjHAOmVhVA1:33:14878)

    at Object.change (http://localhost:5424/:275:28)

I don't know which  direction to go.

Regards

[Gowthami V]

Hi Weber,

Thanks for your update.

We have analyzed your requirement and we suspect that you have passed the extra parameter to another grid (parentsGrid) instead of defined grid (Grid). And also you have not defined the dataSource to the grid at initial load .

Please refer the below code snippet that you provided in the previous response.

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

  )

function change(args) {    

  $("#patientsGrid").ejGrid({

});

 }

We have analyzed your query and we suspect that you want to load the grid dataSource based on the value selected in the dropdownlist (initially 0 th index). For that we have used the Query property of the grid for passing the extra parameter to the serverside using addParams property of the Query as follows.

Please refer the below code snippet.

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

           .Datasource(ds => ds.URL("/Home/Event").Adaptor(AdaptorType.UrlAdaptor))

            .Query("ej.Query().addParams('EmployeeID','1')")

)

In the above snippet we have passed “1” as an extra parameter to the grid at initial load of the grid.

And also we suspect that you want to change the datasource of the grid based on the selected value from the dropdownlist. For that we have passed the selected value as an extra parameter to the serverside in change event of the dropdownlist.

Please refer the below code snippet.

function change(args) {

        $("#Grid").ejGrid({

                    dataSource: data,

                    query: new ej.Query().addParams("employeeID",obj.selectedTextValue)

                });}

For your convenience we have created a sample and the same can be downloaded from the below link.

Sample Link: addparamsissue.zip

And also you have passed the query in both Change event and ActionBegin event and so the Key passed in the query was conflicted with each other. So that only the reported error occurred in the second query.

If we misunderstood your requirement please provide following details to reproduce the issue.

1.     Please share in which scenario you want to pass the extra parameter to the serverside while changing the dropdown value.

2.     Please confirm your product version whether you are using 12.1.0.43 or 12.4.0.24. Because you have mentioned the version as 12.1.0.24 which is not available.

3.     And also please provide us full code snippet that you are used for rendering a grid control and events that you are used in your application or please reproduce the reported issue in the attached sample.

Please get back to us with requested details if you have any concern. The provided information will help us to analyze the issue and provide you the response as early as possible.

Regards,

Gowthami V.