Drop down list view and ClientSideEvents

[sateesh kumar]

Hi Team,

After 2 years back am back to MVC. am working on CRUD task.

Based on drop down value, need to show the grid. am not using view bags or view data.

using model data tables, am assign to drop down and grid respectively.

now am facing two issue. 

1. Drop down list is not good in looks. i shared screen shot also.

2. share any drop down events changes effect  in ej grid.

Note: Currently am using synfusion.EJ as 15.1460.0.33 of  v4.0.30319.

  am trying to filter the data in client side. i dont want to go server side once again.

thats why, am fetching all required data once. through java/ajax i want filter the data in view.

 

let me know, if my approach is wrong. am using small data (150-500 records in grid).

Thanks for advance.

Attachment: DropDownList_20190107_395fcb4e.7z

[Prince Oliver]

Hi Sateesh, 

Thank you for contacting Syncfusion support. 

 

Query 1: Drop down list is not good in looks. i shared screen shot also. 

 

From the attached screenshot, we could see that you have used the material themed DropDownList. We could not get the issue, so can you please provide additional information regarding this. Also, can you please explain what is the issue you were referring to in the screenshot?   

 

Query 2: share any drop down events changes effect  in ej grid. 

 

As per the shared code, we can use the change event in the DropDownList control to affect it in the Grid control. 

 

Query 3: if my approach is wrong. am using small data (150-500 records in grid).  

  

From your query we understand that you need to fetch the data from the server and perform the actions like filtering, sorting in the client side. In EJ1 Grid we have support called offline. Using this concept all data from remote service / server side can be fetched all at once and actions can be performed in the client side using cached data by enabling offline property of DataManager. And also in the dropdown change event you can filter the column using filterColumn method of ejGrid.  

  

Refer the below code example  

  

// Grid rendering code  

  

@(Html.EJ().Grid<object>("dropDown").Datasource(datasource => datasource.URL("/CCM/JobParameters").Offline(true)) // in place of url you can bind the server side method name  

                                            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })  

                                         .AllowSorting().AllowPaging().PageSettings(page => page.PageSize(15)).IsResponsive()  

                                                 .ToolbarSettings(toolbar =>  

                                                 {  

                                                     toolbar.ShowToolbar().ToolbarItems(items =>  

                                                     {  

                                                         items.AddTool(ToolBarItems.Add);  

                                                         items.AddTool(ToolBarItems.Edit);  

                                                         items.AddTool(ToolBarItems.Delete);  

                                                         items.AddTool(ToolBarItems.Update);  

                                                         items.AddTool(ToolBarItems.Cancel);  

                                                     });  

                                                 .                 .             .             .   

  

                                                 }))  

// dropdown change event  

  

function drpvaluechange(args) {  

        var gridObj = $("#dropDown").ejGrid("data");  

        gridObj.filterColumn("OrderID", "equal", "10248", "and", true);  

    }  

  

Refer our help documentation for your reference   

https://help.syncfusion.com/aspnetmvc/grid/data-binding#load-at-once    

https://help.syncfusion.com/api/js/ejgrid#methods:filtercolumn   

 

Please provide us detailed information on your requirement. It will help us provide a prompt solution at the earliest. 

 

Regards, 

Prince 

[sateesh kumar]

Hi Team/Prince,

Am not aware of  material themed DropDownList . let me know, any files need to share from my side for drop down look format, what ever am facing now.

any how am going forward for next activity , because am not much concentrate on look and feel as of now.

here am mentioning few more issues.

1. am getting error,while creating grid instance. "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'ejGrid'".

2. After commenting the " .ejGrid("instance")", am successfully going to controller method, fetching data to table. still my grid is not loaded .

My goal is , need do the CRUD operations and refresh the grid with new data based on drop down value.

i given below java script and JSON Controller.

Thanks for the advance.

---------- Java Script---------

  function jobChanged(args) {

        debugger;  

       

        var selectedItemId = args.model.dataSource[args.itemId].JobId;     

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

        var query = ej.Query().addParams("jobid", selectedItemId);                      

        var dataManager = ej.DataManager({ url: '@Url.Action("GetGridData", "CCM")', adaptor: new ej.UrlAdaptor() });

        // executing query

        var promise = dataManager.executeQuery(query);

        promise.done(function (e) {

            gridObj.dataSource(e.result); 

        });

       

    }; 

----------- JSON Controller---------

 [HttpPost]

        public JsonResult GetGridData(int jobid)

        {

            var result = string.Empty;         

       

            DataTable dt = Table.Select("JoId=" + jobid, string.Empty, DataViewRowState.CurrentRows).CopyToDataTable();

            result=JsonConvert.SerializeObject(dt, Formatting.Indented);

            return Json(result, JsonRequestBehavior.AllowGet);

        }

[Vignesh Natarajan]

Hi Sateesh, 

 

Thanks for the update. 

 

Query1: “am getting error,while creating grid instance. "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'ejGrid'” 

 

The reported issue may occur when multiple jQuery references are present in the sample. Kindly ensure that you have referred the single jQuery reference in your sample. If you have enabled unobtrusive in your sample, kindly take the instance of grid using below code  

 

var gridObj = $("#Grid").data("ejGrid"); //Grid denotes the grid id 

 

Kindly ensure the above cases to resolve the reported issue. 

 

Query 2: “My goal is , need do the CRUD operations and refresh the grid with new data”. 

 

In the previous update you have mentioned that you need to filter the data in client side, so we have suggested you the Offline property of ejDataManager. But in the latest update you have used UrlAdaptor to bind dataSource to Grid. While using UrlAdaptor, actions like CRUD, filtering, sorting will take place in server side only. Refer the below UG documentation for your reference 

 

URLAdaptor: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor  

 

If you want to perform CRUD actions alone in server side and other actions like filtering, sorting, searching in the client side We suggest you to achieve your requirement using remoteSaveAdoptor of ejGrid. 

 

RemoteSaveAdaptor: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#remotesave-adaptor      

 

https://help.syncfusion.com/aspnetmvc/grid/editing#persisting-data-in-server  

 

Note: While using Adaptor, Grid will be refreshed automatically with new data once CRUD action is performed. 

 

Query 2:  refresh the grid with new data based on drop down value.  

 

From your query, we understand that you need to modify the dataSource of the Grid on dropdown change event. We have achieved your requirement using UrlAdaptor (as per the shared code example). 

 

Please refer the below code example, 

 

<div> 

    @(Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<object>)ViewData["LocalDataSource"]).DropDownListFields(Df => Df.Text("Text").Value("value")).ClientSideEvents(e=>e.Change("jobChanged"))) 

</div> 

<br> 

<div> 

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

        .Datasource(ds => ds.URL("UrlDataSource").UpdateURL("UrlUpdate").InsertURL("UrlInsert").RemoveURL("UrlDelete") 

                           .Adaptor(AdaptorType.UrlAdaptor)). 

                      …………….. 

                              .Columns(col => 

                                                        { 

                                                            ………… 

 

                                                        })) 

</div> 

                  

 

<script> 

      function jobChanged(args) { 

        var selectedItemId = args.model.dataSource[args.itemId].value; 

        var gridObj = $("#paramGrid").ejGrid("instance"); // use the Grid id 

        var query = ej.Query().addParams("jobid", selectedItemId); 

        var dataManager = ej.DataManager({ url: '@Url.Action("GetGridData", "Grid")', adaptor: new ej.UrlAdaptor() }); 

        // executing query 

        var promise = dataManager.executeQuery(query); 

 

        promise.done(function (e) { 

            gridObj.dataSource(e.result); // using datasource method refer the grid data. 

        }); 

 

    }; 

</script>       

 

Server Side 

 

public ActionResult GetGridData(int jobid) 

        { 

            

            var result = OrderRepository.GetAllRecords().Where(e => e.EmployeeID == jobid).ToList(); 

            return Json(result, JsonRequestBehavior.AllowGet); 

        } 

 

   public ActionResult UrlDataSource(DataManager dm) 

        { 

 

             ……….. 

        } 

        public ActionResult UrlUpdate(EditableOrder value) 

        { 

             … 

        } 

        public ActionResult UrlInsert(EditableOrder value) 

        { 

                 ….. 

        } 

        public ActionResult UrlDelete(int key) 

        { 

            ………. 

       } 

 

 

Note: In the attached sample, we have achieved the CRUD action in the server side for remote dataSource. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication40-2453996.zip  

 

If above solution does not resolve your query, please get back to us with more details regarding your requirement. 

 

Regards, 

Vignesh Natarajan. 

 

 

[sateesh kumar]

Hi  vigenesh,

As you posted, am trying to assign the data source to  ej grid through java  script.

am able to get the data from service and  confirmed with help of debugger, function result having arguments in client side java script.

 but while assign to data source, getting error in client side. "0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference"

-----------------------View----------------

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

               .Datasource(ds => ds.URL("/Home/GetData").UpdateURL("/Home/Update")

                           .InsertURL("/Home/Insert").RemoveURL("/Home/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))

            .AllowPaging()

            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

            .AllowSorting().AllowPaging().PageSettings(page => page.PageSize(15)).IsResponsive()

            .ToolbarSettings(toolbar =>

            {

                toolbar.ShowToolbar().ToolbarItems(items =>

                {

                    items.AddTool(ToolBarItems.Add);

                    items.AddTool(ToolBarItems.Edit);

                    items.AddTool(ToolBarItems.Delete);

                    items.AddTool(ToolBarItems.Update);

                    items.AddTool(ToolBarItems.Cancel);

                });

            }).Columns(col =>

            {

                col.Field("Name").HeaderText("Name").IsPrimaryKey(true).TextAlign(TextAlign.Left).Width("8%").Add();

                col.Field("Value").HeaderText("Value").TextAlign(TextAlign.Left).Priority(4).Width("15%").AllowEditing().Add();

                col.Field("LastChangedBy").HeaderText("LastChangedBy").Width("15%").Add();

                col.Field("LastChangedDate").HeaderText("LastChangedDate").TextAlign(TextAlign.Left).Priority(4).Width("15%").Format("{0:dd-MMM-yyyy HH:mm:ss}").Add();

            }))

My java script

---------------------------------

<script>

    function jobChanged(args) {

        debugger;  

        var selectedItemId = args.itemId;

          var gridObj = $("#paramGrid").data("ejGrid"); // use the Grid id

        var query = ej.Query().addParams("jobid", selectedItemId);

        var dataManager = ej.DataManager({ url: '@Url.Action("GetGridData", "Home")', adaptor: new ej.UrlAdaptor() });

        // executing query

        var promise = dataManager.executeQuery(query);

        promise.done(function (e) {

            gridObj.dataSource(e.result); // using datasource method refer the grid data.

        });

    };

</script>

Controller method 

-------------------------------------------

 [HttpPost]

        public ActionResult GetGridData(int jobid)

        {

           DataTable dt= // getting data from repository -- its return data table (having multple columns)

            result=JsonConvert.SerializeObject(dt, Formatting.Indented);

            return Json(result, JsonRequestBehavior.AllowGet);

        }

note : my ej grid having few specified columns only

Also when initial page load, am assign the data source to ej grid with url.(mentioned the view above).

the url action is not going to controller.

Thanks for advance

[Vignesh Natarajan]

Hi Sateesh, 

 

Query 1: Also when initial page load, am assign the data source to ej grid with url.(mentioned the view above). 

the url action is not going to controller. 

 

From the shared code example, we could see that you have used the remoteSaveAdaptor. For remoteSaveAdaptor we have to bind the local dataSource (i.e. we can’t use the URL action to get the data in remoteSaveAdaptor). This is the root cause of the issue. 

 

RemoteSaveAdaptor 

 

The remoteSaveAdaptor is used for binding the local data and performs all DataManager queries in client-side. It interacts with server-side only for CRUD operations to save the changes in server. 

 

UrlAdaptor 

 

UrlAdaptor is used to perform all DataManager Queries and CRUD operations in server-side. 

 

Refer the below code example, 

 

 

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

                              .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate") 

.InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

                    ………… 

                    .ToolbarSettings(toolbar => 

                    { 

                      …………. 

                    }).Columns(col => 

                    { 

                    ……………. 

 

                    })) 

 

</div> 

 

public ActionResult GridFeatures() 

        { 

            ……… 

            var DataSource = OrderRepository.GetAllRecords(); 

            ViewBag.datasource = DataSource; 

            return View(); 

        } 

 

 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication40-306603168.zip  

 

Query : function result having arguments in client side java script. but while assign to data source, getting error in client side. "0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference" 

 

We are unable to reproduce the reported issue at our end.  After referring the above details, Still facing the issue please get back to us with the following details. 

 

1. Share the Layout.cshtml page(i.e. the page where your referred the scripts (jquery,jsrender, css file))
2. Share the Essential studio version.
3. If possible reproduce the reported issue in the provided sample and revert us back.
4. And we suspect that, the reported script error will caused due to Unobtrusive mode. If you used the Unobtrusive, then please share those details.
5. Ensure that you are getting the Grid object while taking the Grid instance (gridObj)

 

Regards, 

Vignesh Natarajan. 

 

[sateesh kumar]

Hi Vignesh,

Thanks for responding to me,

In shared recent example, your are returning viewbag from controller to view. instead of that we can return datatale or json result.

why am raising this, my friends are advising me to dont use view bag/view data. i dont know what are the draw backs of using view bag/data.

as you requested , i am sharing details in the attachments.

thanks for the advance.

Attachment: Grid_20190111_54b09387.7z

[Manivannan Padmanaban]

Hi Sateesh, 

Thanks for update. 

Query: In shared recent example, you are returning viewbag from controller to view. instead of that we can return datatale or json result. 

 

From the above query, we could understand that you want to return the data from the server end then we suggest you to use the UrlAdaptor. In UrlAdaptor for every operations, an AJAX post will be send to the specified data service. 

Refer the below help documentation link, 

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor  

Demo link, 

https://mvc.syncfusion.com/demos/web/grid/urladaptor  

And also from the shared layout page we could see that, you have referenced jquery and ej.web.all.min scripts multiple times. Refer the below screenshot, 

 

Due to multiple script reference the reported issue("0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference") will occur. So, we suggest you to remove the multiple script reference. And also, we could see that you have used different versions of dll reference. Please use the same version dll reference. 

 

Regards, 

Manivannan Padmanaban. 

 

  

[sateesh kumar]

Hi Mani/Team

after changes in layout page aslo getting same issue getting also.

1. am getting error,while creating grid instance. "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'ejGrid'".

2. After commenting the " .ejGrid("instance")", am successfully going to controller method, fetching data to table. still my grid is not loaded .

am trying to load the grid after seclecting drop down with two ways. 

one of the way am able to assign the data to ej grid with out java script.

but when am trying assign the data with java script above mention errors getting.

Find the attached updated layout and controller.

Thanks for the advance.

Attachment: Grid_20190124_58920689.7z

[Vignesh Natarajan]

Hi Sateesh kumar,

Thanks for the update. 

We have created a support incident under your name. Kindly login in to your account for further details. 

https://www.syncfusion.com/account/login  

Regards,
Vignesh Natarajan 

[sateesh kumar]

Hi team,

 thanks for the help and created incident. due to few reasons i cannt login and shared the details.

due to my layout, am not able to create ej grid instance. overloading old ej scripts.

now am able to create ej instance. but crud urls are firing when i click the update in toolbar.

1. I crated action result in controller with having model as parameter for action, still action was not firing.

2. through java sript, passing values crud was done successfully.but my intention is not need java script for crud operations .

public ActionResult Update(ParameterViewModel value)

        {

            return View();

        }

Please find the attachments.

Thanks for the advance.

Attachment: Crud_Operations_20190214_120836e4.7z

[sateesh kumar]

Curreny layout we are using below mentioned scripts,css

@Styles.Render("~/Content/css")

  @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css")

  @Styles.Render("~/Content/themes/base/jquery-ui.min.css")

  @Scripts.Render("~/bundles/modernizr")

  @Scripts.Render("~/Scripts/jquery-3.1.1.min.js")

  @Scripts.Render("~/Scripts/jsrender.min.js")

  @Scripts.Render("~/Scripts/ej/ej.web.all.min.js")

  @Scripts.Render("~/Scripts/ej/ej.unobtrusive.min.js")

  @Scripts.Render("~/Scripts/jquery.validate.js")

  @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")

  @Scripts.Render("~/Scripts/Custom/CustomValidation.js")

  @Scripts.Render("~/Scripts/jQuery-QueryBuilder/js/query-builder.standalone.min.js")

  @Scripts.Render("~/Scripts/bootstrap.min.js")

[Vignesh Natarajan]

Hi Sateesh, 

 

Thanks for update. 

 

Query: “my intention is not need java script for crud operations .” 

 

Before proceeding with your query, we need some additional details regarding your requirement. So kindly share the following details. 

 

1. In you controller page, you have defined multiple Update method. So we get a Ambiguous call error while running your sample.
2. So kindly share the details which update method you want to use in the server side.
3. You have also mention that you are able to access Update method through JavaScript code. (in you shared code example you have called update method in two places ActionComplete event and ToolBarClick event).
4. So kindly share more details regarding the issue you are facing along with the Video demonstration and replication procedure.

 

Requested details will be helpful for us validate the reported issue at our end. 

 

Regards, 

Vignesh Natarajan 

[sateesh kumar]

Hi vignesh,

1,2-   i was also get Ambiguous error. i was commented Update(ParameterViewModel value) . after that am able to execute.

3. my crud working with ActionComlete  event method.

4. due to few reasons i cant not able to share the video, sorry for that.

please find the updated and details.

In without using java sript, am trying call update method with passing mode values.

my model here

 public class ParameterViewModel

    {

        public int? Id { get; set; }

        public int? testId { get; set; }

        public string Name { get; set; }

        public string Value { get; set; }

        public string LastChangedBy { get; set; }

        public DateTime LastChangedDate { get; set; }

    }

Controller

   public ActionResult Update(ParameterViewModel value)

        {

            return View();

        }

view

     @(Html.EJ().Grid<object>("GridParameters")Datasource(datasource => datasource.Json(Model.ParameterList)

                .UpdateURL("/CCM/Update").InsertURL("Insert").RemoveURL("Delete").Adaptor(AdaptorType.RemoteSaveAdaptor))

.ClientSideEvents(evt => evt.ActionComplete("complete"))

Thanks for the advance.

Attachment: Crud_Grid_Operation_15Feb2019_2fa2ba57.7z

[Vignesh Natarajan]

Hi Sateesh, 

 

Thanks for the update. 

 

Query: “ passing values crud was done successfully.but my intention is not need java script for crud operations .” 

 

From your query, we understand that you need to call update method with different parameters without using JavaScript method. It is not possible to achieve your requirement without the JavaScript code. But we have simplified your requirement by passing the additional parameters to server during CRUD operation using ActionBegin event. Refer the below code example 

 

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

                    .Datasource(datasource => datasource.Json(Model.ParameterList) 

                    .UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete") 

                    .Adaptor(AdaptorType.RemoteSaveAdaptor)) 

                    .EditSettings(edit => { edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true); }) 

                    .AllowResizeToFit() 

                    .Query("ej.Query().addParams('x','').addParams('y','')") 

                    .AllowSorting().AllowPaging().PageSettings(page => page.PageSize(20)).IsResponsive() 

                    .ToolbarSettings(toolbar => 

                    { 

                        toolbar.ShowToolbar().ToolbarItems(items => 

                        { 

                            items.AddTool(ToolBarItems.Add); 

                            items.AddTool(ToolBarItems.Edit); 

                            items.AddTool(ToolBarItems.Delete); 

                            items.AddTool(ToolBarItems.Update); 

                            items.AddTool(ToolBarItems.Cancel); 

                        }); 

                    }).Columns(col => 

                    { 

………………………………………………………………….. 

 

                    }).ClientSideEvents(evt => evt.EndEdit("OnToolbarClick").ActionBegin("begin"))) 

 

 

<script type="text/javascript"> 

    function begin(args){ 

        if (args.requestType == "save") { 

            args.model.query._params[0].value = args.rowData.ParameterName; 

            args.model.query._params[1].value = args.rowData.ParameterValue;          

         

        } 

    } 

 

</script> 

 

 

Refer the below screenshot for the output 

 

 

 

 

We have also discussed this topic in our knowledge base document section which can be referred from below link 

 

KB:  https://www.syncfusion.com/kb/8765/how-to-pass-additional-parameter-to-server-side-while-performing-crud-operations     

 

If we misunderstood your query, please get back to us with more details regarding your query. 

 

Regards, 

Vignesh Natarajan