The grids I'm working on have quite a bit going on so I have tried to cut the details down to just what seems to pertain to this query.

 

For these grids, which are in InLine mode, there is a dropdown cascade setup so when a location is chosen the state gets set as well though can still be changed.

This is working well for all of the rows which are already in the grid to be updated.

However it is not triggering for a new row before it is submitted into the datasource.

The cascade works off of the onchange event; found this way through the forums here.

 

Here is one of the grid definitions:

The Javascript Event:

 

Is there any way to have this cascade applied to the dropdown in the new row before it is submitted?

 

Also is there is a way to have this new row have some default values (such as dropdown values pre-selected) before "entered" and sent to the controller to be inserted?

Is have exist any solutions autoplay with sound while opening web link with video? Now if we try to play video with sound video will be stopped. If we open without sound video will play good. 

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?