Questions on Kendo UI for jQuery Forum

11 answers

1.3K+ views

Two grids on single page, one grid filtering other

Hello, I am trying to use two grids on single page, first one is loaded usingkendo wrapper this way

@(Html.Kendo().Grid<CPSkla.Models.WindScreen>()

.Name("GridWinds")

.Columns(columns =>

{

columns.Bound(p => p.Id).Hidden();

columns.Bound(p => p.Brand);

columns.Bound(p => p.Model);

columns.Bound(p => p.Year);

columns.Bound(p => p.Specification);

columns.Bound(p => p.Type);

columns.Bound(p => p.Size);

columns.Bound(p => p.EuroCode);

columns.Bound(p => p.Price);

columns.Bound(p => p.Source);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("WindscreenRead", "Calculation").Type(HttpVerbs.Post))

.Model(model => model.Id(p => p.Id))

)

.Pageable()

.Sortable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row).Enabled(true))

.Events(events=>events.Change("AccessoriesBind"))

)

This works fine, but the other grid is supposed to be empty until user selects row from this first grid, so I am declaring just columns

@(

Html.Kendo().Grid<CPSkla.Models.Accessory>().Name("GridAccessories").Columns(columns =>

{

columns.Bound(p => p.Id).Hidden();

columns.Bound(p => p.Brand);

columns.Bound(p => p.Model);

columns.Bound(p => p.Year);

columns.Bound(p => p.Specification);

columns.Bound(p => p.Type);

columns.Bound(p => p.Size);

columns.Bound(p => p.EuroCode);

columns.Bound(p => p.Price);

columns.Bound(p => p.Source);

})

.Pageable()

.Sortable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.Id))

)

Now I need to fill up the second grid according to selected row in first one, I am using jquery function declared on change event of first grid

<script>

function AccessoriesBind() {

var eucode = "";

var grid = this;

grid.select().each(function() {

var dataItem = grid.dataItem($(this));

eucode += dataItem.EuroCode;

});

alert(eucode);

var gridAcc = $("#GridAccessories").data("kendoGrid");

gridAcc.DataSource = new kendo.data.DataSource({

transport: {

read: "/Calculation/AccessoriesRead/" + eucode,

dataType: "json",

}

});

gridAcc.DataSource.read();

}

</script>

But this last few rows wont fill the table, I tried lots of approaches but always with the same result. My controller is returning valid values in JSON but the table with that return value wont fill up. I tried using generating another kendo grid using just Web UI function kendoGrid on DIV but it didnt wor either. Any advices? Please help.

Grid

answered on 15 Nov 2017

1 answer

1.0K+ views

NumericTextBox reinitialization

Hi guys,

I'm trying to swap my Kendo UI widgets according to a dropdown.

Currently, I call destroy on the widget, and remove all HTML within the container div holding the <input> that was used for the kendo widget. I then append a new div into the container and call the initialization code for kendoNumericTextBox again, but came upon this error:

"Uncaught TypeError: Cannot read property '_move' of undefined".

I have also tried the example provided on the web, that moves the origin input out, before calling destroy on my wrapper, with the same resulting error.

NumericTextBox

answered on 15 Nov 2017

6 answers

1.1K+ views

Grid NoRecordsTemplate Setup

good morning everyone,

I am currently using the licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012) and trying to figure out if the Kendo UI Grid has something similar to the NoRecordsTemplate method in the Telerik Extensions for ASP.NET MVC Grid?

Before this, I was using the licensed version of Telerik Extensions for ASP.NET MVC. Below is the code I had for it. You'll notice, there is a "NoRecordsTemplate" method which I can specify my own custom text if the grid is empty, has no records.

@{Html.Telerik().Grid(Model)

.Name("grdAllUsers")

.DataKeys(keys => keys.Add(k =>

k.Id)

)

.Columns(columns =>

{

columns.Bound(o => o.FirstName)

.Width(150);

columns.Bound(o => o.LastName)

.Width(150);

columns.Bound(o => o.EmailAddress)

.Width(200);

.Width(70)

.HtmlAttributes(new { style = "text-align:center" });

})

.NoRecordsTemplate(@<text>No User records to display.</text>)

.Pageable(paging =>

paging.PageSize(15)

)

.Sortable()

.Filterable()

.Render();

}

Below is my Keno UI Grid code. How does one specify custom text when there are no records for the grid, when the grid is empty?

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

.Name("grdAllUsers")

.Columns(columns =>

{

columns.Bound(o => o.FirstName)

.Width(150);

columns.Bound(o => o.LastName)

.Width(150);

columns.Bound(o => o.EmailAddress)

.Width(200);

.Width(70)

.HtmlAttributes(new { style = "text-align:center" });

})

.Pageable(paging =>

paging.PageSize(15)

)

.Sortable()

.Filterable()

.Render();

}

Thank you very much for your help

Grid

answered on 14 Nov 2017

6 answers

539 views

k-button inline-flex with 2017.3.913

Using k-button with the "min" version of common.css shows buttons with display: inline-flex.

This does not happen with the non-'min' version in the 2017.1.223 src download , "kendo.common.css" file. (2017.3.913 src download doesn't appear to be available yet.)

Don't have time to investigate, just thought I'd mention it to see what others are seeing. The inline-flex attribute seems to make buttons wrap strangely onto new lines.

This is inside a kendoWindow, may not happen in normal circumstances.

The file size difference is very small, 259kb vs 210kb approx., so I'm just using the non-minified version.

Button

answered on 14 Nov 2017

2 answers

243 views

Chnage Grid pager Height

I want to make the height of the pager smaller.

I tried looking for the css property that controls this without luck.

Any help would be appreciated.

Grid

answered on 14 Nov 2017

1 answer

69 views

combobox filtering gives different result on seemingly same conditions

we built an offline webapp placed on our customer pc

in that webpage there's a combobox listing an inventory of products

our users usually focus the filtering input field and then use their barcode reader to input the barcode of the product they're looking for; the barcode reader returns a Carriage Return at the end of the string, so it immediately selects the first good result

today the user called us for an issue: sometimes using the combobox this way selects another product; We remotely connected to their machine and saw that it was as she said;

what we got right now is:

1- it happens only in kendo combobox, because there's another place where we built a javascript search by text field and everything works there
2- there's apparently nothing wrong with the data call
3- it could depend on the machine; her pc is sensibly slower than our (we even saw the search string appear letter by letter in the text field)
4-the issue never happens if we replicate her installation on one of our machines

Thanks in advance for anysuggestion

ComboBox

answered on 14 Nov 2017

4 answers

73 views

make a field with command buttons non resizable

Hi.

There is a good example how to make a column non-resizable.

My grid has a command button plus a template button on the left side of the grid and I don't know how to refer to these buttons to make them non-resizable.

toolbar: [{ name: "create", text: "Add New Asset" }, { template: kendo.template($("#DueDateTemplate").html()) }, { template: kendo.template($("#rightToolbarTemplate").html()) }],
columns: [
{
command: [{ name: "edit", text: { edit: " ", update: " ", cancel: " " } },
{ name: "confirmButton", text: " ", template: "<a class='k-button k-grid-confirmButton' onclick ='onItemConfirm(this)'><span class='k-icon k-i-checkbox'></span></a>" },
], title: "Edit / Confirm", width: "120px", locked: true
},
{ field: "Attested", template: $("#attestedTemplate").html(), title: "Attested", width: "100px", locked: true },

Thank you

Grid

answered on 14 Nov 2017

2 answers

105 views

Incorrect legend in Chart

Hallo everybody, I'd like to ask for Kend UI charts. We used to use components from v2017.1.223 but after last update (v2017.3.913), we have a problem with chart legends. They start to display incorrectly: something like depressed texts and pictures in the left corner.
Thanks

Charts

answered on 14 Nov 2017

1 answer

121 views

Validation & Frozen Columns

If you add validation to a certain column (range.validation() ) to add a dropdown list to a column and this column happens to be the last column which is frozen, then the dropdown arrow is not visible when you click in the column.

Ie,

frozenColumns(2);

activeSheet.range("B2:B2").validation()

Spreadsheet

answered on 13 Nov 2017

3 answers

1.2K+ views

Capture a tab keydown event in a Grid inplace edit cell

Hi

I have a grid that has inplace editing enabled. I would like to capture the tab event on one specific cell's input. I've added this to my view:

$(document).ready(function () {
var grid = $("#ItemsGrid");
$(document).on("keydown", "input#UnitPrice", function (e) {
console.log("keydown on input UnitPrice");
var code = e.keyCode || e.which;

if (code === 9) {
console.log("Tab");
}
});
});

however, I find that "Tab" is never logged to the console. It seems that it's getting suppressed by kendo.js (at least, thats what I can figure out by poking around in the debugger...)

Is there a better way to capture keydown events in a specific edit cell?

Grid

answered on 13 Nov 2017