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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Partial View append not working

Thread ID:

Created:

Updated:

Platform:

Replies:

147718 Sep 21,2019 09:46 AM UTC Oct 3,2019 07:11 AM UTC ASP.NET Core - EJ 2 9
loading
Tags: DatePicker
Muhammad Tassadaque Zia
Asked On September 21, 2019 09:46 AM UTC

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 [Syncfusion]
Replied On September 23, 2019 11:11 AM UTC

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> 
 
 
Please check the modified sample and get back to us, if you require any further assistance on this. 
  
Regards, 
Ashokkumar B. 


Muhammad Tassadaque Zia
Replied On September 23, 2019 12:10 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 01:58 PM UTC

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:  
 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Muhammad Tassadaque Zia
Replied On September 25, 2019 09:31 AM UTC

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 [Syncfusion]
Replied On September 26, 2019 11:20 AM UTC

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:  
 
 
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
Replied On September 27, 2019 10:09 AM UTC

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 [Syncfusion]
Replied On September 30, 2019 10:21 AM UTC

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:  
 
 
Could you please check the sample and get back to us, if you require any further assistance? 
 
Regards, 
Ashokkumar B. 


Muhammad Tassadaque Zia
Replied On October 2, 2019 08:53 AM UTC

Thank you my issue is resolved

Ashokkumar Balasubramanian [Syncfusion]
Replied On October 3, 2019 07:11 AM UTC

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. 


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

Live Chat Icon For mobile
Live Chat Icon