Questions on Kendo UI for jQuery Forum

1 answer

231 views

Kendo ui grid inline editing in tab with Datepicker not select a date value

Hi Guys,

I having an issue where kendo ui inline grid inside tab does not select any value. The Razor page that i have created is not inheriting _layout.cshtml. Would be this an issue since the inline grid date picker selected value when not implementing inside tab. Please advise, thank you.

@(Html.Kendo().Grid<HH.PrductModel>()

.Name("Product")
.HtmlAttributes(new { @Style = "align:center; font-size:10px; width:950px" })
.Columns(columns =>
{

columns.Bound(p => p.ProductId).Width(95);
columns.Bound(p => p.Name).Width(120);
columns.Bound(p => p.Description).Width(150);
columns.Bound(p => p.ExpiryDate).EditorTemplateName("Date").Format("{0:dd/MM/yyyy}").Width(115);

columns.Command(commands => commands.Edit()).Width(100);

})

.ToolBar(toolbar => toolbar.Create())
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)

.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)

)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource

.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ProductId);

})
.Sort(sort => sort
.Add(x => x.Name).Descending())

.Read(read => read.Action("GetProductData", "ProductDetails").Type(HttpVerbs.Get))
.Create("CreateProductList", "ProductDetails")
.Update("EditProductList", "ProductDetails")

)

)

Please advise, thank you

Grid

answered on 24 Apr 2013

3 answers

297 views

Debug Version of Kendo.all script?

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

138 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

186 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

135 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

106 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.0K+ views

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

79 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

583 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

119 views

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