Questions on Kendo UI for jQuery Forum

5 answers

1.6K+ views

Make grid fields required when using DropDownList

I have an inline editable grid with one of the columns rendered as a DropDownList (options from another remote datasource)

I've set the validation properties in the grid's schema so that the field attached to the dropdown is required, but htis isn't working. Users are able to just skip past the dropdown and save (or at least try to) the record.

Am I missing something?

Thanks

Grid

answered on 03 Apr 2014

1 answer

72 views

no refresh grid and others elements in second using method - layout.showIn("#content", view);

<div id="app"></div>

<script>

    var view = new
kendo.View("<span>Foo</span>");

    var layout = new
kendo.Layout("<header>Header</header><section
id="content"></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);

</script>

[14:11:51] Andrzej Panczenko: <div id="app"></div>

<script>

    var view = new
kendo.View("<span>Foo</span>");

    var layout = new
kendo.Layout("<header>Header</header><section
id="content"></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);

</script>

Templates

answered on 03 Apr 2014

11 answers

434 views

post viewmodel with jquery for grid

Hello,

I have a grid on a partial view which is loaded through jquery/json. The delete is handled through the grid with jquery/json. Previously I was posting the partial view to do the add and then reload the grid. Now I need a button on the partial view that does the add for the grid but does not submit the whole partial view. I have it working by passing the data through variables but I would like to pass the view model instead. Is there a way to do this through jquery?

Here is my current code:

Partial View:

@model PASS.ViewModels.Proposals.RequiredViewModel

@using (Ajax.BeginForm("_Required", "Proposals", new AjaxOptions { UpdateTargetId = "requiredReturnMsg", HttpMethod = "Post", OnComplete="onDataUpdated()" }))

{

@Html.HiddenFor(model => model.Proposal_ID, Model.Proposal_ID)

<div class="editor-container">

<div class="proposal-info">

<p>User Facility: @Html.DisplayFor(model => model.User_Facility_ID)</p>

<p>Proposal Type: @Html.DisplayFor(model => model.Proposal_Type)</p>

<p>Proposal ID: @Html.DisplayFor(model => model.Proposal_ID)</p>

</div>

<br class="clear" />

<div class="editor-label">

@Html.Label("Primary Field of Research:")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.Research_Field_ID, new SelectList(Model.ResearchFields, "Value", "Text"), "(Select One)")

@Html.ValidationMessageFor(model => model.Research_Field_ID)

</div>

<br class="clear" />

<br />

<div class="editor-label">

@Html.Label("Funding Source")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.Funding_Source_ID, new SelectList(Model.FundingSources, "Value", "Text"), "(Select One)")

@Html.ValidationMessageFor(model => model.Funding_Source_ID)

<input type="button" id="AddFundingSource" value="Add Funding Source" />

</div>

<br class="clear" />

<div class="editor-label">

@Html.Label("Specify (only if requested)")

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.Funding_Specify, new { style = "width: 350px;" })

@Html.ValidationMessageFor(model => model.Funding_Specify)

</div>

<br class="clear" />

<br />

<p><input type="submit" value="Save" /></p>

<br />

@(Html.Kendo().Grid<PASS.ViewModels.Proposals.FundingSourcesViewModel>()

.Name("gridFundingSources")

.Columns(columns =>

{

columns.Bound(o => o.FundingSourceDescription).Title("Funding Source");

columns.Bound(o => o.Funding_Specify).Title("Specifics");

columns.Command(command => { command.Destroy(); }).Width(90);

})

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(o => o.ID))

.Read(read => read.Action("GetFundingSources", "Proposals", new {proposalID = Model.Proposal_ID}))

.Destroy(destroy => destroy.Action("DeleteFundingSource", "Proposals"))

)

<br />

<div id="requiredReturnMsg"></div>

</div>

}

<script type="text/javascript">

$(document).ready(function () {

$("#AddFundingSource").click(function () {

var proposalID = $("#Proposal_ID").val();

var fundingSourceID = $("#Funding_Source_ID").val();

var fundingSpecify = $("#Funding_Specify").val();

$.post('/Proposals/AddFundingSource', { proposalID: proposalID, fundingSourceID: fundingSourceID, fundingSpecify: fundingSpecify }, function (data) {

onDataUpdated();

});

function onDataUpdated() {

var grid = $("#gridFundingSources").data("kendoGrid");

grid.dataSource.read();

}

</script>

Controller:

[HttpPost]

public ActionResult AddFundingSource([DataSourceRequest]DataSourceRequest request, FundingSourcesViewModel vm, int proposalID, int fundingSourceID, string fundingSpecify)

{

using (var context = new PASSEntities())

{

var model = new Proposal_Funding_Sources()

{

Proposal_ID = proposalID,

Funding_Source_ID = fundingSourceID,

Funding_Specify = fundingSpecify

};

context.Proposal_Funding_Sources.Add(model);

context.SaveChanges();

}

return Json(new[] { vm }.ToDataSourceResult(request));

}

I would like to do this just by passing the view model but I don't know if this is possible.

Thanks,

Steve

Grid

answered on 03 Apr 2014

3 answers

144 views

[Solved] kendo mobile grid - under adaptive rendering

Hello,

I am using the grid in a mobile app. Now one thing I found is that it requires kendo.all.min.js which of course does not exist in the mobile js folder.
I had to use the full blown kendo ui file. The downside to that is that now all elements used have both k- and km- classes injected into them.
if you check the index1 screenshot attached and look at the footer element you will see both km-widget and k-widget and a few other k- classes.
This isn't the only example, all buttons and inputs are in exactly the same situation.

The index page uses the following files and they are the latest version from Q1 2014 :

<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />

<script src="@GlobalVal.__cdnPath/js/Scripts/kendo-mobile/2014.1.318/jquery.min.js"></script>
<script src="@GlobalVal.__cdnPath/js/Scripts/kendo-mobile/2014.1.318/kendo.all.min.js"></script>
<script src="@GlobalVal.__cdnPath/js/Scripts/kendo-mobile/2014.1.318/kendo.binder.min.js"></script>

General Discussions

answered on 03 Apr 2014

3 answers

312 views

How to validate combobox

Assume that a combobox has data = {1,2,3}
when it`s written "4" in combobox, it`s accepted.
There should be a "mustMatch: true" option.
Is there a way to prevent false inputs?
DropdownList is not appropriate.
Thank you.

ComboBox

answered on 03 Apr 2014

1 answer

102 views

Globally control font-size and family for multiple charts/graphs?

Hi I'm quite new to DataViz but loving it so far.

I have multiple charts across multiple pages and I was wondering if there is a place where I can set some default settings for every graph on every page site wide?

title: {
    .....
    font: "12px sans-serif"
    .....
},

So instead of setting the above on every graph, is there a place where I can set it once and every graph will adopt this setting unless specifically overidden?

Thanks,
-Grant

-Grant

General Discussions

answered on 03 Apr 2014

2 answers

88 views

[Solved] MVVM Binding

I have a date field:

<input name="myDate" type="date" data-bind="value: myDate, click: getDate" />

I'm doing this because the version of Android webkit doesn't have a datepicker and acts like a text field. The getDate function opens a dialog box to capture the date and updates the date field to simulate user input:

$(currentField).val(yyyy+"-"+mm+"-"+dd);

The new date value is reflected onscreen on the page.

However, the new date value doesn't reflect on the view model.

Any ideas why? Is there a binding conflict? How do I avoid it?

Thanks.

General Discussions

answered on 03 Apr 2014

1 answer

121 views

Kendo Grid Virtualization killed with CSS style

I've been trying to track down a performance issue we are seeing with the kendo grid when using client side binding with virtualization turned on. After much trial and error I have found the cause to be one simple css style. When applied the grid dies. My findings are in Chrome and I have not tested any other browser.

Plunker: http://plnkr.co/edit/EDFS3Z?p=preview

This shows the grid capable of loading 1700 odd rows fine, it can sort and filter with good performance due to the option of scrollable: { virtual: true } and pageSize: 50.

When you un-comment the line /*border-bottom: 1px solid #c5c5c5;*/ in the index.html file you will see the problem, the plunker may not respond or it will and the grid will be extremely slow.
We has this line in our theme and it was killing our grids, when you turn virtualization off it works but then we have other performance issues.

Anyone else seen this? very hard bug to find :o

Grid

answered on 03 Apr 2014

2 answers

214 views

[Solved] Grid with drag & drop issue

Hello,

I am using a kendo draggable over a grid so i can reorder the rows.
The code is similar to the following:

grid.table.kendoDraggable({

filter: "tbody > tr",

group: "gridGroup",

threshold: 100,

     axis: "y",

hint: function (e) {

return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');

}

});

Problem is, that inside the grid i have a column with textboxes and the focus for this has stopped working. Is there any way i could fix this?

Thank you,
Cosmin

Grid

answered on 03 Apr 2014

6 answers

110 views

A simple line, difficult to remove.

Hi everybody,

I'm very stucked for a very simple thing, I cannot remove the line of the bottom of the drawer in my app (The one hilight yellow).

Is anybody as any idea? I try everything, remove css, add css, nothing works... It drives me crazy :/

Thank you very much for your help.

General Discussions

answered on 03 Apr 2014