how to display the month and year only calendar in kendo grid.

4 posts, 0 answers
  1. Bajivali
    Bajivali avatar
    10 posts
    Member since:
    Oct 2015

    Posted 14 Jun Link to this post

    hi I have the following in my cshtml pages.

    <div class="grid-scrollable">@(Html.Kendo().Grid<ViewModels.Admin.CDSUtilizationViewModel>() .Name("cdsgrid") .Columns(columns => { columns.Bound(c => c.Id).Width(150).Hidden(true); columns.Bound(c => c.Transaction_Id).Width(150).Hidden(true); columns.ForeignKey(p => p.Contract_Id, (System.Collections.IEnumerable)ViewData["ContractNumber"], "Id", "ContractNumber").Width(140); columns.ForeignKey(p => p.Contractor_Id, (System.Collections.IEnumerable)ViewData["ContractorName"], "Id", "ContractorName").Width(200); columns.ForeignKey(p => p.ServiceDetail_Id, (System.Collections.IEnumerable)ViewData["ServiceNameString"], "Id", "ServiceNameString").Width(300); columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date").Format("{0:MMMM yyyy}").Width(120); columns.Bound(p => p.UnitsDelivered).EditorTemplateName("Integer").Width(80); columns.Command(command => { command.Edit().HtmlAttributes(new { @class = "btn-primary" }); command.Destroy().HtmlAttributes(new { @class = "btn-primary" }); }).Width(150); }) .ToolBar(tools => { tools.Create().Text("Add CDS Utilization Record").HtmlAttributes(new { @class = "btn-primary" }); tools.Excel().Text("Excel").HtmlAttributes(new { @class = "pull-right" }); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5)) .Selectable() .Filterable(f => f.Operators(o => o.ForString(s => s.Clear() .Contains("Contains") .DoesNotContain("Does not contain") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") .StartsWith("Starts with") .EndsWith("Ends with ")))) .Resizable(resize => resize.Columns(true)) .Events(e => e.Edit("oncdsutilizationGridEdit")) .Excel(excel => excel.FileName("CDSUtilization.xlsx").Filterable(true).AllPages(true)) .DataSource(dataSource => dataSource.Ajax().PageSize(10).Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); }) .Read(read => read.Action("CDSUtilizationRead", "CDSContractUtilization")) .Create(create => create.Action("CDSUtilizationCreate", "CDSContractUtilization")) .Update(update => update.Action("CDSUtilizationUpdate", "CDSContractUtilization")) .Destroy(destroy => destroy.Action("CDSUtilizationDestroy", "CDSContractUtilization")) .Events(events => events.Error("error"))) )</div>

     

    [AcceptVerbs(HttpVerbs.Post)] public ActionResult CDSUtilizationCreate([DataSourceRequest]DataSourceRequest request, CDSUtilizationViewModel cdsutilization)

    {

    if (ModelState.IsValid) { cdsutilization.CreateDate = DateTime.Now; cdsutilization.Transaction_Id = Convert.ToInt32(cDSUtilizationService.GenerateMaxTrasactionIdCDSUtlization()); var cdsutilizationDataObj = cDSUtilizationService.AddAndSave(Mapper.Map<CDSUtilizationViewModel, CDSUtilization>(cdsutilization)); cdsutilization.Id = cdsutilizationDataObj.Id; }

    return Json(new[] { cdsutilization }.ToDataSourceResult(request, ModelState));

    }

     

    and I want to display only Month and Year calendar

    similar to this.

    and up on my month selection I want to insert the first day of the selected month in to database.

    can you please help.

     

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 16 Jun Link to this post

    Hi Bajivali,

    Thank you for contacting us.

    You can use editor template to configure the date picker as a month picker. You may find useful the following resources on the matter:
        - http://demos.telerik.com/kendo-ui/datepicker/index
        - http://www.telerik.com/forums/grid-filtermode-row-with-a-monthpicker
        - https://onabai.wordpress.com/2012/10/01/kendoui-time-and-datetime-in-grid-yes-we-can/

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bajivali
    Bajivali avatar
    10 posts
    Member since:
    Oct 2015

    Posted 16 Jun in reply to Danail Vasilev Link to this post

    i tried using all above posts. 

    my aim is to display a calendar with month and year , similar to this 

    http://demos.telerik.com/kendo-ui/datepicker/index (add ADD TO ARCHIVE MAIL FROM)

    and up on selection i should be able to save the first day of the selected month in the database.

    columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date").Format("{0:MMMM yyyy}").Width(120); 

     

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 20 Jun Link to this post

    Hi,

    You can use the approach from this forum post to edit the day of the selected month - http://www.telerik.com/forums/depth-year-last-day-of-month#Bq_rMLy2fEuMJanWiyfDVQ

    I have also made such a modification to the custom-popup-editor demo:

    Person.cshtml:
    <div>
        @Html.Kendo().DatePickerFor(mode => Model.BirthDate).Depth(CalendarView.Year).Start(CalendarView.Year).Events(ev=>ev.Change("onChange"))
        @Html.ValidationMessageFor(model => model.BirthDate)
    </div>

    Index.cshtml:
    <script>
        function onChange(e) {
            var date = this.value();
            date = new Date(date.getFullYear(), date.getMonth());
            this.value(date);  //or put this.set("bindname", date); if you use a data-bind.
        }
    </script>

    You can also find the modified files of this example attached to this post.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready