Datepicker in nested grid giving problem

[yogaraj]

Hi,

I'm using nested grid. In child grid i'm using datepicker. followed as per the below reference link.

http://www.telerik.com/forums/nested-clienttemplate-not-working#OXkDhzlO9UCTmHNzIuvH2A

after that i'm having below issues:-
Values are not binding in the datepicker
script text is printing in grid datepicker cells
when i try to select the date then date selecting icon missing.

Please refer the attachment for the screenshot.

here is my code.

 columns.Bound(a => a.EffStartDate).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerSD_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffStartDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                ).Format("{0:dd/MM/yyyy}");
*************************************************************************************************************************************
                columns.Bound(a => a.EffEndDate columns.Bound(a => a.EffStartDate).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerSD_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffStartDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                ).Format("{0:dd/MM/yyyy}");

                columns.Bound(a => a.EffEndDate).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerED_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffEndDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                );).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerED_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffEndDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                );

[yogaraj]

I managed to fix few issues in nested grid datepicker. still i have two issues in datepicker during runtime.

1. after i select the date value is disappear in the textbox
2. at first time when i click (in any nested grid row datepicker) dateselect icon is disappear

Please find the attached screenshot for the reference.

Code:- (.cshtml)
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<PCBAAutoConversion.Models.PartNoAllocationViewModel>()
            .Name("grid_#=Model#")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .Model(model => model.Id(p => p.AllocationID))
                .Read(read => read.Action("BindPCBAPartNoAllocation", "PCBAAllocation", new { Model = "#=Model#" }))
                .Create(create => create.Action("PCBAAllocation_Create", "PCBAAllocation", new { Model = "#=Model#" }))
                .Update("PCBAAllocation_Update", "PCBAAllocation")
                .Destroy(destroy => destroy.Action("PCBAAllocation_Destroy", "PCBAAllocation"))
            )
            .Columns(columns =>
            {
             columns.Bound(a => a.AllocationID).Width(50);
              columns.Bound(a => a.EffStartDate).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerSD_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffStartDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div style='display:none;' class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                ).Format("{0:dd/MM/yyyy}");

                columns.Bound(a => a.EffEndDate).Width(130).HtmlAttributes(new
                {
                    @class = "templateCell"

                }).ClientTemplate(
                Html.Kendo().DatePicker()
                .Name("FDPickerED_\\#=AllocationID\\#")
                .Format("{0:dd/MM/yyyy}")
                .HtmlAttributes(new { data_bind = "value:EffEndDate" })
                .Deferred()
                .ToClientTemplate().ToHtmlString() +
                    "<div style='display:none;' class=\"scripts\">" +
                        Html.Kendo().DeferredScripts(false).ToString().Replace("jQuery(\"\\#", "jQuery(\"\\\\\\#") +
                    "</div>"
                ).Format("{0:dd/MM/yyyy}");
 })
            .ToolBar(toolbar =>
            {
                toolbar.Create().Text("Add New");
                toolbar.Save();
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Sortable()
            .Events(events => events.DataBound("detailGridDataBound"))
            .ToClientTemplate())

JavaScript:-

<script type="text/javascript">
    function detailGridDataBound() {
        this.wrapper.parent().find(".scripts").each(function () {
            eval($(this).html());
        });
        var grid = this;
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
            var tr = $(this).closest('tr');
            var item = grid.dataItem(tr);
            kendo.bind($(this), item);
        });        
    }
</script>

[Rosen]

Hello yogaraj,

As the grid is set for incell edit mode and clicking on the cell will set the cell into edit mode, showing different widget. Thus, you should prevent this by canceling the click of the cell. Here is a modified version of the dataBound function which should address the issues you have described:

function detailGridDataBound() {
    var grid = this;

    this.wrapper.parent().find(".scripts").each(function () {
        eval($(this).html());
        //prevent cell entering edit mode
        var cell = $(this).closest("td");
        cell.click(false);

        var dataItem = grid.dataItem(cell.closest("tr"));
        kendo.bind(cell, dataItem);
    });
}

Regards,
Rosen
Telerik