Client side grid handling

[Mihael]

Hi,

I have 2 questions, it seems i cant find answer.

1)  I have grid which stores data from database to grid as in sample1.  How can I get choosen value (country) from dropdown (which is other column with edit type dropdown)  and make it appear on third column (which have edit type string) as abbreviation of that country which is also in database but I want to do it client side during editing.

2) I have grid which stores data from database to grid as in sample2. When i am adding or editing rows/cols, what I want is to when click on checkbox (which is column with edit type boolean ) I want to copy selected value from dropdown (which is other column with edit type dropdown) to other column which have edit type string. And when its not checked to leave it empty. 

So I want to do it client side to possibly with javascript or jquery.

Thanks in advance, sorry for bad English.

Attachment: Samples_f5a90cef.7z

[Farveen Sulthana Thameeztheen Basha]

Hi Bomber7, 

Thanks for contacting Syncfusion Support. 

Query #1 :- How can I get choosen value (country) from dropdown (which is other column with edit type dropdown)  and make it appear on third column (which have edit type string) as abbreviation 

 

We have already discussed about this requirement “How to change the value of one dropdown based on the value selected in another dropdown” in our Syncfusion Knowledge base. 

 

Please refer to the KB link:- 

https://www.syncfusion.com/kb/5445/how-to-render-cascading-dropdown-while-editing 

Query #2:- When i am adding or editing rows/cols, what I want is to when click on checkbox  I want to copy selected value from dropdown  

 

We have achieved your requirement using ActionComplete event of the Grid. While on actionComplete event, we have checked checkbox column to be checked or not and while on dropdown change event we have get  the value of dropdown selected item using args.selectedText and updated into another column.  

Please refer to the code example:- 

   @(Html.EJ().Grid<Object>("FlatGrid") 

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

            .AllowPaging() 

            .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

           .Columns(col => 

            {     

 

                 col.Field("CustomerID").Add(); 

                 col.Field("ShipCity).TextAlign(TextAlign.Left).Add(); 

                 col.Field("Verified").TextAlign(TextAlign.Left).Add(); 

                 .  .   . 

            })) 

             

   ) 

     

      

        function complete(args) { 

            if (args.requestType == "beginedit" || args.requestType == "add") { 

                if (args.row.find("input[type='checkbox']").is(":checked") == true) 

                    $("#GridCustomerID").ejDropDownList({ 

                        change: function (args) { 

                            var text = args.selectedText; 

                            $("#GridShipCity").val(args.selectedText); 

                        } 

                    }); 

                else 

                    $("#GridShipCity").val(""); 

            } 

        } 

Please refer to the API link:- 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

https://help.syncfusion.com/api/js/ejdropdownlist#events:change 

Regards, 

Farveen sulthana T 

 

[Mihael]

Thank you.

I managed to make first question work.

Also I managed to make second question work, but only part when I edit. When I try to add it doesnt work.

Event works but it seems I have two different checkboxes, one when I edit and one for add.

This is my javascript code,

if (args.requestType == "beginedit" || args.requestType == "add") {

               

                args.valPost = $("#tblExample1").ejDropDownList("getValue");

                var row = this.getRowByIndex(args.rowIndex);

               

                row.find(".e-checkbox").ejCheckBox({

                    change: function (args) {

                        if (args.isChecked) {

                           

                            $("#tblExample2").val($("#tblExample1").ejDropDownList("getValue"));

                      

                        }

                        else {

                            $("#tblExample2").val("");

                        }

                    }

                });

            } 

[Farveen Sulthana Thameeztheen Basha]

Hi Bomber7,  

 

We need some additional information to find the cause of the issue. Please share us the following details. 

 

1. Exact scenario you need to achieve. 

2. Graphical representation of your requirement. 

3. Do you have two checkbox columns in your Grid. Complete Grid code example. 

 

Regards, 

Farveen sulthana T 

[Mihael]

1. What I need to achieve I already described in my second question. And by using your solution it didn't work, so I changed it up a little and made it work when I edit grid row.

But when I add new row it doesn't work. Event works, but it seems I have two different checkboxes, one when I edit and one for add. If I look closely I can see difference in shape to,

one for add is like normal grid selection checkbox, and one when I edit looks more in shape like circle than square(borders have more radius).

3. As you can see in sample below there is only one checkbox column.

2. Check zip file. You can see pictures in order 1.start 2.choose 3.check.

Attachment: Sample_eeedc4c2.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Bomber7,  

 

We have checked your code example and we can reproduce your reported problem at our end. To overcome this, we have get the input checkbox element from gridEditForm and paste the selected value from the dropdown when checkbox value is true. The below solution works for while adding the records too. While checking your code example you have bind the change event for the checkbox column. We suggested you to update the value from dropdown change event. 

 

Please refer to the code example:- 

 

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

                        

           .Datasource(ds => ds.URL("/Grid/DataSource").Adaptor("UrlAdaptor")) 

           .AllowSelection() 

           .AllowPaging() 

            .Columns(col => 

                 { 

                            

                      .   .   .                     

                   col.Field("Verified").HeaderText("Verified").EditType(EditingType.Boolean).Width(100).Add(); 

               }) 

    .ClientSideEvents(events => events.ActionComplete("onActionComplete") ) 

) 

</div> 

 

<script type="text/javascript"> 

   function onActionComplete(args){ 

    if (args.requestType == "beginedit" || args.requestType == "add") {  

        if ($(this.element.find("#GridEditForm input[type='checkbox']").is(":checked")) == true){  

            $("#GridCustomerID").ejDropDownList({  

                change: function (args) {  

                    var text = args.selectedText;  

                    $("#GridShipCity").val(args.selectedText);  

                }  

            });  

        } 

        else  

            $("#GridShipCity").val("");  

    }  

    }  

   } 

</script> 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Farveen sulthana T 

[Mihael]

Thank you for your response but I am confused, what is your #GridEditForm ?

[Farveen Sulthana Thameeztheen Basha]

Hi Bomber7, 

What is your #GridEditForm ? 

 

When we edit or Insert the new row we have rendered the form element into the Grid. So it get generated with Grid ID known as GridEditForm. In your sample, it will generate as #tblMjestaeditForm  or instead you can use the class known as .gridform instead of id. 

 

Please refer to the screenshot:- 

 

We have prepared sample as per your requirement. Please refer to the sample:- 

http://www.syncfusion.com/downloads/support/forum/137163/ze/SAMPLE~31877285374.zip 

If you are facing any issue, please reproduce the issue in the above sample. 

Regards, 

Farveen sulthana T