Date Picker on Strongly-Typed Partial View

[Lory]

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]

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]

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]

Hi Lory,

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