Questions on Kendo UI for jQuery Forum

3 answers

289 views

DropdownList cascade doesn't works

Hi,
I'm trying to get my dropdownlist cascade working but I can't figure it out what I missing..

This is my code
JS

$("#BlitzMapInfoWindow_company").kendoDropDownList({

dataTextField: "Text",

// serverFiltering: true,

dataValueField: "Value",

dataSource: {

type: "json",

transport: {

read:

{

url: "../load_geofencing.asmx/GetCompaniesStrings1",

contentType: "application/json; charset=utf-8",

dataType: "json"

}

},

schema: {

data: function (response) { return response.d || {}; }

},

change: function () {

var countries= $("#BlitzMapInfoWindow_country").data("kendoDropDownList");

countries.dataSource.filter({

field: "ParentId",

value: this.value(),

operator: "eq"

});

countries.value(0);

}

});//.data("kendoDropDownList");

$("#BlitzMapInfoWindow_country").kendoDropDownList({

cascadeFrom: "BlitzMapInfoWindow_company",

// cascadeFromFields: "ParentId",

autoBind: false,

//serverFiltering: true,

dataTextField: "Text",

dataValueField: "Value",

dataSource: {

type: "json",

transport: {

type: "json",

serverFiltering: true,

read:

{

url: "../load_geofencing.asmx/GetCountriesStringsBySoc",

contentType: "application/json; charset=utf-8",

dataType: "json"

}

},

schema: {

data: function (response) { return response.d || {}; }

}

});//.data("kendoDropDownList");

WebService

[WebMethod]

[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]

public List<ComboObject> GetCompaniesStrings1()

{

int UserId = Utility.FindUserId();

UserCompaniesHelper UserCompaniesHelper = new UserCompaniesHelper();

List<CompanyEntity> companies = UserCompaniesHelper.GetUserCompanies(UserId);

List<ComboObject> result = new List<ComboObject>();

companies.ForEach(p => result.Add(new ComboObject { Value = p.Code, Text = p.Description }));

return result;

}

[WebMethod]

[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]

public List<ComboObject> GetCountriesStringsBySoc()

{

Exception Exception = null;

int UserId = Utility.FindUserId();

CountryHelper CountryHelper = new CountryHelper();

List<CountryEntity> countries = CountryHelper.GetCountries(UserId, ref Exception);

List<ComboObject> result = new List<ComboObject>();

countries.ForEach(p => result.Add(new ComboObject { Value = p.Id.Value.ToString(), Text = p.CodeAndDescription, ParentId = p.CompanyCode }));

return result;

}

The web service functions work perfecty and the result is:
1.

{"d":[{"__type":"ComboObject","Value":"AAA","Text":"ADMIN AAA","ParentId":null},{"__type":"ComboObject","Value":"BBB","Text":"ADMIN BBB","ParentId":null},{"__type":"ComboObject","Value":"CCC","Text":"ADMIN CCC","ParentId":null},{"__type":"ComboObject","Value":"DDD","Text":"ADMIN DDD","ParentId":null}]}

2.

{"d":[{"__type":"ComboObject","Value":"1","Text":"IT - ITALY","ParentId":"BBB"},{"__type":"ComboObject","Value":"2","Text":"US - UNITED STATES","ParentId":"BBB"},{"__type":"ComboObject","Value":"3","Text":"MX - MEXICO","ParentId":"BBB"},{"__type":"ComboObject","Value":"4","Text":"DO - DOMINICAN REPUBLIC","ParentId":"BBB"},{"__type":"ComboObject","Value":"5","Text":"BR - BRAZIL","ParentId":"BBB"},

{"__type":"ComboObject","Value":"6","Text":"CL - CHILE","ParentId":"BBB"},

{"__type":"ComboObject","Value":"7","Text":"US - UNITED STATES","ParentId":"AAA"},{"__type":"ComboObject","Value":"8","Text":"IT - ITALY","ParentId":"AAA"},{"__type":"ComboObject","Value":"9","Text":"CL - CHILE","ParentId":"CCC"},{"__type":"ComboObject","Value":"10","Text":"US - UNITED STATES","ParentId":"CCC"}]}

The combo company is compiled right but the second combo is empty and I have the following error

TypeError: this.value is not a function

DropDownList

answered on 04 Apr 2014

3 answers

96 views

Kendo UI Grid Edit Popup Issue

I have a page with grid. when I load the page directly, everything works fine. However, when I load the page into the other page, then I click edit button of the grid, the popup this error. I attached my example to reproduce the error. Thanks

Grid

answered on 04 Apr 2014

1 answer

65 views

Kendo Grid changes are not reflected in Source object

My bound objects have setters and while changing values in the grid cells, the setters are not getting called. Why?function PresonDetails(_contactName, _contactTitle, _country, _companyName) {

Object.defineProperties(this, {
"ContactName": {
get: function () {
return this._contactName;
},
set: function (value) {
alert("New ContactName is :" + value)
this._contactName = value; //Setter is not get called when i change the value in grid.
},
enumerable: true,
configurable: true
},
"ContactTitle": {
get: function () {
return this._contactTitle;
},
set: function (value) {
this._contactTitle = value;
},
enumerable: true,
configurable: true
},
"Country": {
get: function () {
return this._country;
},
set: function (value) {
this._country = value;
},
enumerable: true,
configurable: true
},
"CompanyName": {
get: function () {
return this._companyName;
},
set: function (value) {
this._companyName = value;
},
enumerable: true,
configurable: true
}
});

this.ContactName = _contactName;
this.ContactTitle = _contactTitle;
this.Country = _country;
this.CompanyName = _companyName;
}

(function () {
var details = [];
details.push(new PresonDetails("ContactName1", "ContactTitle", "USA", "MICro"));

var $grid = $('#grid');
$grid.kendoGrid({
scrollable: true,
dataSource: details,
groupable: false,
sortable: false,
editable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title",
width: 250
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150,
}]
});
})();
Here is the http://jsfiddle.net/D4g8S/128/

General Discussions

answered on 04 Apr 2014

5 answers

1.4K+ 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

54 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

392 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

118 views

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

220 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

92 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

74 views

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