Datepicker in nested grid giving problem

3 posts, 0 answers
  1. yogaraj
    yogaraj avatar
    7 posts
    Member since:
    Aug 2014

    Posted 30 Sep 2014 Link to this post

    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>"
                    );

  2. yogaraj
    yogaraj avatar
    7 posts
    Member since:
    Aug 2014

    Posted 01 Oct 2014 Link to this post

    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>
  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 02 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top