I've tried replicating the example code from the Autocomplete demo page, but for some reason the GetOccupations function in the controller is never called, nor can I see that the onAdditionalData function in the cshtml is ever called either.  The dropdown control is produced on the page, but it contains no contents.  I have created as valid ModelView.  Please help me identify the disconnect that I am having here. Thanks!

Index.cshtml:

@model IEnumerable<HanleighEnrollment.Global.Models.CaseOccupation>
@using Kendo.Mvc.UI

@{
    /**/

    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div class="demo-section k-content">
    @*<div class="control-label col-md-4">*@
    <h4>Select an Occupation</h4>
    @(Html.Kendo().AutoComplete()
                  .Name("occupations")
                  .DataTextField("Occupation")
                  .Filter("contains")
                  .MinLength(3)
                  .HtmlAttributes(new { style = "width:50%" })
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetOccupations", "Test")
                              .Data("onAdditionalData");
                      })
                      .ServerFiltering(true);
                  })
    )
    <div class="demo-hint">Hint: type "war"</div>
</div>
<script>
    function onAdditionalData()
    {
        return
        {
            text: $("#occupations").val()  
        };
    }
</script>

TestController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using HanleighEnrollment.Global.Data;
using HanleighEnrollment.Global.Models;

namespace HanleighEnrollment.Admin.Controllers
{
    public class TestController : Controller
    {
        private EfDbService db = new EfDbService();

        // GET: TestController
        public ActionResult Index()
        {
            return View(db.CaseOccupations.AsEnumerable());
        }

        public JsonResult GetOccupations(string text, int caseId)
        {
            var occupations = db.CaseOccupations.Select(occupation => new Global.Models.ViewModels.CaseOccupationViewModel
            {
                OccupationId = occupation.OccupationId,
                CaseId = occupation.CaseId,
                Occupation = occupation.Occupation,
                JobDuties = occupation.JobDuties
            });

            if (!string.IsNullOrEmpty(text))
            {
                occupations = occupations.Where(p => p.CaseId == caseId && p.Occupation.Contains(text));
            }

            return Json(occupations, JsonRequestBehavior.AllowGet);
         }
    }
}

PDF Viewer is implemented using ASP.NET MVC4.
While watching the demo page, I wrote the following code.

``` index.cshtml
@* scripts for PdfjsProcessing *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>

@* PDF Viewer block *@
<div id="example">
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf =>
        {
            pdf.File(Url.Content($"~/api/PdfViewer/LoadProgress/{progressPdf}"));
        })
    )
</div>
<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>
```

When executed, the PDF Viewer component appears to be working, but the contents are pure white and nothing is displayed.
However, if I click the "Download" button, the file will be saved, and if I open the file, it will have the contents.
Opening the browser's developer tools and looking at the console log showed the following warning:

> Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

Apparently, font processing is not working well.
Where should I set "cMapUrl" and "cMapPacked" ?

I have inline edit feature in my kendo grid, i newly introduce Drag and Drop feature for this grid..But after introduced that feature, My inline edit textbox seems like not editable... It might be due to some style changes... Please help me to find the issue....i attach my jquery code to implement the feature of drag and drop

    $.fn.reverse = [].reverse;
    $(document).ready(function () {
        var mainGrid = $("#grid_Task").data("kendoGrid");
        var mainDataSource = $("#grid_Task").data("kendoGrid").dataSource;

        var selectedClass = 'k-state-selected';
        $(document).on('click', '#grid_Task tbody tr', function (e) {
            if (e.ctrlKey || e.metaKey) {
                $(this).toggleClass(selectedClass);
            } else {
                $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
            }
        });

        mainGrid.table.kendoDraggable({
            filter: "tbody tr",
            group: "gridGroup",
            axis: "y",
            hint: function (item) {
                var helper = $('<div class="k-grid k-widget drag-helper"/>');
                if (!item.hasClass(selectedClass)) {
                    item.addClass(selectedClass).siblings().removeClass(selectedClass);
                }
                var elements = item.parent().children('.' + selectedClass).clone();
                item.data('multidrag', elements).siblings('.' + selectedClass).remove();
                return helper.append(elements);
            }
        });

        mainGrid.table.kendoDropTarget({
            group: "gridGroup",
            drop: function (e) {

                var draggedRows = e.draggable.hint.find("tr");
                var target = mainDataSource.getByUid($(e.draggable.currentTarget).data("uid"));
                e.draggable.hint.hide();
                var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
                    dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"));
                
                if (dropLocation.is("th")) {
                    return;
                }

                var beginningRangePosition = mainDataSource.indexOf(dropGridRecord),//beginning of the range of dropped row(s)
                    rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));//start of the range of where the rows were dragged from

                //if dragging up, get the end of the range instead of the start
                if (rangeLimit > beginningRangePosition) {
                    draggedRows.reverse();//reverse the records so that as they are being placed, they come out in the correct order
                }

                //assign new spot in the main grid to each dragged row
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid"),
                        itemToMove = mainDataSource.getByUid(thisUid);
                    mainDataSource.remove(itemToMove);
                    mainDataSource.insert(beginningRangePosition, itemToMove);
                });


                //set the main grid moved rows to be dirty
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid");
                    mainDataSource.getByUid(thisUid).set("dirty", true);
                });

                //remark things as visibly dirty
                var dirtyItems = $.grep(mainDataSource.view(), function (e) { return e.dirty === true; });
                for (var a = 0; a < dirtyItems.length; a++) {
                    var thisItem = dirtyItems[a];
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
                };

Hello,

We have a batch-edit in-cell edit grid with various validation rules. Because it is in-cell, we have manually implemented validation of our rules in the SaveChanges event as can be seen in the following example:

https://feedback.telerik.com/kendo-jquery-ui/1359255-grid-new-row-validation-when-in-cell-edit-mode
https://dojo.telerik.com/OjuViFub

It loops through each cell on save, entering edit mode to render the input, and running the validation on the input. The issue with this is that one of our custom validation rules is that one of two columns are required (i.e.  A XOR B - you must enter a value for one of them, but not both). The issue arises in the fact that the above manual validation loops through each cell, left to right, top row to bottom. 

For reference, here is the custom validation rule:

 

Because of this, if the user leaves both columns A and B empty, the validation stops on column A (since it appears to the left of B, and the validation reaches it first). Now, the grid is "stuck" in this cell, and the user cannot leave it until they enter a value.

This is problematic, because perhaps the user wanted to enter column B and forgot, but now they are stuck inside the cell for column A. Now they must enter a value for column A so they may leave the cell, cancel all changes, and re-add the record.

Given this information, is there an alternative/work-around to enforce this 'Column A XOR B is required' validation rule whilst using in-cell grid editing with the manual save changes loop logic, which does not result in the described unwanted behaviour?

I've tried replicating the example code from the Autocomplete demo page, but for some reason the GetOccupations function in the controller is never called, nor can I see that the onAdditionalData function in the cshtml is ever called either.  The dropdown control is produced on the page, but it contains no contents.  I have created as valid ModelView.  Please help me identify the disconnect that I am having here. Thanks!

Index.cshtml:

@model IEnumerable<HanleighEnrollment.Global.Models.CaseOccupation>
@using Kendo.Mvc.UI

@{
    /**/

    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div class="demo-section k-content">
    @*<div class="control-label col-md-4">*@
    <h4>Select an Occupation</h4>
    @(Html.Kendo().AutoComplete()
                  .Name("occupations")
                  .DataTextField("Occupation")
                  .Filter("contains")
                  .MinLength(3)
                  .HtmlAttributes(new { style = "width:50%" })
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetOccupations", "Test")
                              .Data("onAdditionalData");
                      })
                      .ServerFiltering(true);
                  })
    )
    <div class="demo-hint">Hint: type "war"</div>
</div>
<script>
    function onAdditionalData()
    {
        return
        {
            text: $("#occupations").val()  
        };
    }
</script>
    function onAdditionalData()
    {
        return
        {
            text: $("#occupations").val() 
        };
    }
</script>

 

TestController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using HanleighEnrollment.Global.Data;
using HanleighEnrollment.Global.Models;

namespace HanleighEnrollment.Admin.Controllers
{
    public class TestController : Controller
    {
        private EfDbService db = new EfDbService();

        // GET: TestController
        public ActionResult Index()
        {
            return View(db.CaseOccupations.AsEnumerable());
        }

        public JsonResult GetOccupations(string text, int caseId)
        {
            var occupations = db.CaseOccupations.Select(occupation => new Global.Models.ViewModels.CaseOccupationViewModel
            {
                OccupationId = occupation.OccupationId,
                CaseId = occupation.CaseId,
                Occupation = occupation.Occupation,
                JobDuties = occupation.JobDuties
            });

            if (!string.IsNullOrEmpty(text))
            {
                occupations = occupations.Where(p => p.CaseId == caseId && p.Occupation.Contains(text));
            }

            return Json(occupations, JsonRequestBehavior.AllowGet);
         }
    }
}

I am currently developing a mobile-first page using a listview with a template of k-card-list so it looks good on a phone(vertical).  I would like to display the same info horizontally(almost like a grid) if the user is on a smaller device.

There is a ton of real estate wasted on a large screen that I would like to take advantage of.

What is the preferred method of doing this?

I have attached a couple of screenshots.

Below is my current template:

<script type="text/x-kendo-tmpl" id="template">
    <div class="k-card-list">
        <div class="k-card" style="min-width: 300px;">
            <div class="k-card-header">
                <div><h4>Service Date: #= kendo.toString(kendo.parseDate(ServiceDate), "MM/dd/yyyy")#</h4></div>
                <div><h4>Store No: #:StoreNumber#</h4></div>
                <div><h4>Store Name: #:StoreName#</h4></div>
                <div><h4>Visit Type: #:VisitTypeName#</h4></div>
            </div>
            <div class="k-card-body">
                <div>Round Trip Miles: ${ ActualTotalMileage == null ? '' : ActualTotalMileage }</div>
                <div>Compensable Miles: ${ ActualCompensableMileage == null ? '' : ActualCompensableMileage }</div>
                <div>Hours: ${ ActualHours == null ? '' : ActualHours }</div>
                <div>Minutes: ${ ActualMinutes == null ? '' : ActualMinutes }</div>
                <div>Comments: ${ CommentText == null ? '' : CommentText }</div>
            </div>
            <div class="k-card-actions k-card-actions-stretched">
                <span class="k-card-action">
                    <span class="k-button k-flat k-primary k-edit-button">
                        # var miles = ActualTotalMileage#
                        # if (miles > 0) { #
                        Update Expense Claim
                        # } else { #
                        Create Expense Claim
                        #} #
                    </span>
                </span>
            </div>
        </div>
        <hr class="k-hr" />
    </div>
</script>

We are using Kendo Grid in cshtml pages with option for inline editing of selective columns.

In inline edit mode, if I change a value of one column and click save without using tab or focusing on any other editable column, the change is not saved.

This issue is happening only in Firefox and Chrome browsers and not in Internet Explorer.

Please advise a solution or probable scenarios when this can happen.

Hello,

I used kendo upload widget in my project MVC project. How to pass the files through ajax to MVC method without submitting the form?  I tried couple of ways but failed to get the files. Could someone help? Please see my sample code below:

 

---------In .cshtml file -----------

            <div >

                @(Html.Kendo().Upload()

                        .Name("files")

                        .Multiple(false)

                        .HtmlAttributes(new { aria_label = "files" })

                        .Validation(validation => validation.AllowedExtensions(new string[] {".xlsx" }))

                )

 

            @(Html.Kendo().Button()

            .Name("UploadFile")

            .Content("Process Files")

            .Events(event => event.Click("onUploadFile "))

            )

             </div>

 

------In . js file:-------

 

Function onUploadFile(){

        var upload = $("#files").data("kendoUpload"),

          files = upload.getFiles();

 

      $.post("TestMethod" ,

      { files: files },  <-----------------------------------I try to pass parameter here.

     function (data, status) {...}

      );

}

 

------In server side:-------

  public JsonResult TestMethod (IEnumerable<HttpPostedFileBase> files)

        {  ....

            return Json(null, JsonRequestBehavior.AllowGet);

        }

HI

I have a question about DateTimePicker.

When the inputed time is 11:15, then dropdown the time list, 
Why the DateTimePicker do not scroll to the nearest time automatically ?

Maybe there have the same problem of TimePicker too.

See attachment.

Best regards

Chris

 

 

 

Need to filter cards in a blade(div) based on the value inside the card. Needed this for ASP.NET MVC.

For example, if we have many cards, base on the value inside the cards, need to filter or sort. Please let know whether is it possible and is there any demo available for that?