This is a migrated thread and some comments may be shown as answers.

Datepicker in nested grid giving problem

2 Answers 145 Views
Grid
This is a migrated thread and some comments may be shown as answers.
yogaraj
Top achievements
Rank 1
yogaraj asked on 01 Oct 2014, 02:53 AM
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 Answers, 1 is accepted

Sort by
0
yogaraj
Top achievements
Rank 1
answered on 01 Oct 2014, 08:06 AM
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>
0
Rosen
Telerik team
answered on 02 Oct 2014, 03:41 PM
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.

 
Tags
Grid
Asked by
yogaraj
Top achievements
Rank 1
Answers by
yogaraj
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or