Questions on Kendo UI for jQuery Forum

2 answers

144 views

Validation bug for a Sortable Grid with a Create button and Inline edit mode

I have a grid that is Sortable and has a toolbar with a Create button. The grid's editable mode is set to "inline".

When a user clicks the "Add new row" button a new row is added and is in edit mode.

If, before adding data, the user clicks on a column header the row is added to the grid even though the required fields are empty.

Here is a demo... http://dojo.telerik.com/aQIkE/2

How can I get the validation to fire and cancel the column click?

Thanks,
Don Shrout
<><

Grid

answered on 08 Jun 2015

1 answer

256 views

[Solved] Alternative background for list items

I have a dropdown list and would like to style alternative items with different background colors, is there a way to do it in "CSS", I would try not to use Javascript do it.

Thanks.

DropDownList

answered on 08 Jun 2015

1 answer

712 views

Popup Editor Update/Cancel button

Hi All,

1. Is there a way to remove the "Update/Cancel" button and replace them with a html template?

I tried the following and the buttons are still showing up

editable: {

mode: "popup",

template: $("#myTemplate").html(),

update: false,

destroy: false

},

2. Is there a way to override the Update event of the popup button?

TIA

Grid

answered on 08 Jun 2015

1 answer

105 views

Horizontal Virtual Scrolling

I am evaluating your product and I wondering if you support horizontal virtual scrolling?

I can see that virtual scrolling is implemented for the vertical scroll-bar in the demo examples but I need it to be implemented on the horizontal also.

Is this something that can be done if not already implemented?

Grid

answered on 08 Jun 2015

4 answers

225 views

data-template re rendering on Change

Yesterday I upgraded a site to 2015 Q1 SP2 and started to have problems with a section of a page that was a dynamic bootstrap panel rendered using a data-template.

The Panels expand/collapse as the user clicks on them and inside they can edit the details of a Master Details object.

This worked fine but with 2015 Q1 SP2 when a detail is edited the change event seems to decide to re render the data-template and so the expand/collapse state (which was the css class "in") of the panel is lost.

I created the following test case in the Kendo Dojo and found the problem is not present until 2015 Q1 SP2.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view">
<input data-bind="value: title" />
<div class="panel-group collapsed" data-template="panel-template" data-bind="source: children"></div>
</div>
<script id="panel-template" type="text/x-kendo-template">
<div class="panel panel-default">
<div class="panel-heading clickable">
<b><span data-bind="text: first"></span></b>
</div>
<div class="panel-body collapse">
<input data-bind="value: second" />
</div>
</div>
</script>
<script>
$(document).ready(function () {
var model = kendo.observable({
title: "Header Property",
children: [{ first: "item1", second: "more1" },
{ first: "item2", second: "more2" },
{ first: "item3", second: "more3" }]
});

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

// hook up expand/collapse handlers
$('.panel-heading.clickable').off("click");

$('.panel-heading.clickable').on("click", function (e) {

var panelBody = $(this).closest('.panel').children('.panel-body');
if ($(panelBody).hasClass('collapse') && $(panelBody).hasClass('in')) {
$(panelBody).removeClass('in');
}
else {
$(panelBody).addClass('in');
}
});
});
</script>
</body>
</html>

MVVM

answered on 08 Jun 2015

2 answers

740 views

[Solved] Get Data with Parameter, Filter Client Side

Hi

I would like to load data as soon as a user typed 3 characters of the name. After loading i would like to filter client side if the user enters more characters

I have the following code:

<input type="text" id="txtFilter" onkeyup="fFilterChanged()" />

@(Html.Kendo().Grid<MvcApplication.Models.Customers>()

.Name("gridCustomers")

.DataSource(dataSource => dataSource // Configure the grid data source

.Ajax() // Specify that ajax binding is used

.Read(read => read.Action("Customers_Read", "Home").Data("additionalInfo")) // Set the action method which will return the data in JSON format

.ServerOperation(false)

.PageSize(13)

)

.AutoBind(false)

.Columns(columns =>

{

// Create a column bound to the CustomerCode property

columns.Bound(customer => customer.CustomerCode);

// Create a column bound to the CustomerName property

columns.Bound(customer => customer.CustomerName);

})

.Pageable() // Enable paging

.Sortable() // Enable sorting

.Selectable(n => n.Mode(GridSelectionMode.Single))

)

<script type="text/javascript">

function fFilterChanged() {

if (txtFilter.value.length == 3)

loadGrid();

}

function additionalInfo() {

return {

customerFilter: txtFilter.value

}

function loadGrid() {

var gridDataSource = $("#gridCustomers").data("kendoGrid").dataSource;

gridDataSource.read();

}

This works great so far. Now I would like to filter client side:

if (txtFilter.value.length > 3) {

gridListFilter.logic = "and"; // a different logic 'or' can be selected

gridListFilter.filters.push({ field: "CustomerName", operator: "startswith", value: txtFilter.value });

gridDataSource.filter(gridListFilter);

gridDataSource.read();

filterOn = true;

}

and

if (txtFilter.value.length <= 3) {

gridDataSource.filter([]);

gridDataSource.read();

filterOn = false;

}

now since it seams I have to call the read() method while filtering I automaticly get a new Ajax roundtrip - the Read() method of the grid is called on the Server again.

How can I ensure I only get the data once and then filter client side?

Thanks.

Grid

answered on 08 Jun 2015

2 answers

642 views

[Solved] Kendo MVC Grid : How to create new column and its value is multiply of 2 other columns

Hello Telerik team

I use Kendo MVC grid. My grid "Price", "Quantity" column. I want to add one more column "Total (Price*Quantity)" column. "Total (Price*Quantity)" column

= "Price"*"Quantity".

- I don't want to generate "Total (Price*Quantity)" column in .

- How to use Aggregates to create "Total (Price*Quantity)" column in

Thanks and Best regards

Grid

answered on 08 Jun 2015

2 answers

388 views

[Solved] Kendo UI grid use Datatable can't insert, update, delete data in SQL

Hello Telerik team

I'm using , use DataTable to load data grid.

This is my Index code

@model SystemDataDataTable

@HtmlKendo)Grid<dynamic>()

Name"Grid")

Columnscolumns =>

{

Bound"ID");

Bound"Name");

Bound"UnitPrice")Width100);

Bound"UnitsInStock")Width100);

Command => Edit); Destroy);)Width160);

})

toolbar => toolbarCreate))

)

ed=>ModeGridEditModePopUp))

Filterable)

=>

Ajax)

Modelmodel =>

{

id = ModelPrimaryKey0]ColumnName;

Idid);

(SystemDataDataColumn column in ModelColumns)

{

field = modelFieldcolumnColumnName, columnDataType);

(columnColumnName == id)

{

Editablefalse);

}

})

//Aggregatesa =>

//{

// //Add"UnitPrice", typeofdecimal?))Sum);

// //Add"UnitsInStock", short?))Average)Max);

// Add"Total (Price*Quantity)", short?));

//})

Readread => readAction"GetProductsList", "Home"))

Destroydestroy => destroyAction"DestroyProduct", "Home"))

)

This is my HomeController

;

SystemCollectionsGeneric;

SystemLinq;

SystemWeb;

SystemWebMvc;

KendoMvcUI;

KendoMvcExtensions;

SystemData;

SystemDataSqlClient;

SystemConfiguration;

GridBindingToDataTableControllers

{

class HomeController Controller

{

string str_connection = ConnectionStrings"KloonDB"]ConnectionString;

ActionResult Index)

{

DataTable dt_products = GetProductsList);

Viewdt_products);

}

ActionResult About)

{

View);

}

ActionResult GetProductsList[DataSourceRequest] DataSourceRequest request)

{

DataTable products = GetProductsList);

(requestAggregatesAny))

{

AggregatesEach =>

{

AggregatesEacha =>

{

= productsColumnsMember]DataType;

});

}

JsonproductsToDataSourceResultrequest));

}

ActionResult DestroyProduct[DataSourceRequest] DataSourceRequest request,

)

{

);

//Delete Product at server side

DataTable dt_products = GetProductsList);

// grid

Jsondt_productsToDataSourceResultrequest));

}

DataTable GetProductsList)

{

str_SQLSelectcommand = "SELECT IDNamePriceQuantityStatusIdColor from Tbl_Products";

( = new SqlDataAdapterstr_SQLSelectcommand, str_connection))

{

= new DataTable);

Fill);

FillSchema, SchemaTypeMapped);

;

}

void DestroyProductInDatabase )

{

(SqlCommand command = new SqlCommand))

{

Connection = new SqlConnectionstr_connection);

CommandType = CommandTypeText; //I don't want to use

CommandText = "Delete from [Tbl_Products] where [ProductID] = @ProductID";

command.Parameters.Add(new SqlParameter("@ProductID", SqlDbType.Int)).Value = iProductID;

ExecuteNonQuery);

}

I set breakpoint in VS 2013 and when I click delete button in . It won't jump to breakpoint in VS 2013. When I set breakpoint , it works fine.

Can someone help me why I can't delete data in .

Thank you.

Grid

answered on 08 Jun 2015

2 answers

73 views

[Solved] Need to be able to use enter in textarea grid cell without opening detail row

I've seen this thread: http://www.telerik.com/forums/detail-expands-on-enter

and I am hoping this behavior has changed since or that there is a work around for my case. I have a master grid with some cells having text area editors that can use returns. This worked well until I added a detail template, now when enter is pressed in a master level grid cell, it toggles the detail template. Is there any way to get a return in a top level grid cell without toggling the detail row instead? My only thought for a workaround is a pop up window to edit the cell content. Does anyone have any other suggestions that would keep the editing of the data in the grid cell?

Thank you.

Grid

answered on 08 Jun 2015

1 answer

1.3K+ views

RowTemplate that will look like two rows

Dear Telerik,

I am faced with the fallowing problem, I want to create a row that contains the the tables column values and beneth them another row or what looks like a row but

is not a new TR that contains , a summery/discription of his row.

I did start out with using a RowTemplate that contained to <tr> tags but that creates problems , the only one row is selected at a time and when the second row is selected only it's data is passed to the server.

I found this post

http://www.telerik.com/forums/multiple-line-template-displays-first-data-element-only that touches on the subject and on of the examples of code that does not work is on .

In my case all the data is displayed correctly but the fact that the RowTemplate contains two rows causes problems is there a way to create a false "row" only for presnetation inside one TR.

Yours,

Ariel

Grid

answered on 08 Jun 2015