Partial View append not working

[Muhammad Tassadaque Zia]

HI

I am trying to append datepicker dynamically via ajax via partial view. but new row doesn't render datepicker Sample is attached

Attachment: PartialViewJqueryappend_ad261e2.rar

[Ashokkumar Balasubramanian]

Hi Muhammad Tassadaque Zia, 

 

Greetings from Syncfusion support. 

 

While checked the provided sample, you have called the partial view page (“about“) in the main page and again called the partial view page in the button click event. So partial view defined components will be rendered again with same ID and issue is reproduced. So, we suggest you call the partial view page in button click only to render the component dynamically. 

 

<div id="cn"></div> 

 

<ejs-button id="primarybtn" content="Click" isPrimary="true" onclick="clickAjax()"></ejs-button> 

 

<script> 

    function clickAjax() { 

        var ajax = new ej.base.Ajax('/home/about', 'GET', true); 

 

        ajax.send().then(function (result) { 

            $('#cn').append(result); 

        });; 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147718/ze/PartialViewJquery-384775300 

 

Please check the modified sample and get back to us, if you require any further assistance on this. 

  

Regards, 

Ashokkumar B. 

[Muhammad Tassadaque Zia]

This is what i want to achieve. I have one datepicker available on page. I want to add as many datepickers as I want on click of button. I wan to create array of datepickers

[Ashokkumar Balasubramanian]

Hi Muhammad Tassadaque Zia,  

 

We can achieve your requirement by generating the ID for the component in the partial view page by using “GUID“ which is used to generate the unique ID for the assigned component. Please refer the below code example. 

 

@{ 

    for (var i = 0; i <= 10; i++) 

    { 

        var ID = Guid.NewGuid().ToString(); 

        <div> 

            <h6>Essential JS 2 Datepicker component</h6> 

            <ejs-datepicker id="@("date" + ID.Substring(0,5))" placeholder="Choose a Date"></ejs-datepicker> 

        </div> 

    } 

    <br /> 

} 

 

<div id="cn"> 

    @Html.Partial("about") 

</div> 

<div id="dynamic"></div> 

<ejs-button id="primarybtn" content="Click" isPrimary="true" onclick="clickAjax()"></ejs-button> 

<script> 

    function clickAjax() { 

        var ajax = new ej.base.Ajax('/home/about', 'GET', true); 

 

        ajax.send().then(function (result) { 

            $('#dynamic').append(result); 

        });; 

    } 

</script> 

 

Sample:  

 

https://www.syncfusion.com/downloads/support/forum/147718/ze/PartialViewJquery_GUID-1420017311 

 

Kindly check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[Muhammad Tassadaque Zia]

Thank you for your feedback.

You are calling a datepicker in loop on page. what if i want call same partial page (imagine a scenario when i have multiple different controls in partial page such as invoice line item) in loop. this gives error ejs not found as we have added <ejs-scripts> in partial page (I think)

Second we are using begincollectionitem in our code it required id and name in ItemDetails_dc812e88-4c9d-4011-b822-674ec3038ce3__MyDate format. in datepicker i can only set id and not the name 

[Ashokkumar Balasubramanian]

Hi Muhammad Tassadaque Zia,   

 

Query 1: You are calling a datepicker in loop on page. what if i want call same partial page (imagine a scenario when i have multiple different controls in partial page such as invoice line item) in loop. this gives error ejs not found as we have added <ejs-scripts> in partial page (I think) 

 

We would like to inform you that our EJ2 Syncfusion components will be rendered based on the unique ID. If you are not specifying ID and provided same ID for more than one component, then component will not be rendered properly. So, we have provided the solution to generate the unique ID for the component in the partial page.  

Here, we have created the sample for rendered the component with a unique ID for Date Picker and Drop-Down List in the partial page and attached it below.  

 

Sample Link:  

 

https://www.syncfusion.com/downloads/support/forum/147718/ze/PartialViewJquery_dynamic2121210098  

 

Still, you are facing any issues or we misunderstood your query, please revert us with more clear details with a code example for component rendering in the partial view page or modify the provided sample with the reported issue that will help us to check and provide an exact solution at our end.  

 

Query 2:Second we are using begincollectionitem in our code it required id and name in ItemDetails_dc812e88-4c9d-4011-b822-674ec3038ce3__MyDate format. in datepicker i can only set id and not the name 

 

We would like to inform you that, if you provide ID for the Syncfusion EJ2 component then the name for the component will be generated automatically based on the provided ID in ASP.NET Core platform. There is no need to provide name attribute separately for the component. 

  

Else, if you want to set the name attribute separately for the EJ2 component, we suggest you use the htmlAttributes property as mentioned in the below code example. 

 

@{ 

    IDictionary<string, object> htmlAttr = new Dictionary<string, object>(); 

    htmlAttr.Add("name", string.Format("{0}_{1}_{2}", "ItemDetails_", Guid.NewGuid().ToString(), "_MyTime")); 

} 

<h6>Essential JS 2 TextBox component</h6> 

<ejs-timepicker id="time" htmlAttributes="htmlAttr"></ejs-timepicker> 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Muhammad Tassadaque Zia]

The solution you provided a little overkill specially if datepicker are all around you app.Is there a solution if i use inputbox and attached datepicker in javascript such as given in your javascript demo. i think code will be much cleaner i will use asp-for to generate my required IDs and names

[Ashokkumar Balasubramanian]

Hi Muhammad Tassadaque Zia,    

 

Based on your requirement, we have created the ASP.NET input element and append the date picker component to corresponding element using below java script code block. Please find it below. 

 

@{ 

    for (var i = 0; i <= 5; i++) 

    { 

        var Date_ID = Guid.NewGuid().ToString(); 

        <div> 

            <h6>Essential JS 2 Datepicker component</h6> 

            <input type="text" id="@("ItemDetails_" + Date_ID.Substring(0,5) + "__MyDate")" /> 

        </div> 

        <script> 

 

        var datepicker = new ej.calendars.DatePicker(); 

        datepicker.appendTo("#@("ItemDetails_" + Date_ID.Substring(0,5) + "__MyDate")"); 

        </script> 

 

    } 

    <br /> 

} 

 

Sample:  

 

https://www.syncfusion.com/downloads/support/forum/147718/ze/PartialViewJquery1956585991 

 

Could you please check the sample and get back to us, if you require any further assistance? 

 

Regards, 

Ashokkumar B. 

[Muhammad Tassadaque Zia]

Thank you my issue is resolved

[Ashokkumar Balasubramanian]

Hi Muhammad Tassadaque Zia, 

 

We are glad to hear that the problem has been resolved. Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.