Questions on Kendo UI for jQuery Forum

1 answer

304 views

Kendo UI Professional 2017.1.223

Hi,

I am currently using Kendo UI Professional 2017.1.223 release scripts in a project which is already havind some more references. I am coming across an error

"Object doesn't support property or method 'delayedClick' " in kendo.all.min.js.

Please guide me in resolving this issue.

Thanks in advance.

Data Source

answered on 07 Apr 2017

2 answers

221 views

Putting custom get/set in DataSource Schema or Kendo Grid

Hello,

I'm trying to implement a Kendo grid where two cells update each other when changed. I know I could use a calculated column if only one cell was editable and the other was calculated but I'm lost trying to let them both update each other.

I know I could do this with a custom Javascript class and get/set methods, where the set for one updates the other, and vice versa.

For Example, say I want a grid of product prices like so:

SKU Price Discount Sale Price

001 20.00 10% 18.00

002 10.00 20% 8.00

...

And I want both the Sale Price and the Discount to be editable: Editing the Sale price should update the discount to the calculated % of Price, and updating the Discount will calculate a new sale price. Furthermore, let's assume I don't actually need to save the sale price, I'm really only loading from my .Net server Sku, Price, and Discount and would like get() on Sale Price to calculate the value to display, and set() on Sale Price to calculate the new discount for saving when I submit my page.

What is the easiest way to achieve this? Currently I'm defining a Schema in my DataSource and filling it with values then displaying my Grid.

Grid

answered on 07 Apr 2017

10 answers

290 views

Week Numbers

Hello KendoUI Team

I'd like to know what is best option (if exist one) to have week number in the calendar.
The idea is to have exactly what we have with ASP.NET AJAX controls:
http://demos.telerik.com/aspnet-ajax/calendar/examples/functionality/mainareacustomization/defaultcs.aspx

Regards

Guilherme

Calendar

answered on 07 Apr 2017

2 answers

603 views

Grid edit mode e.container.index with Locked Column return wrong field

HI

I have found a problem about field name in edit mode.

incell mode - edit event :

var grid = e.sender;
var index = e.container.index();
var field = grid.columns[columnIndex].field;

without locked column, the field name is correct :

Click Column2 - index 1 field "Column2" <-- CORRECT

HiddenColumn　Column1　Column2
0　　　　1

but with locked column, the index is wrong, because locked column always
place in the first of the grid.columns collection and get the wrong field :

Click Column2 - index 1 field "HiddenColumn" <-- WRONG

Column1(Locked)　HiddenColumn　Column2
0　　　　　　　　　　　　　　　1

Is there have any solution or fixed in the newest release ?

*Visual Studio 2015 Enterprise Update 3
*UI for ASP.NET MVC Q2 2016(kendo\2016.2.504)

Best regards

Chris

Grid

answered on 07 Apr 2017

1 answer

162 views

Adding a searchbox functionality

Ive been working off this demo

http://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

And I can populate my treeview without any problems

Ive been trying to get the value of a textbox

as you can see the textbox is called searchString

this is my treeview in my cshtml file

@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.DataSource(source =>
{
source.Read(read => read.Action("Read_TemplateData", "Home", new { searchString = "" })) ;
})
)

I dont quite know how to get the contents of that textbox into the searchString = since I usually do this by doing + $('searchString').val() which just concatenates the value on the end of the url.

the read_templateData is also the "standard" action.

I would like to be able to enter a searchtext in the searchbox and only return lines where the .text field contains what is in the searchString textbox. So I would use the .contains(searchString) of a list server side.

any ideas ?

Regards,

Emil

TreeView

answered on 07 Apr 2017

3 answers

742 views

AutoComplete as EditorTemplate for KendoGrid

Hi Telerik Team,

I have a KendoGrid defined as below:

@(Html.Kendo().Grid(Model.ExceptionList)

.Name("ThesholdGrid")

.Columns(columns =>

{

columns.Bound(p => p.StoreID).Title("StoreID").Width(100);

columns.Bound(p => p.StoreName).Title("Store Name");

columns.Bound(p => p.StockCode).Title("StockCode").Width(125).EditorTemplateName("StockCodeAutoComplete");

columns.Bound(p => p.ItemDesc).Title("Item Desc");

columns.Bound(p => p.NoThres).Title("No Stock Threshold");

columns.Bound(p => p.LowThres).Title("Low Stock Threshold");

columns.Command(cmd => cmd.Destroy()).Width(150);

})

.ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Sortable()

.Resizable(resizable => resizable.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model =>

{

model.Id(p => new { p.StoreID, p.StockCode });

model.Field(p => p.StoreName).Editable(false);

model.Field(p => p.ItemDesc).Editable(false);

})

.Update("UpdateInvTransReview", "Inventory")

)

The template for the AutoComplete:

@(Html.Kendo().AutoCompleteFor(m=>m)

.DataTextField("StockCode")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetStockCodes", "Inventory").Data(@"function () {

return {

keyword: ?

};}");

});

})

.HtmlAttributes(new { style = "width:100%" })

.Filter("contains")

.MinLength(3)

.Height(400)

.FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")

.Template("#:data.CombinedDesc#")

)

And the controller for the AutoComplete:

[HttpGet]

public JsonResult GetStockCodes(string keyword)

{

if (string.IsNullOrEmpty(keyword)) return Json(new List<StockCodeDesc>(), JsonRequestBehavior.AllowGet);

var stockCodes = _stockcodeClient.SearchStockCode(keyword);

stockCodes.ForEach(sc => sc.CombinedDesc = sc.Desc + " (" + sc.StockCode + ")");

return Json(stockCodes, JsonRequestBehavior.AllowGet);

}

The model for the AutoComplete:

public class StockCodeDesc

{

public string StockCode { get; set; }

public string Desc { get; set; }

public string CombinedDesc { get; set; }

<other fields>

}

The grid takes data from the model and has inline editing enabled. I would like to have the StockCode field as an AutoComplete and when user selects an item, it will populate the ItemDesc field as well.

From the model you may have guessed that the StockCode field is the text of the AutoComplete, the CombinedDesc is used as template for easier viewing and the Desc is meant to populate the column ItemDesc of the KendoGrid.

My first question is what to put as the "keyword" mapping in the definition of the AutoComplete. I've tried to user parameterMap of the Transport like:

parameterMap: function (data, action) {

return {

keyword: data.filter.filters[0].value

};

}

But the filter is always null.

My second question is how to populate the other field of the grid based on what user selects from the AutoComplete. I figure I should approach this using select event of the AutoComplete but have found no working example.

Thank you,

Michael.

Grid

answered on 07 Apr 2017

3 answers

253 views

toggle, expand, and collapse functions do not trigger corresponding events.

Noticed that when you call either the toggle, expand, or collapse function calls on a splitter, the corresponding event never fires.

Here's a demo of the behavior:

http://dojo.telerik.com/asOJA

You can see in your console when you double click the bar, the event fires. But when you click the button which makes a toggle call, no event is fired.

Splitter

answered on 07 Apr 2017

1 answer

320 views

groupHeaderTemplate when creating a Grid from an HTML Table

HI all,

I've got a simple HTML table that I'm turning into a Grid. I need to Group the Grid. I have all of that working...

When I define the Grouping I choose which Field to Group on. This automatically sorts the data by this Field. However, my requirement to to actually sort by a different Field.

ie: The Grouping Field is text, but the sorting is a different numeric Field.

I can Group by the numeric Field, but then what I want is to use a groupHeaderTemplate to instead display the text of the other Field.

So, my question is twofold.

- Can I Group by my text Field, but sort the Grouping by my numeric Field?
- Or, can I Group by my numeric Field, but display the text of my other Field?

Just remember...my data is sourced from an HTML table.

I hope all that makes sense.

Thanks
John

Grid

answered on 07 Apr 2017

2 answers

412 views

Spreadsheet Regex Validation

Is there a way to apply a regex to a range validation? Here's the gist of what I'm looking for:

var spreadsheet = $("#spreadsheet").kendoSpreadsheet({

rows:10,

columns: 1,

toolbar: false,

sheetsbar: false,

sheets: [

{

rows: [

{

height: 30,

cells: [

{ value: "Decive Password", background: "#001D42", color: "#fff" }

]

}

],

columns: [

{ width: 130 }

]

}

]

}).data("kendoSpreadsheet");

var range = spreadsheet.activeSheet().range("1:1");

range.enable(false);

var columnSens = spreadsheet.activeSheet().range("A2:A10");

columnSens.validation({

dataType: "custom",

from: 'REGEX("^(()|((?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,60}))$")',

type: "warning",

allowNulls: true,

titleTemplate: "Invalid Password",

messageTemplate:

"Passwords must be between 8 - 60 characters long and contain the following: 1 number, 1 uppercase letter, 1 lowercase letter, and 1 special (non letter or number) character."

});

If this is not possible, is there any way to use javascript to validate the value with a regex in the onChange event and manually set the field to have an error if it doesn't match? (See the commented area of the code).

Dojo: http://dojo.telerik.com/AHefE

var regex = new RegExp("^(()|((?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[^\\da-zA-Z]).{8,60}))$");

arg.range.forEachCell(function(row, col, cell){

debugger;

if(!regex.test(cell.value)){

//How to manually show an error in the cell?!?!?

console.log("failed!");

}

});

}

var spreadsheet = $("#spreadsheet").kendoSpreadsheet({

change: onChange,