Questions on Kendo UI for jQuery Forum

3 answers

435 views

drag and drop bulk upload and validations

I'm using kendo upload and want to know how I can validate the bulk upload on file size. (I don't need to upload files which are sized more than 3 MB, but the other files should upload). I have done it in the following way and it drops out the file which is too big and fails to upload the other documents which comes after the error file.

<div class="demo-section k-content">
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("ChunkSave", "FileUpload")
.Remove("Remove", "FileUpload")
.AutoUpload(true)
.ChunkSize(1100)
)
.Validation(validation => validation.AllowedExtensions(new string[] { ".docx", ".doc", ".pdf" }))
.Validation(validation => validation.MaxFileSize(3145728))
.DropZone(".whole-section")
.Events(events => events
.Cancel("onCancel")
.Clear("onClear")
.Complete("onComplete")
.Error("onError")
.Progress("onProgress")
.Remove("onRemove")
.Select("onSelect")
.Success("onSuccess")
.Upload("onUpload")
)
)
</div>

Let me know if there is a way to only drop the files which are in error state (too big, doc type)

Upload

answered on 19 Jul 2017

1 answer

125 views

what can i do with my grid

i give the second datasource to the grid ，data has show , but the columns no change

i do like this :

if (sjlx.value() == "t_ori_last") {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                type: "POST",
                                url: "../Handler/Handler_SJGL.ashx",
                                dataType: "json",
                                data: {
                                    Ptype: "apmreal",
                                    Pkeyword: $("#txt_keyword").val(),
                                    Pcounty: countyid,
                                    Psjlx: sjlx.value()
                                }
                            }
                        },
                        schema: {
                            model: {
                                fields: {
                                    STATIONCODE: { type: "string" },
                                    RECEIVETIME: { type: "string" },
                                    PM25: { type: "number" },
                                    PM10: { type: "number" },
                                    PM05N: { type: "number" },
                                    PM1N: { type: "number" },
                                    PM25N: { type: "number" },
                                    PM10N: { type: "number" },
                                    TEMPERATURE: { type: "number" },
                                    HUMIDITY: { type: "number" }
                                }
                            }
                        },
                        serverPaging: false,
                        batch: true,
                        pageSize: 25
                    },
                    height: ($(window).height() - 40),
                    sortable: true,
                    reorderable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    //toolbar: [
                    //    {
                    //        name: "create",
                    //        text: "新增用户"
                    //    }
                    //],
                    pageable: {
                        pageSizes: true,
                        buttonCount: 5,
                        input: true,
                        refresh: true,// 是否允许刷新页面
                        numeric: false
                    },
                    change: function (e) {
                        $("#grid").data("kendoGrid").dataSource.read();
                        $("#grid").data("kendoGrid").refresh();
                    },
                    columns: [{
                        field: "STATIONCODE",
                        title: "编号",
                        width: 200
                    },
                    {
                        field: "RECEIVETIME",
                        title: "时间"
                    },
                    {
                        field: "PM25",
                        title: "PM25"
                    },
                    {
                        field: "PM10",
                        title: "PM10"
                    },
                    {
                        field: "PM05N",
                        title: "PM05数量"
                    },
                    {
                        field: "PM1N",
                        title: "PM1数量"
                    },
                    {
                        field: "PM25N",
                        title: "PM2.5数量"
                    },
                    {
                        field: "PM10N",
                        title: "PM10数量"
                    },
                    {
                        field: "TEMPERATURE",
                        title: "温度"
                    },
                    {
                        field: "HUMIDITY",
                        title: "湿度"
                    }]
                });
            }
            else {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                type: "POST",
                                url: "../Handler/Handler_SJGL.ashx",
                                dataType: "json",
                                data: {
                                    Ptype: "apmreal",
                                    Pkeyword: $("#txt_keyword").val(),
                                    Pcounty: countyid,
                                    Psjlx: sjlx.value()
                                }
                            }
                        },
                        schema: {
                            model: {
                                fields: {
                                    STATIONCODE: { type: "string" },
                                    RECEIVETIME: { type: "string" },
                                    PM25: { type: "number" },
                                    PM10: { type: "number" },
                                    TEMPERATURE: { type: "number" },
                                    HUMIDITY: { type: "number" }
                                }
                            }
                        },
                        serverPaging: false,
                        pageSize: 25
                    },
                    height: ($(window).height() - 40),
                    sortable: true,
                    reorderable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: {
                        pageSizes: true,
                        buttonCount: 5,
                        input: true,
                        refresh: true,// 是否允许刷新页面
                        numeric: false
                    },
                    columns: [{
                        field: "STATIONCODE",
                        title: "编号",
                        width: 200
                    },
                    {
                        field: "RECEIVETIME",
                        title: "时间"
                    },
                    {
                        field: "PM25",
                        title: "PM25"
                    },
                    {
                        field: "PM10",
                        title: "PM10"
                    },
                    {
                        field: "TEMPERATURE",
                        title: "温度"
                    },
                    {
                        field: "HUMIDITY",
                        title: "湿度"
                    }]
                });
            }
        }

Grid

answered on 19 Jul 2017

2 answers

157 views

restrict user input to min/max values doesn`t work for initial empty value

Hi kendo team,

I have an optional date input. When user types a date greater than maximum value, change event does not trigger.

This is the sample you can reproduce the issue.

Kind regards,

Oscar.

Date/Time Pickers

answered on 18 Jul 2017

3 answers

2.1K+ views

Validation on data-attributes with empty values

Hi,

We're having some problems with Kendo MVC Validation when data attributes on inputs have no value.

For example (when using FluentValidation integrated with MVC) our inputs are generated as follows:

<input class="form-control text-box single-line k-invalid valid" data-val="true" data-val-number="The field Range1 must be a number." data-val-range="'Range1' must be greater than or equal to ''." data-val-range-max="" data-val-range-min="" data-val-required="'Range1' should not be empty." id="Range1" name="Range1" type="number" value="" aria-required="true" aria-describedby="Range1-error" aria-invalid="true">

The problematic code being: data-val-range="'Range1' must be greater than or equal to ''." data-val-range-max="" data-val-range-min=""

When using the input the error appears no matter what value you enter: Range1' must be greater than or equal to ''.

The reason these attributes are generated without values is because they are dynamic/not constant. The FluentValidation rule is that the Range field must be greater than another field on the screen.

I know that I could write custom validation for this rule but actually I am happy for the input to ignore the validation of the range in this case.

The same application works fine when using jQuery validate (jQuery validate ignores the empty range attributes and the form can be submitted).

How do I stop Kendo Validator attempting to validate this attribute? Shouldn't it ignore the attributes as they are empty (not valid), and treat the input as valid?

(image attached shows the problem)

Regards,

Chris

Validation

answered on 18 Jul 2017

6 answers

473 views

Refreshing the Pager

Here's the scenario: I have a grid that uses a shared DataSource. I add new items to the DataSource programmatically, i.e. mySharedDataSource.add(new myItemModel()), when the user clicks an Add button. The pager updates the item count properly. Now, if the user clicks the Cancel button and I call mySharedDataSource.cancelChanges(), why does the pager not update to show the correct count? Calling the Grid's refresh() function does not correct the displayed count, even though the count of items in the shared DataSource is correct.

It seems wasteful to me to call mySharedDataSource.read() just to update the pager count.

Grid

answered on 18 Jul 2017

3 answers

212 views

click event - rectangle

I have a diagram with multiple shapes. Each shape has multiple rectangles.

1. Is there a way (do you have examples) to identify which rectangle in the shape was clicked in the Click event?

2. Is there any mechanism to store data in the rectangles? i.e. Similar to data-id="5" in standard html. I'm pretty sure I can figure out the Id of each rectangle from the shape.dataItem - but it would be alot easier if I could store data with each rectangle.

Thanks!

Diagram

answered on 18 Jul 2017

2 answers

466 views

Bindings don't refresh if bound to an object

First, please take a look at this simple example

<div id="view">

<span data-bind="text: obj"></span>

<input data-bind="value: obj.name" />

</div>

<script>

$(document).ready(()=> {

let model = kendo.observable({

obj: {

name: "John",

value: 15,

toString:function(){return JSON.stringify(this);}

}});

kendo.bind($("#view"), model);

});

</script>

When html is loaded everything is fine but when field 'name' is changing, refresh is not triggered for the span. How do I trigger it ?

MVVM

answered on 18 Jul 2017

1 answer

120 views

Using same template on template

Hi!, i'm trying to use a template into the same template. This is the code:

json (remote)

{
"_folderName": "Dpto CGE",
"_folders": [
{
"_folderName": "Informes Test",
"_folders": [

],
"_files": [
{
"OriginalPath": "Comparativa de Planificación Mensual con Producción Hasta Marzo 2013.sql"
},
{
"OriginalPath": "Comparativa de Planificación Mensual con Producción.sql"
},
{
"FullPath": "\\\\192.168.10.6\\pfolder$\\jgperez\\Control De Gestión\\Informes Gema\\Obras.xls"
}
]
}

So, the template is calling itself each _folders is found but it doesn't works: : e.bind is not a function

Can i use nested templates with MVVM?

Thanks.

MVVM

answered on 18 Jul 2017

7 answers

1.2K+ views

Select tab by id given on creation

Hello,

I need to somehow select specific tab. I was trying something like:

tabStrip.append(

            [

                {

                    id: "myId1",

                    text:title,

                    contentUrl:url

                }

            ]

        ); ... tabStrip.select("#myId1");

But it did not work. How I can do such thing (e.g. select a specific tab)? Should I count each added tab manually and select by index? How tabStrip.select works?

Thank you.

TabStrip

answered on 18 Jul 2017

1 answer

165 views

Kendo MVVM binding 2 source in same remote template

I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There 2 source binding. Only 1st works i.e know Even if you use <label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label> still result would be same.
Please tell what would be correct way

Note: ALL below code is in 1 file.

<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<div>

<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>

<div style="text-align:center;">

<button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">

<i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save

</button>

<button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>

</div>

</script>