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?

I have a grid with several foreign key columns which display combo-box editor templates. The user enters and selects an item, which sets the id on that column for that record in the grid.

If the user unfocuses the cell without selecting an option, the built-in validation message (shown in the attached screenshot) 'X must be a number' appears. This occurs when the input does not load any data (i.e. they type a name that doesn't exist in the database and so auto-complete doesn't find anything). It seems the validation skips the 'required' message and goes to this invalid-type message. We would like to change or bypass this so that the user doesn't see this user-unfriendly message.

Is there a way to (1) somehow force the combo-box to select an option when losing focus in this case where there was no valid auto-complete option (since normally it does auto-select said option), or (2) to somehow override this error message?

When you hover over the legend it displays all the points for the series you are hovering over.  See attached image.  Is there a way to turn this off?

 

In our application we want the filter on a date column to prompt the user for a start date and an end date, with the filter returning rows where the field in question falls between (or on) those two dates.

Initial Approach

Our initial approach was to restrict date types to use gte and lte operators, and add the "extra : true" filterable option on the column. This came close, but presented the following problems: A) Each date input could use either the gte (Start) or lte (End) operator, providing undesired flexibility and the option for the user to create a filter that would never return results, and B) Presented a logical comparison (And / Or) that we don't want.

Better Approach

A better approach was found on this StackOverflow question. This question has an answer by Matthew Erwin that gets us very close: it allows us to completely re-style the filter entirely, so we can present simply a Start Date input and an End date input. However, what I can't get working is associating the right filter operation with the right input (gte for the Start date, lte for the End date). My custom filter is as follows:


With this approach, the Odata filter option is generated for each of the dates, however it uses the eq Equal To operator, so no values are ever returned. We aren't building filters specifically on the data source.Is there a simple way I can associate each of those date inputs with a specific filter operator? Is there a better way to approach this subject? It seems like filtering dates based on a Start - End range would be commonly desired.

Other Details

We are using AngularJS, and WebAPI with Odata.

Hi,

I have an editor grid that has one editable cell. I want that cell to always be the input box (numeric text box in this case) instead of going back to a regular dirty cell after clicking out. So basically always keeping cells in edit mode.How can I achieve this? See attached image for example of what I mean.