Questions on Kendo UI for jQuery Forum

9 answers

1.1K+ views

[Solved] Update All Grid Columns with default value

i have a requirement with one grid and dropdownlist.

grid has columns ID, Name, Type , Source, Destination

When the destination is empty or when destination column contains double hyphen "--" i need to update the column value to the selected value of the dropdown (this dropdown is not a part of grid)

I tried to provide defaultValue while declaring the model but it dint work, here is the code snippet

schema: {
model: {
fields: {

DestinationLocator: {

type: "string", defaultValue: $("#myDDL").data("kendoDropDownList").text()
}

}
}

I even tried to loop through the Grid and update the column manually, this worked when there are less number of rows, when the Grid has more than 500 rows, the application does not respond.

var grid = $("#myGrid").data("kendoGrid");
var dataitem = grid.dataSource.data();

var destLocText = $("#myDDL").data("kendoDropDownList").text();
for (var i = 0; i < dataitem.length; i++) {
if (dataitem[i].DestinationLocatorID == null || dataitem[i].DestinationLocatorID == '' || dataitem[i].DestinationLocatorID == '--') {
dataitem[i].set("DestinationLocator", destLocText);
}
}

Please help me.

Grid

answered on 20 Jul 2017

3 answers

342 views

Selected items remain visible in list of options

Since upgrading to Q1 2015 release, our users are complaining that when you select an item from a multi-select, that item remains in the list of items that can be added. Selected items have a class of "k-state-selected" so they show with a different colour background and selecting an item again will remove from the result set, but the behaviour is confusing and annoying to the end-users and I cannot work out how to disable it.

This change is not documented here http://www.telerik.com/support/whats-new/kendo-ui/release-history/q1-2015 and I cannot find any mention of it in the API reference. How do I make multi-selects behave as in the previous release please?

Thanks

MultiSelect

answered on 20 Jul 2017

8 answers

1.1K+ views

Handling dates

My model has date objects dotted all around it, what's the preferred way to handle the formatting of those into a readable format?

I'm not sure how to get the values into a function to return the formatted Date object back...I know I can't databind a format directly, so how do I pass in the data value to a function so it returns what format I want.

data-bind="text: getDate(selectedBlock.data.EndDate)"

I've tried things like the above, but doesn't do anything (so clearly it's wrong)

MVVM

answered on 19 Jul 2017

3 answers

2.5K+ views

[Solved] Resize column programmatically

How can we set a grid column width programmatically (after the grid initialization)?

Grid

answered on 19 Jul 2017

3 answers

316 views

MVC MultiSelect / Virtualization error read pagination on filter

Hello,

When values are already selected, the read filter no longer locates on page 1.
This only happens when values are selected, I get the impression that the read with filter remains on the same page as the read after ValueMapper.

EditorFor

@using Newtonsoft.Json;

@model IEnumerable<int>

@{

Layout = ViewBag.Layout ?? "_bootstrap.cshtml";

ViewData.TemplateInfo.HtmlFieldPrefix = ViewData.TemplateInfo.HtmlFieldPrefix.Replace(ViewData.ModelMetadata.PropertyName,

"").Trim('.');

var propertyName = ViewData["name"] == null ? ViewData.ModelMetadata.PropertyName : ViewData["name"].ToString();

var editorHtmlAttributes = Html.GetUnobtrusiveValidationAttributes(propertyName, ViewData.ModelMetadata);

var htmlAttributes = ViewBag.HtmlAttributes;

if (htmlAttributes != null)

{

if (htmlAttributes is IDictionary<string, object>)

{

editorHtmlAttributes.Merge((IDictionary<string, object>)htmlAttributes);

}

else

{

editorHtmlAttributes.Merge(new RouteValueDictionary(htmlAttributes));

}

editorHtmlAttributes.Merge("class", "form-control");

var populationParams = JsonConvert.SerializeObject(ViewBag.PopulationParams);

}

@(Html.Kendo().MultiSelect()

.Name(propertyName)

.DataTextField("Text")

.DataValueField("Value")

.Filter("contains")

.Value(Model)

.HtmlAttributes(editorHtmlAttributes)

.DataSource(source =>

{

source.Custom()

.ServerFiltering(true)

.ServerPaging(true)

.PageSize(80)

.Type("aspnetmvc-ajax")

.Transport(transport =>

{

transport.Read("_To", "Population", new { area = "Template", populationParams = populationParams });

})

.Schema(schema =>

{

schema.Data("Data")

.Total("Total");

});

})

.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper" + propertyName))

.Events(e =>

{

e.DataBound("onDataBound" + propertyName).Change("onDataBound" + propertyName);

})

)

<div id="count-@(propertyName)" class="text-right">

</div>

<script>

var cookieIds = "templateemailable-@(propertyName)";

function valueMapper@(propertyName)(options) {

$.cookie(cookieIds, JSON.stringify(options.value), { path: '/' });

$.ajax({

url: "@Url.Action("_ToValueMapper", "Population", new { area = "Template", populationParams = populationParams })&cookieIds=" + cookieIds,

type: "GET",

success: function (data) {

options.success(data);

}

})

}

function onDataBound@(propertyName)(e) {

$("#count-@(propertyName)").html(e.sender.value().length);

}

</script>

@Html.ValidationMessage(ViewData.ModelMetadata, new { name = ViewData["name"] })

@if (!string.IsNullOrEmpty(ViewData.ModelMetadata.Description))

{

<p class="help-block">@Html.Raw(ViewData.ModelMetadata.Description.Localize())</p>

}

Controler

public virtual ActionResult _To([DataSourceRequest] DataSourceRequest request, string populationParams)

{

var result = (new ToDataSource()).GetSelectListItems(null, populationParams);

return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

public virtual ActionResult _ToValueMapper(string populationParams, string cookieIds)

{

var values = new List<string>();

if (Request.Cookies[cookieIds] != null)

{

values = Server.UrlDecode(Request.Cookies[cookieIds].Value).JsonToObject<IEnumerable<string>>().ToList();

Request.Cookies[cookieIds].Expires = DateTime.Now.AddDays(-1);

}

var indices = new List<int>();

if (values != null && values.Any())

{

var list = values.ToList();

var source = (new ToDataSource()).GetSelectListItems(null, populationParams);

var index = 0;

foreach (var item in source)

{

if (list.Contains(item.Value))

{

indices.Add(index);

list.Remove(item.Value);

if (!list.Any())

return Json(indices, JsonRequestBehavior.AllowGet);

}

index += 1;

}

return Json(indices, JsonRequestBehavior.AllowGet);

}

Thank you for your help

MultiSelect

answered on 19 Jul 2017

9 answers

1.8K+ views

[Solved] NumericTextBox Localization for currency (Kendo UI for Angular)

I am trying to apply localization for currency using the NumericTextBox, but I am not observing any changes when I apply a locale.

I can't piece together how to apply localization for a specific country/locale (e.g.,Germany; "de") on load.

Is the application of the localization set as an attribute within the <kendo-numerictextbox> tag, or should I be applying the localization within a method.

Here is what I have so far:

@Component({
selector: 'my-app',
template: `
<kendo-numerictextbox format="c3" locale="de" [(ngModel)]="numericValue" [min]="-10" [max]="100" [autoCorrect]="false">
<kendo-numerictextbox-messages
increment="Custom increment"
decrement="Custom decrement"
></kendo-numerictextbox-messages>
</kendo-numerictextbox>
<hr/>

<div>Underlying Value:<input type="number" [(ngModel)]="numericValue"></div>
`
})

export class AppComponent {
public numericValue: number = 987654.321;
}

I would expect the value to be displayed as "987.654,321 €".

NumericTextBox

answered on 19 Jul 2017

8 answers

157 views

TreeList keyboard navigation

I've been trying to get the treelist to respond to keyboard events similar to setting "navigatable" to true in the grid. However, there doesn't seem to be an option for allowing this, making it impossible to navigate the treelist through the keyboard.
As a workaround I tried binding keypress or keydown to try to implement this myself but neither of these events seem to fire (they seem to be absorbed immediately by the treelist).
Is there an option to allow for keyboard navigation or, if not, is there a workaround I could apply?

TreeList

answered on 19 Jul 2017

3 answers

507 views

[Solved] 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

147 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: "湿度"
                    }]
                });
            }
        }