Grid wth drodownlist

[Haneef Puttur]

Hi,

I have a grid with dynamic data source and it works fine fine.

I do have a column in the grid which is of editing type dropdown. I have set the property as follows.

 col.Field(p => p.APPR_RESPONSE).HeaderText("Slot").ValidationRules(v => v.AddRule("required", true)).Priority(1).ForeignKeyField("KeyField").ForeignKeyValue("KeyValue").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.slot).TextAlign(TextAlign.Left).Add();

Now my issue is whenever the data is saved on the grid the grid data is getting refreshed , however drop down data not getting refreshed. Actually the dropdown listbox data also depending on the data I have submitted in the grid.

Can you kindly refer me to any sample code , where i can get fresh data for datasource from dropdown after the grid is gone through batchsave,

Thanks in advance,

Regards

Haneef

[Venkatesh Ayothi Raman]

Hi Haneef, 

Thanks for contacting Syncfusion support. 

We understood from your query, you are binding the data source dynamically for Grid and bind ViewBag datasource for the ForeignKey column. 

While using foreign key column then we will bound the data source for this column based on the ForeignKeyField value. In your case, you have changed the grid data source dynamically but not foreign key data source, hence the foreign key column datasource is not changed. So, whenever we change the data source for grid then we should change the foreign key data source also. 

We have prepared a sample based on your requirement which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/BasicMVCSample_(2)-655715755 

In this sample, we have change the grid and foreign key data source dynamically using button click event. Please refer to the following code example, 

Code example: 

<input type="button" onclick="changeDatasource()" value="ChangeData"/> 

        

@(Html.EJ().Grid<BasicMVCSample.Grid.OrdersView>("ForeignKey") 

         

         . . . 

        .Columns(col => 

        { 

            . . . 

            col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID") 

               .ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.dataSource2) 

               .TextAlign(TextAlign.Left).Width(90).Add(); 

            . . . 

        }) 

         

) 

 

@button click event 

 

function changeDatasource(args) { 

        // here we can change the grid data source dynamically using set model 

        $("#ForeignKey").ejGrid("option", { 

 

            dataSource:@Html.Raw(Json.Encode(@ViewBag.DataSource1)), 

            columns:[ 

                         

                        { field: "EmployeeID",foreignKeyField: "EmployeeID", foreignKeyValue: "LastName", dataSource:@Html.Raw(Json.Encode(@ViewBag.DataSource2)), headerText: "Last Name", width: 75, textAlign: ej.TextAlign.Right, priority: 4 }, 

                         . . . 

 

            ], 

        }) 

    } 

 

 

If we misunderstood your query, then could you please provide more details about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Haneef Puttur]

HI,

 

Regret for the confusion my requirement is as follows.

I have a grid in which one column shows available seats /slots which can be allocated to different members and will change once the grid submitted or refreshed. 

 

 

I have a grid with listbox.

Listbox data should be populated using Json from the controller 

When grid source is refreshed [after batchsave] , the listbox data should also be refreshed from server using JSON. 

Right now issue is when I submit and batchsave grid , the data source of listbox remains old.  It should get the data using json from the server again.

Thanks for your quick support.

[Venkatesh Ayothi Raman]

Hi Haneef, 

Thanks for the update. 

To update the dataSource for Listbox, we suggest you to bind data to it from grid model value. Once you update and save the data, on beginEdit bind the model dataSource for Grid to ListBox. Refer the modified sample here.  

Sample link: http://www.syncfusion.com/downloads/support/forum/129208/ze/BasicMVCSample332778120   

 

If this doesn’t meet your requirement, please share us the sample code or modify the sample based on your application scenario. So that we can help you out better.  

Regards, 

Venkatesh Ayothiraman. 

[Haneef Puttur]

Dear Sir,

Unfortunately i am not able to resolve and also the solution you have sent become more complicated.

This is the requirement:

I want to create a grid which have student details and for each student i want to assign seats for exam. Each slots will have limited number of seats. Once the slots are filled then slot list should become empty.

Initially when i open the grid I am populating the Dropdown source from Viewbag  and this is the code :

######## my Razor Code ###########

@(Html.EJ().Grid<UGApps.Models.ExamGridModel>("LiveUpdate")

 .Datasource(ds => ds.URL("SCH_EXM_Source").BatchURL("AssignExamUpdate").Adaptor("UrlAdaptor"))    

.EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })

.AllowPaging()

.PageSettings(page => { page.PageSize(50); })

.AllowFiltering()

.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.AllowScrolling(true)

.ShowColumnChooser()

.AllowFiltering()

.AllowResizeToFit()

.ToolbarSettings(toolbar =>

{

    toolbar.ShowToolbar().ToolbarItems(items =>

    {

        items.AddTool(ToolBarItems.Search);

        items.AddTool(ToolBarItems.ExcelExport);  

    });

})

.Columns(col =>

{

    col.Field(p => p.Application_Id).HeaderText("ARN").Visible(true).IsPrimaryKey(true).Template("<a target='_blank' rel='nofollow' href=../Apps/appview?arn={{:Application_Id}}>{{:Application_Id}}</a>").TextAlign(TextAlign.Left).Add();

    col.Field(p => p.First_Name).HeaderText("Name").TextAlign(TextAlign.Left).AllowEditing(false).Add();

    col.Field(p => p.APPR_RESPONSE).HeaderText("Slot").ForeignKeyField("KeyField").ForeignKeyValue("KeyValue").EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.slot).Add();//Refreshed upon change in Designation Column 

  

})

                        

 .ClientSideEvents(eve => { eve.ActionBegin("begin").EndEdit("endEdit").ActionComplete("Complete"; })

)

)

############

In the above code ViewBag.slot).  listbox value will be changed after the grid is saved.   So i have created  following function and trying to add so that it will get the viewbag data source after batchsave from the controller.

  function Complete(args) {         

         

        //    alert(args.requestType);

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

                $.ajax({

                    url: 'getslot',

                    type: 'POST',                

                    success: function (data) {                 

                        alert(data);

                        $("#LiveUpdateAPPR_RESPONSE").ejDropDownList({

                            dataSource: data,

                            fields: { value: "text", text: "value" }

                        });                      

                    }

                })

          

            }

          

        }   

##### Below is my  getslot  AJAx json controller ######################

 public JsonResult getslot()

            {

            List<GRID_DROPDOWN> slotvalue = new List<GRID_DROPDOWN>();

          slotvalue = functions.Get_Exam_Slots("Male");   

            var data = new List<object>();

            foreach (var Cust in slotvalue)

                {

                data.Add(new { value = Cust.KeyValue, text = Cust.KeyField });

                }

            return Json(data, JsonRequestBehavior.AllowGet); 

            }

##############

My Current problem is  Imagine when i open the grid i have listbox with 10 option items ...... After I save grid , the option items might be 7 or less.. However dropdown still shows 10 items which was there when the form initially loaded.  

The grid gets updated , however the Dropdown list box value not getting populated from the server again.

If i refresh the whole form I get the updated data .. 

My requirement is : when i save grid data , grid gets refreshed . Same time it should get the new value for APPR_RESPONSE  dropdown list column of the entire grid from the server. 

    

Hope this will make you more clear of my problem.

Thanks for your valuable time.

Regards

Haneef

[Venkatesh Ayothi Raman]

Hi Haneef, 

Thanks for the update. 

We went through your code example and found that you want to change the Dropdown list data source after batch save and using action complete event. In that event, we can’t find the Dropdown input element and this is the cause of the issue. 

So we suggest you to use cellEdit event for changing the Dropdown data source for foreignkey column. Please refer to the following code example, 

Code example: 

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

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

        . . . 

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

        .  .  . 

        .Columns(col => 

        { 

            . . . 

            col.Field("EmployeeID").HeaderText("Employee Name").ForeignKeyField("EmployeeID") 

               .ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.dataSource2) 

               .TextAlign(TextAlign.Left).Width(90).Add(); 

            . .  . 

        }).ClientSideEvents(eve => 

        { 

            eve. ActionComplete("actionComplete").CellEdit("cellEdit") 

        }) 

) 

 

@cellEdit event 

 

function cellEdit(args) { 

 

        setTimeout(function () { 

            var dpDataSource = [{ value: 1, text: 'One' }, { value: 2, text: 'two' }, { value: 3, text: 'three' }, { value: 4, text: "four" }, { value: 5, text: "five" }, { value: 6, text: "six" }, { value: 7, text: "seven" }, { value: 8, text: "eight" }, { value: 9, text: "nine" }, ]; 

            $("#ForeignKeyEmployeeID").ejDropDownList({ dataSource: dpDataSource, selectedIndex: 1 }); //Set the new Dropdown datasource 

        }, 2) 

    } 

We have also prepared a sample for your requirement which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/BasicMVCSample_(3)127725106 

Regards, 

Venkatesh Ayothiraman.