Grid with Datepicker in Toolbar

5 posts, 0 answers
  1. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 24 Mar 2015 Link to this post

    Hi.
    There is grid:
    @(Html.Kendo().Grid<OperMVC.Models.Daily>()
        .Name("Grid")
        .Columns(c => {
            c.Bound(p => p.Name).Width(150);
            c.Bound(p => p.BDayDate).Width(50);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Template(
                @<div><label>BDate: </label>
                @(Html.Kendo().DatePicker()
                    .Name("datepicker")
                    .Events(e => e.Change("GetDate"))
                    .Value(DateTime.Today)
                    .Format("dd.MM.yyyy")
                )</div>
            );
        })
         
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadBDays", "Person").Data("filterDate"))
            //.ServerOperation(true)
        )
         
     
     
    )
    and js script for DatePicker Event:
    function GetDate() {
            var value = this.value();
            var date = new Date();
            if (value) {
                date.setTime(Date.parse(value));
                console.log(date.toLocaleDateString());
            }
            $("#Grid").data("kendoGrid").dataSource.read();
             
        }
    js function for filter data by date:
    function filterDate() {
            var date = $("#datepicker").data("kendoDatePicker").value();
            console.log("filtered date:" + date);
            return {dateString : date}
        }


    When I select the date, then update the Grid as I need, but if I want to choose a new date, it opens a DatePicker without any a dates. you have to change the month and return back, then there are only dates
    Attach screenshot

  2. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 25 Mar 2015 in reply to vitaliy Link to this post

    I Tried to move the DatePicker outside the table - the effect is the same. DatePicker problem?
  3. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 25 Mar 2015 in reply to vitaliy Link to this post

    i solved the problem.
  4. JSeeger
    JSeeger avatar
    1 posts
    Member since:
    Apr 2014

    Posted 08 Apr 2015 Link to this post

    What was the solution?
  5. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 08 Apr 2015 in reply to JSeeger Link to this post

    i used that js scritp to collapse grouped row in my grid on DataBound Event:

    function collapseGroupRows() {
            var grid = $("#Grid").data("kendoGrid");
            grid.collapseGroup(grid.tbody.find("tr.k-grouping-row"));
            $('tr[role*="row"]').slice(1).hide();
        }

    -  It is troble)

    I changed script on:

    function collapseGroupRows() {
            var grid = $("#Grid").data("kendoGrid");
            var groups = grid.tbody.find(">tr.k-grouping-row");
            for (var i = 0; i < groups.length; i++) {
                grid.collapseGroup(groups.eq(i));
            }
             
        }

    and everything works fine=)

     

Back to Top