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.
Unfortunately, activation email could not send to your email. Please try again.

databinding with additional parameter depending on dropdown value

Thread ID:

Created:

Updated:

Platform:

Replies:

118050 Jan 25,2015 07:32 AM Jan 29,2015 11:58 AM ASP.NET MVC 3
loading
Tags: Grid
SP
Asked On January 25, 2015 07:32 AM

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 [Syncfusion]
Replied On January 27, 2015 08:04 AM

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
Replied On January 28, 2015 04:08 AM

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 [Syncfusion]
Replied On January 29, 2015 11:58 AM

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.




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.

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.

;