Hi All,
Just wanted to ask how can I combine toolbar.Search and my toolbar.ClientTempalteId.
I need the functionality of Search but I also need to have custom dropdown as well for my toolbar.
Also how can my Custom dropdown template positioned on the left and my search be on the right of the toolbar.

Thanks,
Ryan

I recently upgraded my application with latest kendo trail version before actual upgrade.(From "Kendo UI Q2 2014 SP2" to kendo 2020).I am not able to see "business hour" link in my scheduler.I am not able to figure out what i missed. Below is my code

 @(Html.Kendo().Scheduler<myclass>()
            .Name("scheduler")
            .Views(views =>
            {
                if (Request.Params["IsShowFullDay"] == null || Request.Params["IsShowFullDay"] == "0")
                {
                    views.DayView(e => { e.SlotTemplate("<div title='#= kendo.toString(date,'MM/dd/yyyy hh:mm tt') #' class='divDayTemplate'></div>"); e.Selected(true); }).WorkDayStart(7, 0, 0).WorkDayEnd(18, 0, 0).ShowWorkHours(true);
                    views.WeekView(e => { e.SlotTemplate("<div title='#= kendo.toString(date,'MM/dd/yyyy hh:mm tt') #' class='divDayTemplate k-nav-day'> </div>"); }).WorkDayStart(7, 0, 0).WorkDayEnd(18, 0, 0).ShowWorkHours(true);
                }
                else
                {
                    views.DayView(e => { e.SlotTemplate("<div title='#= kendo.toString(date,'MM/dd/yyyy hh:mm tt') #' class='divDayTemplate'></div>"); e.Selected(true); }).ShowWorkHours(false).WorkDayStart(7, 0, 0).WorkDayEnd(18, 0, 0);
                    views.WeekView(e => { e.SlotTemplate("<div title='#= kendo.toString(date,'MM/dd/yyyy hh:mm tt') #' class='divDayTemplate k-nav-day'> </div>"); }).ShowWorkHours(false).WorkDayStart(7, 0, 0).WorkDayEnd(18, 0, 0);
                }

                views.MonthView(e => { e.DayTemplate("<div style='cursor:pointer;' title='#= kendo.toString(date,'MM/dd/yyyy') # 12:00 AM' class='divDayTemplate k-nav-day'>#=kendo.toString(date,'dd')#</div>"); });

            })

Also where can i find all the changes happened between these two versions 

Hi,
We are seeing an issue with new Kendo upgrade (2020). There are 2 scenarios that we have found that Kendo grid pagination is not working.
Scenario 1 : 
Kendo pagination doesn't work on the pageload, but it starts working when I click F12 to inspect the elements. It was working fine with the old version (2017). Below is the source code for the Grid.
  @(Html.Kendo().Grid<vm>()
                                                            .Name("id")
                                                            .Columns(columns =>
                                                            {
                                                                columns.Bound(d => d.FirstName).Title("First Name").Width(150);
                                                                columns.Bound(d => d.LastName).Title("Last Name").Width(150);
                                                                columns.Bound(d => d.MemberAddress).Title("Address");
                                                                columns.Bound(d => d.MemberDOB_STR).Title("DOB").Format("{0:MM/dd/yyyy}").Width(100);
                                                                columns.Bound(d => d.MemberId).Title("Member ID").Width(140);
                                                                columns.Bound(d => d.ZipCode).Title("Zip Code").Width(120);                                                                
                                                            })
                                                            .ToolBar(tools => tools.Excel())
                                                          .Excel(excel => excel
                                                          .Filterable(true)
                                                            .Filterable(filterable => filterable.Extra(false).Operators(operators => operators.ForString(str => str.Clear().StartsWith("Starts with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
                                                            .Scrollable(s => s.Height("200px"))
                                                            .Pageable()
                                                             .Resizable(resize => resize.Columns(true))                                                      
                                                            .Sortable()
                                                            .DataSource(dataSource => dataSource
                                                            .Ajax()
                                                             .Sort(s => s.Add("MemberId").Descending())
                                                            .PageSize(10)
                                                            .Read(read => read.Action("Some Action", "Controller").Data(""))
                                                        ).AutoBind(false)
            )

Scenario 2: 

In this case the pagination doesn't even work . The same was working fine with the old verison.

  @(Html.Kendo().Grid<DiagnosisICDVM>()
                            .Name("grdMemberDiagnosis")
                            .Events(e => e.DataBound("DisplayDataMessageMemberDiagnosis"))
                            .Columns(columns =>
                            {
                                columns.Bound(d => d.CDCode).Title("Code").Width(100);
                                columns.Bound(d => d.Description).Title("Diagnosis").Width(250);
                                columns.Bound(d => d.CodeVersion).Title("ICD Version").Width(120);
                                columns.Bound(d => d.ICDStartDate).Title("Start Date").EditorTemplateName("date").Format("{0:MM/dd/yyyy}").Width(120);
                                columns.Bound(d => d.ICDEndDate).Title("End Date").EditorTemplateName("date").Format("{0:MM/dd/yyyy}").Width(120);
                                columns.Bound(d => d.SourceType).Title("Source").Width(120).HtmlAttributes(new { title = "#=SourceType#" });
                            })
                            .ToolBar(tools => tools.Excel())
                                  .Excel(excel => excel
                                  .Filterable(true)
                        .Pageable(p => p.PageSizes(true).Refresh(true))
                        .Resizable(resize => resize.Columns(true))
                        .Sortable()
                        .Scrollable()
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Sort(s => s.Add("CDCode"))
                        .PageSize(100)
                          .Model(model => { model.Id(p => p.CDCode); })
                        .Events(events => events.Error("error_handler"))
                        .Read(read => read.Action("Some Action", controller).Data("JSFunction")))
        )
Bootstrap 3 and JQuery 1.12.4 being used as per the Kendo recommendation.
Please help in resolving this issue as we are close on the deadlines.

Thanks

Recently due to the jquery upgrade from 1.10.2 to 3.4.1, we also upgraded kendo ui for asp.net mvc from 2014.2.716  to 2019.2.619 in our asp.net mvc5 project targetting dot net framework 4.6. We were able to upgrade jquery and css files, but unable to update kendo mvc dll from 2014.2.716 to 2019.2.619. Because the kendo mvc versions higher than 2014 needs mvc6(dotnet core mvc) and has dependency issues with microsoft dnx compilations csharp abstractions .

 

Now the problem we are facing is the duplication of pagination buttons in the kendo mvc grid. While researching online we found that kendo jquery version and mvc dll versions should match, but we are unable to upgrade kendo mvc dll from 2014.2.716 to 2019.2.619 . I had attached the screenshot of duplicate pagination buttons in kendo mvc grid. Please tell us how to solve this or there any workarounds exists.

Hi, 

I followed the implementation and documentation for the upload here https://demos.telerik.com/aspnet-mvc/upload/events and it looks like the complete event should fire once when all files are uploaded.  It does in your demo, but you are not using .ChunkSize 

I am using the .ChunkSize and with that implementation, it fires a complete and success on each file.  I expect the success to fire on each file but not the complete.  I'm looking for some event to fire once all files are uploaded so I can process them server side. if this isn't the right implementation please suggest a way to accomplish that. 

 

Here is code that generates n complete alerts where n is the number of files uploaded successfully:

Razor view:

<div>
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .Save("Chunk_Upload_Save", "Home")
            .ChunkSize(110000)
            .AutoUpload(false)
        )
        .Events(events => events
            .Complete("onComplete")
        )
    )
</div>
<script>
    function onComplete(e) {
        alert("Complete:");
    }
</script>

 

Controller:

  public ActionResult Chunk_Upload_Save(IEnumerable<HttpPostedFileBase> files, string metaData)
        {
            try
            {
                var ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));
                var serializer = new DataContractJsonSerializer(typeof(ChunkMetaData));
                var chunkData = (ChunkMetaData)serializer.ReadObject(ms);
                ms.Close();

    
                return Json(new FileResult
                {
                    uploaded = chunkData.TotalChunks - 1 <= chunkData.ChunkIndex,
                    fileUid = chunkData.UploadUid
                });
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }

I currently have a a custom delete button in my toolbar. I want it to delete any record that has a check beside it in the grid with my Checkbox column. I also have batch editing enabled as well as Selectable as a way to see which record correlates with what you are doing. Here is my code. 

 

@(Html.Kendo().Grid<MVCSQLDatabase.Models.Proposal>()
      .Name("Grid")
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(10)
          .Batch(true)
          .Model(model => model.Id(p => p.Proposal_Uid))
          .Read(read => read.Action("Proposals_Read", "Grid"))
          .Create(create => create.Action("Proposals_Create", "Grid"))
          .Update(update => update.Action("Proposals_Update", "Grid"))
          .Destroy(destroy => destroy.Action("Proposals_Destroy", "Grid"))
      )
          .Resizable(resize => resize.Columns(true))

      .Columns(columns =>
      {
          columns.Select().Width(100);
          columns.Bound(c => c.Pr).Width(215);
          columns.Bound(c => c.P).Width(200);
          columns.Bound(c => c.C).Width(190);
          columns.Bound(c => c.Cli).Width(185);
          columns.Bound(c => c.Total).Width(290);
          columns.Bound(c => c.Md).Width(220);
          columns.Bound(c => c.Start_Date).Format("{0: dd/MM/yyyy}").Width(170);
          columns.Bound(c => c.End_Date).Format("{0: dd/MM/yyyy}").Width(170);
          columns.Bound(c => c.Pqr).Width(235);
          columns.Bound(c => c.Co).Width(215);
      })
      .ToolBar(toolbar =>
          {
          toolbar.Create();
          toolbar.Save();
          toolbar.Excel();
          toolbar.Custom().Text("Delete").Name("Destroy").IconClass("k-icon k-i-close");
      })
      .ColumnMenu()
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .Selectable(selectable =>
          {
          selectable.Mode(GridSelectionMode.Multiple);
          selectable.Type(GridSelectionType.Row);
      })
      .PersistSelection()
      .Filterable(filterable => filterable.Mode(GridFilterMode.Row))
      .Scrollable()
      .HtmlAttributes(new { style = "height:835px;" })


)

 

It should delete from the grid AND my server when I put a checkmark in the check box and hit the delete button in the tool bar. It should also Delete as many records as I choose, and if I put a check in the box at the column header, it should delete all records. It should also only give 1 event of deletion regardless of how many records are actually deleted. I know I need a script, but I currently don't know how to write it correctly. Any help would be appreciated. 

I have a grid where I am trying to put a drop down list in the toolbar of the grid.

This is the syntax I am using:

Html.Kendo()

            .Grid<Fss.Areas.Customers.Models.Contact>()

            .Name("ContactsGrid")

            .Columns(columns =>

            {

                columns.Bound(c => c.LastName);

                columns.Bound(c => c.FirstName);

                columns.Bound(c => c.Email);

                columns.Bound(c => c.Phone);

                columns.Bound(c => c.Mobile);

                columns.Bound(c => c.Changed).Format("{0:HH:mm:ss d/M/yyyy}");

                columns.Bound(c => c.ChangedBy);

                columns.Command(command =>

                {

                    command.Edit();

                    command.Destroy();

                }).Width(172);

            })

            .ToolBar(toolbar =>

            {

                toolbar.Create();

                toolbar.Template(() =>

                {

                    @<div class="toolbar">

                        @{

                            Html.Label("Customer");                                                    

                            Html.Kendo()

                                .DropDownList()

                                .Name("CustomersComboBox")

                                .HtmlAttributes(new { style = "width: 400px" })

                                .DataTextField("Name")

                                .DataValueField("CustomerId")

                                .AutoBind(false)

                                .Events(e => e.Change("changeCustomer"))

                                .DataSource(source => source.Read(read => read.Action("GetCustomers", "Contacts")));

                        }

                    </div>

                });

            })

            .Editable(editable => editable.Mode(GridEditMode.PopUp))

            .Pageable()

            .Sortable()

            .Scrollable()

            .Reorderable(con => con.Columns(true))

            .Resizable(con => con.Columns(true))

            .ColumnResizeHandleWidth(5)

            .HtmlAttributes(new { style = "height:600px;" })

            .Events(e => e.Edit("edit"))

            .DataSource(dataSource => dataSource.Ajax()

                                                .PageSize(10)

                                                .Events(events => events.Error("error_handler"))

                                                .Model(model =>

                                                {

                                                    model.Id(c => c.ContactId);

                                                    model.Field(f => f.Changed).Editable(false);

                                                    model.Field(f => f.ChangedBy).Editable(false);

                                                    model.Field(f => f.Error).Editable(false);

                                                })

                                                .Create(c => c.Action("Create", "Contacts"))

                                                .Read(r => r.Action("Read", "Contacts"))

                                                .Update(u => u.Action("Edit", "Contacts"))

                                                .Destroy(d => d.Action("Delete", "Contacts")));

I am following an example found here:
http://demos.telerik.com/kendo-ui/Beta/web/grid/toolbar-template.html

This seems to compile OK, but at runtime it throws this error. It's saying it's missing a semicolon, but I don't understand where I would put one:

Server Error in '/' Application.

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1002: ; expected

Source Error:

Line 186:EndContext(__razor_template_writer, "~/Areas/Customers/Views/Contacts/Customer.cshtml", 1606, 30, true);
Line 187:
Line 188:})
Line 189:
Line 190: #line 44 "C:\Users\riston\Desktop\Fss\Fss\Areas\Customers\Views\Contacts\Customer.cshtml"
Source File: c:\Users\riston\AppData\Local\Temp\Temporary ASP.NET Files\root\c09ffc8d\a8a27bfd\App_Web_customer.cshtml.d9b99660.sjvq2jbh.0.cs    Line: 188

Should be really simple.... cannot find any documentation and the demo is lacking...

How do you set the target color from the helper?

 

Hi,

I have multiple kendo grids on my page and I would like to switch focus between the grids using keyboard.  I tried to follow the below example but it does not work for multiple grids.

https://demos.telerik.com/aspnet-mvc/grid/keyboard-navigation

Below is the current configuration which I am using.
Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)
MVC version: 5.0
IDE: Visual Studio 2015
Browser : Chrome  76.0.3809.100, IE 11.0
.Net Framework: 4.6.2
Programming Language: C#

According to this article (https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/height?&_ga=2.194530788.810043146.1580386923-2007283080.1571831975#making-the-grid-100-high-and-auto-resizable), I should be able to disable scrolling and have no height set on my grid and the grid will automatically have a height tall enough to contain all the rows. This does actually work in Chrome running under Windows 10. However, it does not work in Chrome running under iOS (12 or 13). In an iOS environment the grid has no height at all. 

I've attached an image showing what this looks like running on an iPad 7 iOS 13. All you see is a horizontal line underneath "Certifications". I believe this is the top of the grid. I get the same incorrect results on an Android device as well.