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

Date Picker on Strongly-Typed Partial View

Thread ID:

Created:

Updated:

Platform:

Replies:

123444 Mar 17,2016 06:10 PM UTC Mar 24,2016 06:18 AM UTC ASP.NET MVC 3
loading
Tags: DatePicker
Lory
Asked On March 17, 2016 06:10 PM UTC

Hi Team,


I'm trying to use a datepicker in a strongly-typed partial view but I can't get the date picker to work. It's only appearing as  a text box with "01/01/0001" as the value.  Is there some setting I miss?
View basically displays all the items in JustificationDTO with checkboxes and if the Category is 'Cat1' it should show the datepicker. Also how do I set an attribute of the datepicker? If I try to set the width, or value I get an error: Cannot apply indexing with [] to an expression of type 'System.Dynamic.Dynamic.Object'.  Thanks.

[View]
@model IEnumerable<SyncfusionProj1.Models.DTO.JustificationDTO>
@{
    if (Model != null)
    {
        int tc = Model.Count();
        <table style=" border: 1px solid #000000; width:500px; ">
            @*height:310px;*@
            <tr>
                <td>
                    <span id="spnSpcFormula"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="divChkSFJustificaiton" class="scrollable">
                        <table>
                            @for (int e2 = 0; e2 < tc; e2++)
                            {
                                string cbId = @Model.ElementAt(e2).JustificationId.ToString();
                                string category = @Model.ElementAt(e2).Category;
                                <tr>
                                    <td align="left">
                                        <div>
                                            @Html.CheckBox(cbId, false, new { @class = "cbsf" })<span name="@Model.ElementAt(e2).Justification">@Model.ElementAt(e2).Justification</span>
                                        </div>
                                    </td>

                                    <td>
                                        <span class="@(@Model.ElementAt(e2).Category == "Cat1"  ? "visible-item": "hidden-item")">                                                      
                                                  @Html.EJ().DatePickerFor(model => model.ElementAtOrDefault(e2).DateLevel, (Syncfusion.JavaScript.Models.DatePickerProperties)ViewData["date"])
                                        </span>
                                    </td>
                                </tr>
                            }
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    }
}

[Controller]
 public ActionResult _Justification(int categoryId)
        {
            var justifications = ordr.GetJustifications(categoryId);
            ViewData["Justification"] = justifications;
            DatePickerProperties dtPicker = new DatePickerProperties();        
            //dtPicker.Width = "120px";
            //dtPicker.DateFormat = "dd/MM/yyyy";
            //dtPicker.Value = DateTime.Now;  
            ViewData["date"] = dtPicker;
            return PartialView("_Justification", ViewData["Justifications"]);
       }

Prasanth Palani [Syncfusion]
Replied On March 18, 2016 06:34 PM UTC

Hi Lory,


Thanks for conducting Syncfusion support.


We have analyzed your query.  Generally partial views doesn’t refer any layout page. To render the scripts of EJ controls we need to include the @Html.EJ().ScriptManager() in layout page.  We suspect that you may have render the partial view directly from controller. When we render the partial view directly like this, it doesn’t refer the script files from _Layout file. The reported issue raised due to this. So we need to  render the partial view in the view page. Please refer the below code snippet,

[View]


@model DPForModel126.Models.datepicker1   


@{

    Html.RenderPartial("_Justification", Model);   // Here _Justification is the Partial view

}


[Controller]


        public ActionResult Index()

        {

            datepicker1 dp = new datepicker1();//Here datepicker1 is the model class

            dp.Value = DateTime.Now ;   //Here we can set the value of the datepicker

            return View(dp);

        }


[Partial View]


@model DPForModel126.Models.datepicker1


    <div class="frame">

        <table>

            <tr>

                <td>

                    <span>Enter date</span>

                </td>

                <td>

                    @Html.EJ().DatePickerFor(model => model.Value)

                </td>

            </tr>

        </table>

    </div>

@Html.EJ().ScriptManager()



In the end of the partial view page we need to refer the @Html.EJ().ScriptManager if in your project file unobtrusive mode has been set as false. For more information about “to render our control with partial view using Ajax”, please refer the below document: Partial View using Ajax


If you install the NuGet package in your application then it will be automatically added the script and theme files in your application. We need to refer those script and theme files in our layout page. For more details about NuGet configuration and installation, please refer the below link,


http://help.syncfusion.com/aspnetmvc/installation-and-deployment#configuring-syncfusion-nuget-packages-in-visual-studio 


For your reference, we have attached a sample to showcase that our control render properly with partial view. It can be download from the below location 


Sample Location: sample


If you still face the same issue, kindly get back to us with more information or revert back the provided sample based on your application along with the replication procedure to reproduce the issue at our end. This would help us identify the issue and provide a solution at the earliest.


Regards,

Prasanth P


Lory
Replied On March 23, 2016 05:02 PM UTC

Hi Team,

Yes, I was showing the partial view using Ajax. Putting  ej.widget.init($("#partialgrid"));    after  $("#partialgrid").html(result); on success did the trick.

Thanks!


Saranya CJ [Syncfusion]
Replied On March 24, 2016 06:18 AM UTC

Hi Lory,

Thank you for your update. Please let us know if you require any other assistance.
 
Regards,
Saranya

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.

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

;