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. Image for the cookie policy date

Partial View append not working

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

9 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 23, 2019 03:11 AM

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. 



MT Muhammad Tassadaque Zia September 23, 2019 04:10 AM

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


AB Ashokkumar Balasubramanian Syncfusion Team September 24, 2019 05:58 AM

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. 



MT Muhammad Tassadaque Zia September 25, 2019 01:31 AM

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 


AB Ashokkumar Balasubramanian Syncfusion Team September 26, 2019 03:20 AM

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. 



MT Muhammad Tassadaque Zia September 27, 2019 02:09 AM

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


AB Ashokkumar Balasubramanian Syncfusion Team September 30, 2019 02:21 AM

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. 



MT Muhammad Tassadaque Zia October 2, 2019 12:53 AM

Thank you my issue is resolved


AB Ashokkumar Balasubramanian Syncfusion Team October 2, 2019 11:11 PM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon