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?

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.