Questions on Kendo UI for jQuery Forum

3 answers

333 views

Hello,

Is there a debug version of the kendo.all script? I keep getting errors, and while it's been with my code, it would be much easier to figure out if I had a debug version? If so, where can I download? Don't see it in asp.net mvc or mobile downloads, didn't try others.

Thanks.

General Discussions

answered on 24 Apr 2013

1 answer

153 views

Kendo Grid Column bound Dropdown Row wise binding

I am facing one issue in implementing kendo grid. We are using MVC4 with
LINQ and Entity framework with SQL 2008 R2 as backend database.

We are using kendo grid in one of the screens. The grid has a dropdown
which has to be dynamically bind for each record on the basis of a LINQ
condition. The output of the query can be different for each record.

Earlier we were binding dropdowns for all records using Viewdata[] but
now we are unable to implement the above requirement. Please help us on
the same.

Attached are the code samples.

Grid

answered on 24 Apr 2013

1 answer

210 views

Add new item is not sending updated model

Hi Kendo Team,

I've a grid that have one ajax call to get the description and display in the grid and also there are two auto increment columns. The problem I'm having with it is when I'm adding a new record, the model is not updated when sending to the controller. This is my view page.

<script type="text/javascript">

function onWorkshopJobRequirementListRequestEnd(e) {

if (e.type == "create" || e.type == "update") {

e.sender.read();

}

function onWorkshopJobRequirementListError(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if (value.errors) {

message += value.errors.join("\n");

}

});

alert(message);

}

function JobRequirementList_Edit(e) {

e.sender.showColumn("REQUIREMENT_DESCRIPTION_CUSTOM");

e.container.find("input[name=SEQUENCE]").css('width', '80px');

if (e.model.isNew()) {

debugger

e.container.find("input[name=SEQUENCE]").val(++currentSequence);

e.container.find("input[name=LINE_NUMBER]").val(++currentLineNo);

}

e.container.find(".k-grid-cancel").bind("click", function () {

e.sender.hideColumn("REQUIREMENT_DESCRIPTION_CUSTOM");

})

}

function JobRequirementList_Databound(e) {

e.sender.hideColumn("REQUIREMENT_DESCRIPTION_CUSTOM");

}

function Requirement_change(e) {

$.ajax({

url: "@Url.Action("GetRequirementDescription", "Shared")",

data: {requirementId: e.sender.value()},

datatype: "json",

type: "POST",

success: function(myData){

$("#REQUIREMENT_DESCRIPTION_CUSTOM").attr('value', myData);

}

});

}

</script>

@(Html.Kendo().Grid<WorkshopJobRequirement>()

.Name("WorkshopJobRequirementList_" + ViewData["WorkshopJobId"])

.Sortable()

.Pageable(paging =>

{

//paging.Messages(message => message.Display("Total standard hours: " + ViewData["TotalTime"].ToString()));

paging.Enabled(true);

paging.Info(true);

paging.PageSizes(true);

paging.Numeric(true);

paging.PreviousNext(true);

paging.Refresh(true);

paging.PageSizes(new int[5] { 5, 10, 15, 20, 25 });

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(15)

.Model(model =>

{

model.Id(p => p.REQUIREMENT_TRANS_ID);

model.Field(p => p.WORKSHOP_TRANSACTION_ID).DefaultValue((int)ViewData["WorkshopJobId"]);

model.Field(p => p.LINE_NUMBER).Editable(false).DefaultValue((short)ViewData["MaxLineNo"]);

model.Field(p => p.SEQUENCE).DefaultValue((short)ViewData["MaxSequence"]);

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

})

.Events(events =>

{

events.RequestEnd("onWorkshopJobRequirementListRequestEnd");

events.Error("onWorkshopJobRequirementListError");

})

.Read(read => read.Action("_WorkshopJobRequirementList", "RepairAndMaintenanceJobRequirementList", new { workshopJobId = ViewData["WorkshopJobId"] }))

.Update(update => update.Action("_WorkshopJobRequirementEdit", "RepairAndMaintenanceJobRequirementList"))

.Create(create => create.Action("_WorkshopJobRequirementCreate", "RepairAndMaintenanceJobRequirementList"))

)

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

.ToolBar(toolbar => toolbar.Create())

.Reorderable(reorder => reorder.Columns(true))

.Filterable()

.Columns(columns =>

{

columns.Bound(p => p.LINE_NUMBER).Title("Line no").Width("80px");

columns.Bound(p => p.SEQUENCE).Title("Sequence").Width("80px");

if (Model.DISPLAY_MM_HOURS_REQUIREMENTS)

{

columns.Bound(p => p.STANDARD_HOURS).Title("Std hours").Width("80px");

//.FooterTemplate("Total standard hours: " + ViewData["TotalTime"].ToString());

}

columns.Bound(p => p.REQUIREMENT_ID).Title("Requirement").EditorTemplateName("_Requirement")

.ClientTemplate("#=REQUIREMENT_DESCRIPTION_CUSTOM#");

columns.Bound(p => p.REQUIREMENT_DESCRIPTION_CUSTOM).Title("Description");

columns.Bound(p => p.PRINT_FLAG).Title("Print")

.Width("80px").HtmlAttributes(new { @style = "text-align:center" })

.ClientTemplate("<input type='checkbox' disabled='disabled' name='suppressed' #=PRINT_FLAG?checked='checked':''# />");

columns.Bound(p => p.COMPLETE).Title("Complete")

.Width("80px").HtmlAttributes(new { @style = "text-align:center" })

.ClientTemplate("<input type='checkbox' disabled='disabled' name='suppressed' #=COMPLETE?checked='checked':''# />");

columns.Command(command =>

{

command.Edit();

}).Width(200).Title("Commands").HeaderHtmlAttributes(new { @style = "text-align:center" });

})

.Events(events => events.Edit("JobRequirementList_Edit").DataBound("JobRequirementList_Databound"))

)

<script type="text/javascript">

var currentSequence;

var currentLineNo;

$(function () {

$('#WorkshopJobRequirementList_@ViewData["WorkshopJobId"]').data("kendoGrid").one("dataBound", function (e) {

currentSequence = e.sender.dataSource.options.schema.model.fields.SEQUENCE.defaultValue;

currentLineNo = e.sender.dataSource.options.schema.model.fields.LINE_NUMBER.defaultValue;

})

</script>

If you see my attached screenshot, you will be able to see the discrepancies.

Please let me know, how can I fix this.

Thank you

Grid

answered on 24 Apr 2013

4 answers

157 views

Migrating from Telerik to Kendo - change event

I am migrating from Telerik NumericTextBox to Kendo and have a question about the change event.

The page has multiple NumericTextBoxes in the grid rows so the change event needs the ID of the control to know which grid row is being changed.

The commented lines were from the Telerik version

function SpinnerQtyChange(e) {
    var target = this.element[0];
    var id = target.id.replace("QtySpinner_", "");
    var quantityJ = $(target).closest("td"); // Up to my <td> (Quantity)
    QtyChange(id, quantityJ, this.value(), e.oldValue);

    //var id = e.target.id.replace("QtySpinner_", "");
    //var quantityJ = $(e.target).parent().parent(); // Up to my <td> (Quantity)
    //QtyChange(id, quantityJ, e.newValue, e.oldValue);
}

The problem is the e.oldValue - where can I find it?

Thanks,
Gary Davis

NumericTextBox

answered on 23 Apr 2013

1 answer

119 views

ComboBox does not work with IE8

We are using the ComboBox and it works fine on IE7/IE9 and other browsers, however it does not let us to click the drop down with IE8, type in is OK.

We are using "Kendo UI Web v2012.2.913" and "jQuery-1.8.2".

Any suggestion?

Thanks a lot,
-T

ComboBox

answered on 23 Apr 2013

1 answer

2.1K+ views

[Solved] Pass parameter to Kendo Window with content of ParitialView

Hello:

I'd like to pass parameter of Kendo Window when a div clicked, the passed parameter will be the value of this Div, the Kendo Window renders from a partial view.

Razor view:

<div id="div1" onclick="divClicked" >50744</div>

@{Html.Kendo().Window()

.Name("win1")

.Visible(false)

.Modal(true)

.Height(400)

.Content(@<text>

@{Html.RenderAction("GetStandard", "Standard", new { eID=???});}

</text>).Render();

}

<script>

$(document).ready(function () {

$("#div1").on("click", divClicked);

});

</script>

<script type="text/javascript">

function divClicked() {

var eID = $(this).text();

$("#win1").data("kendoWindow").center().open();

}

</script>

When the DIV is clicked, the value is saved to eID, then I need to pass this eID to PartialView, like
.../Standard/GetStandard?eID=50744

Please advise,

Thank you,

Window

answered on 23 Apr 2013

2 answers

92 views

Kendo UI Menu custom theme IE 8 glitch

I've modified the Bootstrap theme, essentially just changing some background-colors, gradients, colors, border colors etc. But for some reason, when I use my custom theme on the Kendo UI Web Menu demo, there is a glitch when mousing over items in IE 8. (The original Kendo UI theme and Bootstrap theme work as expected.)

I've been searching through my custom CSS and can't find the issue. I've done a file diff on the CSS themes, inspected elements in Chrome Developer tools, IE 8 Developer tools, and cannot still cannot find the problem.

I have posted a question in StackOverflow:
http://stackoverflow.com/questions/16113226/kendo-ui-menu-custom-theme-ie-8-glitch
StackOverflow question

The StackOverflow question goes into similar detail, with links to these jsBins to test out in IE 8:
jsBin (custom theme - IE 8 glitch)
jsBin (original Bootstrap)

If anyone could help me with this custom theme CSS glitch in IE 8 that would be most helpful.

Thanks!

Menu

answered on 23 Apr 2013

1 answer

613 views

AutoComplete in grid editor

Hi,

We are trying to implement an autocomplete in our grid. The data is correctly bound when a data is selected from the autocomplete box. However, it does not work when the inserted value is not in the autocomplete list. After an invalid data is entered, the data bind of autocomplete box is somehow destroyed?

Is there a way to provide a default value when the user inputs an invalid data? Or is there another approach to use autocomplete in a grid cell? I also attached a partial of our code.

Thanks,
Guillermo

ComboBox

answered on 23 Apr 2013

2 answers

140 views

[Solved] Adding kendo.all-vsdoc.js breaks other widgets

Hi all, I just added kendo.all-vsdoc.js to my project so I can take advantage of the intellisense support it offers, but I just noticed that when I recompiled my application, a number of my other Kendo UI widgets broke! Specifically, it affected date-pickers (which defaulted to the built-in client-side date-picker), dropdowns (which defaulted to simple text fields), and windows (which didn't open at all).

Anyone experienced this before or have any idea why it's happening?

General Discussions

answered on 23 Apr 2013

5 answers

711 views

Bug in hideColumn()

I have finally tracked down a bug in Grid.hideColumn() that has been troubling me for months.

if you call hideColumn() when you grid is not visible because the grid elements is 0 width or height, or otherwise not visible, the column will not be hidden, and the grid will be in an inconsistant state, with columns assuming other columns widths and other weird behavior.

This occurs for me when including a Grid in a Tab that has a fade in animation. If you programatically hide columns in the Grid on document load while the tab is still fading in, the grid will not be visible and hideColumn will fail.

This is caused by the use of the :visible custom jquery selector in the selector to find the grid column header or footer cell.

from the JQuery documentation.

"Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero."

Even though the JQuery documentation states

"During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation."

This does not appear to be the case, at least for a kendoui tab strip builder with ".Animation(a => a.Open(o => o.Fade(FadeDirection.In).Duration(200)));" set as the animation. I assume the above quote does not apply to elements that are hidden because of parent elements animations.

The fix for the issue is to avoid the :visible selector in the Grid.hideColumn() method and use a filter instead.

Change:

hideColumn: function(column) {

.

that.thead.find(">tr>th:not(.k-hierarchy-cell,.k-group-cell):visible").eq(columnIndex).hide();

if (footer) {

that._appendCols(footer.find("table:first"));

footer.find(".k-footer-template>td:not(.k-hierarchy-cell,.k-group-cell):visible").eq(columnIndex).hide();

}

.

to

that.thead.find(">tr>th:not(.k-hierarchy-cell,.k-group-cell)").filter(function () { return $(this).css("display") != "none"; })

.eq(columnIndex).hide();

if (footer) {