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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamicly add EJ control based on java script count

Thread ID:

Created:

Updated:

Platform:

Replies:

142964 Feb 27,2019 06:11 AM UTC Mar 21,2019 07:23 PM UTC ASP.NET MVC 15
loading
Tags: Checkbox
sateesh kumar
Asked On February 27, 2019 07:57 AM UTC

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 [Syncfusion]
Replied On February 28, 2019 04:27 AM UTC

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] }); 
 
    } 
 


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 



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

Regards,  
Deepa L. 


sateesh kumar
Replied On February 28, 2019 09:04 AM UTC

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 [Syncfusion]
Replied On March 1, 2019 09:11 AM UTC

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: 
 
 
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.  
 
 
Note: The selected items will be logged in console. 
 
Regards,  
Deepa L. 


sateesh kumar
Replied On March 2, 2019 09:20 AM UTC

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 [Syncfusion]
Replied On March 4, 2019 12:22 PM UTC

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({ 
        }); 
        // 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> 

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

Regards, 
Shameer Ali Baig S. 


sateesh kumar
Replied On March 8, 2019 03:51 PM UTC

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 [Syncfusion]
Replied On March 11, 2019 09:53 AM UTC

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
Replied On March 13, 2019 01:11 PM UTC

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 [Syncfusion]
Replied On March 15, 2019 12:24 PM UTC

 
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
Replied On March 16, 2019 10:50 AM UTC

Hi deepa,

Query1
I tried with shared code. its not working.
i just copy the given code and tested here.

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 [Syncfusion]
Replied On March 18, 2019 11:04 AM UTC

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
Replied On March 19, 2019 06:14 PM UTC

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 [Syncfusion]
Replied On March 20, 2019 05:04 AM UTC

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
Replied On March 20, 2019 08:59 AM UTC

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.


Thanks for the advance

Silambarasan I [Syncfusion]
Replied On March 21, 2019 07:23 PM UTC

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
 
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
 
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: 
 
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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;