Dynamicly add EJ control based on java script count

[sateesh kumar]

Hi team,

Am creating multiple filter condition using check box.

based on the check box status my action will go. but here am check box count is not fixed.

its minmum 1 to max 5 check box count. based on java script/result of previous action, need to add ej checkbox dynamically.

With detail explanation

     my action/java script count will give the list of object.

     based on the object count need to add ej check box after that check/uncheck the ejcheck box  with object values.

the same senario will help for adding dynmic drop down list with data soucre for filter condition.

 

this filter conditions will help, when user get particular record instead of all or avoid the large the data retrieving.

my Java script

 var media = $("#test").data("ejDropDownList");

            media.option("dataSource", e.result.TestResult);  --- TestResult is having list of objects  obj1(id=1,text=A),obj2(id=2,text=B)

            

i am trying to create ej checkbox with below  java script. getting error.  "JavaScript runtime error: Object doesn't support property or method 'data' "

            var div = document.createElement('div');

            div.className = 'row';

            div.innerHTML(ej.CheckBox({

                checked: true,

                value: "testing"

            }));

            document.getElementById('checkbox').appendChild(div);

Thanks for the advance

[Deepa Loganathan]

Hi Sateesh,  

 

Your requirement to dynamically to render Checkbox based on the JSON data can be achieved as given in the below code.  

 

Checkbox:   

var obj = { checkbox_1: true, checkbox_2: false, checkbox_3: true, checkbox_4: false, checkbox_5: true }; 

 

    for (var key in obj) { 

        //looping the object for generating the checkbox based on the object length 

 

        var dynamicCheckBoxes = document.createElement("input"); 

 

        dynamicCheckBoxes.setAttribute("type", "checkbox"); 

 

        dynamicCheckBoxes.setAttribute("id", [key]); 

 

        document.body.appendChild(dynamicCheckBoxes); 

 

        var breakEle = document.createElement("br"); 

 

        document.body.appendChild(breakEle); 

 

        $("#" + [key]).ejCheckBox({ checked: obj[key], text: [key] }); 

 

    } 

 

Sample: https://jsplayground.syncfusion.com/ldaypelp  

Dropdownlist: 

To avoid large data retrieval in Dropdownlist, we suggest enabling Virtual scrolling API, by which means the datasource will be loaded as and when scroller reaches the end of popup.  

In addition to that you can filter the items being loaded by using several filtering options of Dropdownlist. Please check the below links to explore more about filtering items and virtualscrolling in Dropdownlist 

Virtualscrolling: https://help.syncfusion.com/js/dropdownlist/databinding#virtual-scrolling  

Filtering: https://help.syncfusion.com/js/dropdownlist/filtering   

Kindly get back to us in case of any further queries. 

Regards,  

Deepa L. 

[sateesh kumar]

Hi Deepa,

Thanks for response.  sorry for the i didn't explain my query and my question also wrong for my requirement.

Based on check boxes state, i need to send query to controller. In Shared example we can achieve the dynamically add check box.

after user click submit, need to send the state of check box and check box id to controller.

My requirement.

 am having no of users with active/inactive state and different regions(ex North/South).

1. check box used for - State of user active /In active

2. dropdown list -   will get the list of drop downs (City, State,Id .. etc) 

      once dropdown create ,need to get the drop down values once again.

when user click the submit button, need to send the check box state and dropdown selected value in java script.

and need to show those records in grid.

am using below mentioned, but am facing this issues

1. not able to check the all list items by default .

2. not able to get the which item was checked or not in the listview.

 @Html.EJ().ListView("list").EnableCheckMark(true).Height(10).Width(30)

 $("#list").ejListView(

        {

            dataSource: e.result.JobMedias,/*checked:true,*/ 

            fieldSettings: {

                "text": "Name", "Id": "Id"}

            }

            )

Thanks for the advance.

[Deepa Loganathan]

Hi Sateesh,   

 

Sorry, but since we could not get a clear idea of your requirement, we would like to confirm if below is the scenario you were trying to achieve in your application. 

 

1.      Get the status of the user Active/inactive using Checkboxes 

 

2.      Get the location of user with Cascading Dropdownlist as given in the below demo page: 

 

https://js.syncfusion.com/demos/web/#!/bootstrap/dropdownlist/Cascading 

 

3.      Update the details in Grid once with the Data updated in Checkbox and Dropdownlist 

 

Please confirm if this is the requirement you were trying to achieve in your application along with the below details, so that we can update you the solution accordingly.  

 

1.      View pages and Master pages of your application 

 

2.      Codebehind of your view page that processes the received data 

 

Regarding Listview,  

 

You can render all the items checked by default by calling checkAllItem method of Listview upon rendering and to get the checked items of Listview, you would need to use getCheckedItems 

 

We have prepared a sample that depicts the above requirement. Please check the below link.  

 

Sample: https://jsplayground.syncfusion.com/v32vxdl1  

 

Note: The selected items will be logged in console. 

 

Regards,  

Deepa L. 

[sateesh kumar]

Hi Deepa,

sorry for the am not able to express about query.

am using 2017 visual studio, working on MVC project now.

 here am making my query ,little more simple. 

Query 1

1. Having check box, if the check box is active , Enable the drop down list ,text box and two buttons (add, Submit).

2. user will select the value in drop down and will enter the value in input box.

3. If he click submit we need to pass the drop down selected value and input box value.

4. if he click the add, we need add one more ej drop down list and input box (it will happen , how many times user click add)

5. if user click add more than 1, we need to send all the dropdown list value and thier respect input box value.

Query2

as given earlier example, am tried to check the all list items by default in java script. but its not working

finally , i get result unexpectedly. 

here is working code for check all list items by default, with color green.. 

color with red is not working. 

  $("#list").ejListView({

            dataSource: e.result, 

            fieldSettings: { "text": "Name",  "checked": "true", "deactive": "true" },

            option:{ "enableAjax": "false"}

    })

but am not able to deactivte/disable the list.

i want to give the permissions to check/uncheck for few users and few users its its should be check and disable.

Thanks for the advance.

Sai Tanuj kumar

[Deepa Loganathan]

Hi Satheesh, 

We have looked into your requirement with EJ controls. We have prepared an simple sample to achieve your requirement using EJ DropDownList, Button, CheckBox. In our sample, on checking the checkbox the disabled DropDownList and Input will be enabled for user-interaction and on clicking the add button, we will dynamically add the more DropDownList and Input controls as expected. Also, We have disabled some selected  values from the DropDownList pop-up. Also, we have achieved the same solution in ListView for your convenince. Please, refer the below code snippet to achieve your requirement. 

[index.cshtml] 

 

 

@Html.EJ().CheckBox("check1").Value("Music").Checked(false).Text("Check to enable below controls").ClientSideEvents(obj => obj.Change("checkstateChange")) 

 

@Html.EJ().DropDownList("customerList").Datasource(ds => ds.URL("//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/").CrossDomain(true)).Query("ej.Query().from('Customers').take(6)").DropDownListFields(f => f.Text("CustomerID")).ShowCheckbox(true).WatermarkText("Select a customer").Enabled(false) 

 

@Html.TextBox("myTextBox", "This is value", new { @class = "form-control", disabled = "disabled" }) 

<br> 

@Html.EJ().Button("add").Text("Add").ShowRoundedCorner(true).Size(ButtonSize.Medium).Enabled(false).ClientSideEvents(obj => obj.Click("addNewControls")) 

 

@Html.EJ().Button("submit").Text("Submit").ShowRoundedCorner(true).Size(ButtonSize.Medium).Enabled(false) 

 

<script> 

    $(document).ready(function () { 

        checkFunction(); 

    }); 

 

    function checkFunction() { 

        var obj = $("#customerList").ejDropDownList("instance"); 

        if (obj.model.enabled) { 

            obj.checkAll(); 

            obj.disableItemsByIndices("0,3,5"); 

        } 

    } 

    function checkstateChange(args) { 

        if (args.isChecked) { 

            var dropDownListObj = $("#customerList").ejDropDownList("instance"); 

            dropDownListObj.option("enabled", true); 

            var addButtonObj = $("#add").ejButton("instance"); 

            addButtonObj.option("enabled", true); 

            $("#myTextBox").removeAttr("disabled"); 

            var submitButtonObj = $("#submit").ejButton("instance"); 

            submitButtonObj.option("enabled", true); 

            checkFunction(); 

        } 

    } 

    function addNewControls() { 

        $('<select>', { id: "dropDown" + "_" + $.guid }).insertBefore('#add'); 

        $("<br>").insertBefore('#add'); 

        $('<input>', { id: "inputValue" + "_" + $.guid, class: "form-control" }).insertBefore('#add'); 

        $("<br>").insertBefore('#add'); 

        var dataManger = ej.DataManager({ 

            url: "https://mvc.syncfusion.com/Services/Northwnd.svc/" 

        }); 

        // Query creation 

        var query = ej.Query().from("Customers").take(6); 

        $('#' + "dropDown" + "_" + $.guid).ejDropDownList({ dataSource: dataManger,fields: { text: "CustomerID" }, 

            query: query, showCheckbox: true, 

            actionComplete: function (args) { 

                //Fires the action when the list of items is bound to the DropDownList by xhr post calling. 

                $('#' + "dropDown" + "_" + $.guid).ejDropDownList("selectItemsByIndices", "2,3,5"); 

            } 

        }); 

    } 

</script> 

[ListView.cshtml] 

@Html.EJ().ListView("checklist").ShowHeader(false).EnableCheckMark(true).Items(items => 

{ 

    items.Add().Text("Artwork"); 

    items.Add().Text("Abstract"); 

    items.Add().Text("2 Acrylic Mediums"); 

    items.Add().Text("Creative Acrylic"); 

    items.Add().Text("Modern Painting"); 

    items.Add().Text("Canvas Art"); 

    items.Add().Text("Black white"); 

    items.Add().Text("Children"); 

}).ClientSideEvents(evt => evt.Create("onCompleteLoad")) 

 

<script> 

    function onCompleteLoad() { 

        var obj = $("#checklist").ejListView("instance"); 

        //disable items 

        obj.disableItem(2); 

        obj.disableItem(5); 

        //select all items 

        obj.checkAllItem(); 

    }; 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/142964/ze/MVC1_Application-1553030884  

  

Please, let us know if you need any further assistance. 

Regards, 

Shameer Ali Baig S. 

[sateesh kumar]

Hi Shameer,

sorry for the delay replay. am not tried this code. 

i will get back once tried. let me know how to destory(drop/delete) the created controls when clicking remove button.

Thanks for the advance

[Deepa Loganathan]

Hi Satheesh,  

 

You could destroy the instance of the control by using the destroy method of EJ controls as given in the below code. 

 

 

<button id="button1">Destroy</button>  

 

<input type="text" id="dropdown" />   

 

<div id="carsList"> 

  <ul> 

     <li>Audi A4</li> 

     <li>Audi A5</li> 

     <li>Audi A6</li> 

     <li>Audi A7</li> 

     <li>Audi A8</li> 

  </ul> 

</div> 

    </div> 

 <script> 

 

$('#dropdown').ejDropDownList({targetID: "carsList"}); 

   

   var DropDownListObj = $('#dropdown').ejDropDownList("instance"); 

   $("#button1").ejButton({ 

   click: function (args) { 

   DropDownListObj.destroy(); 

      

   }}) 

</script> 

 

 

 

Here, we have used Dropdownlist to showcase the scenario that will be destroyed in the buttons’ click event. 

 

Please note that, with destroy method, the raw HTML element will not be removed from DOM and you would need to remove it your application based on the controls being used. Please let us know if you face any difficulties in achieving your requirement, so that we can provide a solution based on your application needs. 

 

Regards,  

Deepa L. 

[sateesh kumar]

Hi Deepa,

I tried with your shared code . but am getting new controls with new div tag/new line before button.

i want to show the text box beside of drop down. i.e .two controls (drop down & input ) should be beside for one action.

Thanks for the advance.

[Deepa Loganathan]

 

Hi Satheesh, 

 

From the details provided, we understood your requirement to render the Textbox and Dropdownlist items beside each other.  

 

You expected requirement can be achieved by applying simple CSS to the elements available in the document. In the attached code sample, we have added the DropDownList and Input element into a div element to align them side by side as expected. The same styles could be used on dynamically adding new controls. 

 

Please, find the code sample for your reference. 

 

@Html.EJ().CheckBox("check1").Value("Music").Checked(false).Text("Check to enable below controls").ClientSideEvents(obj => obj.Change("checkstateChange")) 

 

<div class="divcontainer"> 

    @Html.EJ().DropDownList("customerList").Datasource(ds => ds.URL("//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/").CrossDomain(true)).Query("ej.Query().from('Customers').take(6)").DropDownListFields(f => f.Text("CustomerID")).ShowCheckbox(true).WatermarkText("Select a customer").Enabled(false) 

    @Html.TextBox("myTextBox", "This is value", new { @class = "form-control", disabled = "disabled", width = "100px", height = "30px" }) 

</div> 

@Html.EJ().Button("add").Text("Add").ShowRoundedCorner(true).Size(ButtonSize.Medium).Enabled(false).ClientSideEvents(obj => obj.Click("addNewControls")) 

 

@Html.EJ().Button("submit").Text("Submit").ShowRoundedCorner(true).Size(ButtonSize.Medium).Enabled(false) 

 

 

<script> 

    $(document).ready(function () { 

        checkFunction(); 

    }); 

 

    function checkFunction() { 

        var obj = $("#customerList").ejDropDownList("instance"); 

        if (obj.model.enabled) { 

            obj.checkAll(); 

            obj.disableItemsByIndices("0,3,5"); 

        } 

    } 

    function checkstateChange(args) { 

        if (args.isChecked) { 

            var dropDownListObj = $("#customerList").ejDropDownList("instance"); 

            dropDownListObj.option("enabled", true); 

            var addButtonObj = $("#add").ejButton("instance"); 

            addButtonObj.option("enabled", true); 

            $("#myTextBox").removeAttr("disabled"); 

            var submitButtonObj = $("#submit").ejButton("instance"); 

            submitButtonObj.option("enabled", true); 

            var deleteButtonObj = $("#delete").ejButton("instance"); 

            deleteButtonObj.option("enabled", true); 

            checkFunction(); 

        } 

    } 

    function addNewControls() { 

        $('<div>', { id: "div" + "_" + $.guid, class: 'divclass' }).insertBefore('#add'); 

        $('<select>', { id: "dropDown" + "_" + $.guid }).appendTo('#' + "div" + "_" + $.guid); 

        $('<input>', { id: "inputValue" + "_" + $.guid, class: "form-control" }).appendTo('#' + "div" + "_" + $.guid); 

        var dataManger = ej.DataManager({ 

            url: "https://mvc.syncfusion.com/Services/Northwnd.svc/" 

        }); 

        // Query creation 

        var query = ej.Query().from("Customers").take(6); 

        $('#' + "dropDown" + "_" + $.guid).ejDropDownList({ 

            dataSource: dataManger, fields: { text: "CustomerID" }, 

            query: query, showCheckbox: true, 

            actionComplete: function (args) { 

                //Fires the action when the list of items is bound to the DropDownList by xhr post calling. 

                $('#' + "dropDown" + "_" + $.guid).ejDropDownList("selectItemsByIndices", "2,3,5"); 

            } 

        }); 

    } 

 

</script> 

 

<style> 

    .form-control { 

        display: inline-block; 

        margin-left: 30px; 

    } 

 

    .divcontainer { 

        display: flex; 

        margin: 30px; 

    } 

</style> 

If this was not the expected requirement, kindly get back to us with the below details for better understanding of this requirement in your application. 

 

1.       Screenshot or Video demonstrating the issue. 

 

2.       Exact requirement you were trying to achieve with a detailed explanation 

 

Regards, 

Deepa L. 

[sateesh kumar]

Hi deepa,

Query1

I tried with shared code. its not working.

i just copy the given code and tested here.

http://jsplayground.syncfusion.com/

Query2

when am destroy the dynamically crated dropdown list, am successfully destroy the dropdown,

but still their input box present. its due to the  'select' tag hope so. 

Thanks for the advance.

[Deepa Loganathan]

Hi Satheesh,  

 

 

Sorry for the inconvenience.  

 

 

Regarding element destroy, 

 

 

As explained in our previous update, destroying a control with “destroy” method will only remove the instance of EJ component and will not remove the HTML DOM entirely from the web page. 

 

So, if you wish to remove the elements from the web page, you would need to remove the elements in your application.  

 

 

Regarding Query #1,  

 

 

Would you please share the proper link to JSplayground sample that you did try, since the link shared in last update, navigates to home page? or the code snippets used in your application would suffice. 

 

 

 

Regards,  

 

Deepa L. 

[sateesh kumar]

Hi Deepa,

After i given reply, i realised and inspect element. With using doc find elements, I remove the selection after destroy the drop down. Its working fine.  

The appended element is not working. now am out of station. Will share the code soon

Thanks for the cooperation.

 

[Deepa Loganathan]

Hi Satheesh,   

 

That is fine. Please update the details once you are back to home town.  

 

Till then, we will wait to hear from you.  

 

Thanks,  

Deepa L. 

[sateesh kumar]

Hi Deepa,

As shared working. in for loop am creating drop down and assign the respective data source.

Thanks for the your assistance.

here is my code.

var y = dm.executeQuery(x);

                    y.done(function (s)

                    {

                        ejUserDropDowns.push("ejdD" + "_" + s.result.name);                     

                        $('<div>', { id: "div_" + s.result.name, class: 'class="col-md-3"', style:'margin-left: 10px;' }).appendTo('#myfilters');

                        $('<select>', { id: "ejdD" + "_" + s.result.name }).appendTo('#' + "div_" + s.result.name);

                        $('#' + "ejdD" + "_" + s.result.name).ejDropDownList({

                            dataSource: s.result.values,

                            watermarkText: 'select ' + s.result.name,

                            enableFilterSearch: true, showRoundedCorner: true,

                            enablePopupResize: true, itemsCount: 10, 

                            change: "filterChange", name: s.result.name,

                            showCheckbox: true, width: 200,

                            multiSelectMode: ej.MultiSelectMode.VisualMode

                        });

                    });

Query 1

Now i want to display some text when mouse hove on the control. it use for avoiding label element for newly created drop down.

Query 2

i want to disable the list view items based on other drop down actions. for this created new thread and mentioned below.

https://www.syncfusion.com/forums/143434/enable-disable-items

Thanks for the advance

[Silambarasan I]

Hi Satheesh, 

 

Thanks for your update. 

 

Query 1: Now i want to display some text when mouse hove on the control. it use for avoiding label element for newly created drop down. 

 

Based on your requirement, we suspect that you need to show tooltip when mouse hover on DropDownList. To achieve this, you can render the DropDownList container as ejTooltip through create event and set the required text to be shown in “content” property as shown below. 

 

 

$('#bikeList').ejDropDownList({ 

dataSource: BikeList, 

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

create:"onCreate" 

}); 

function onCreate() { 

ddlObj= $('#bikeList').data("ejDropDownList"); 

ddlObj.container.ejTooltip({ 

content: "ejDropDownList" 

}); 

} 

 

 

 

Sample: 

https://jsplayground.syncfusion.com/xshuogmw 

 

If you need to modify the tooltip content dynamically based on the selected value of DropDownList, you can modify the content through open event of Tooltip as shown below. 

 

 

function onCreate() { 

ddlObj= $('#bikeList').data("ejDropDownList"); 

ddlObj.container.ejTooltip({ 

content: ddlObj.model.value, 

open: "onOpen" 

}); 

} 

function onOpen () { 

tipObj= $('#bikeList_container').data("ejTooltip"); // "bikeList_container" is the id attribute for dropdownlist's container 

tipObj.setModel({ content: ddlObj.model.value}); 

} 

 

 

 

Sample: 

http://jsplayground.syncfusion.com/2m1bd3t0 

 

Could you please use any of the above code samples based on your scenario and get back to us if your requirement is not fulfilled? 

 

UG Links: 

https://help.syncfusion.com/js/dropdownlist/howto#add-tooltip-on-hovering-the-dropdownlists-items 

https://help.syncfusion.com/js/tooltip/overview 

 

Query 2: i want to disable the list view items based on other drop down actions. for this created new thread and mentioned below. 

 

We have updated the solution for this reported query in that mentioned forum. Please check and follow up that forum #143434 for further details. 

 

 

Regards, 

Silambarasan