or
3 answers
191 views
Hello,
I was wondering if there is any trick to enable nested views within a Kendo UI Mobile application. The following code is not running as expected (all the sub-views are loaded at once). The documentation from Kendo UI is not very specific about this.
Regards,
Doru
I was wondering if there is any trick to enable nested views within a Kendo UI Mobile application. The following code is not running as expected (all the sub-views are loaded at once). The documentation from Kendo UI is not very specific about this.
<div data-role="view" id="dashView" data-layout="mobile-view"> <div data-role="view" id="dataA"> <a data-role="button" href="#dataB">A</a> </div> <div data-role="view" id="dataB"> <a data-role="button" href="#dataC">B</a> </div> <div data-role="view" id="dataC"> <a data-role="button" href="#dataA">C</a> </div></div>Doru
Petyo
Telerik team
answered
on
05 Jun 2013
1 answer
155 views
I need to set the value of another column in the grid from a custom drop down editor. If a certain value is selected from the drop down, I would like to set some column values to dynamically chosen defaults. This works well with columns that don't have validation set. However, if I try to set the model data by calling options.model.set('column', newValue) from the event handler in the drop down event, the new value is not bound to the grid cell but the validation message is shown as if I tried to enter a null value.
This works well for model fields without validation rules.
How can I set a value in the data source when validation is present?
This works well for model fields without validation rules.
How can I set a value in the data source when validation is present?
Alexander Valchev
Telerik team
answered
on
05 Jun 2013
1 answer
119 views
hi, i want to make a notification when user get a new messege like outlook mail.
do you have any Suggestion how do to it?
do you have any Suggestion how do to it?
Duke
Top achievements
Rank 1
Rank 1
answered
on
05 Jun 2013
1 answer
400 views
Hello
I am running into a problem using the data field on the transport read. The additionalData function is called only the 1st time the datasource executes read.
I have an event that updates the viewModel and the calls read() on the datasource. I can confirm that it makes a call to the server every time but it only calls additionalData the 1st time.
Here are extracts of the related bits of code.
//in the datasource setup
transport: {
read: {
url: crudServiceBaseUrl + "/NoteSource",
dataType: "json",
data: App.Notes.additionalData(),
cache: false
},
create: {
url: crudServiceBaseUrl + "/Editing_Create",
dataType: "json"
}
}
//in App.Notes
where additionalData is:
additionalData: function () {
console.log("additionalData");
console.log(App.Notes.viewModel.linkedModel());
return { entity: App.Notes.viewModel.linkedModel(), entityId: App.Notes.viewModel.linkedModelId() };
}
in the App.Notes namespace.
and viewModel is:
viewModel: {
linkedModel: ko.observable(""),
linkedModelId: ko.observable(0),
username: ko.observable(""),
noteType: ko.observable(""),
createdAt: ko.observable(new Date())
}
also in the same namespace.
The event handler contains the following that triggers the read and subsequent call to the server:
listView.dataSource.read();
Also just as a side note. This worked when i used the mvc version but I then got a stack overflow when I tried to include a partial of the cshtml page that contains this in my _Layout.
@(Html.Kendo().ListView<TimeTarget.RDM.Core.DataTransferObjects.NoteDto>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.Editable()
.DataSource(dataSource => dataSource
.Model(model => model.Id("NoteId"))
.Create(create => create.Action("Editing_Create", "Note"))
.Read(read => read.Action("NoteSource", "Note")
.Data("App.Notes.additionalData")
) // Specify the action method and controller name
)
.Pageable(paging => paging.Enabled(true))
)
I am running into a problem using the data field on the transport read. The additionalData function is called only the 1st time the datasource executes read.
I have an event that updates the viewModel and the calls read() on the datasource. I can confirm that it makes a call to the server every time but it only calls additionalData the 1st time.
Here are extracts of the related bits of code.
//in the datasource setup
transport: {
read: {
url: crudServiceBaseUrl + "/NoteSource",
dataType: "json",
data: App.Notes.additionalData(),
cache: false
},
create: {
url: crudServiceBaseUrl + "/Editing_Create",
dataType: "json"
}
}
//in App.Notes
where additionalData is:
additionalData: function () {
console.log("additionalData");
console.log(App.Notes.viewModel.linkedModel());
return { entity: App.Notes.viewModel.linkedModel(), entityId: App.Notes.viewModel.linkedModelId() };
}
in the App.Notes namespace.
and viewModel is:
viewModel: {
linkedModel: ko.observable(""),
linkedModelId: ko.observable(0),
username: ko.observable(""),
noteType: ko.observable(""),
createdAt: ko.observable(new Date())
}
also in the same namespace.
The event handler contains the following that triggers the read and subsequent call to the server:
listView.dataSource.read();
Also just as a side note. This worked when i used the mvc version but I then got a stack overflow when I tried to include a partial of the cshtml page that contains this in my _Layout.
@(Html.Kendo().ListView<TimeTarget.RDM.Core.DataTransferObjects.NoteDto>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.Editable()
.DataSource(dataSource => dataSource
.Model(model => model.Id("NoteId"))
.Create(create => create.Action("Editing_Create", "Note"))
.Read(read => read.Action("NoteSource", "Note")
.Data("App.Notes.additionalData")
) // Specify the action method and controller name
)
.Pageable(paging => paging.Enabled(true))
)
Nikolay Rusev
Telerik team
answered
on
05 Jun 2013
2 answers
413 views
Hello,
I am struggling with declarative setting grid column to a external template
Here's my template
and here's the grid declaration
And here's JS Fiddle reproducing my problem
http://jsfiddle.net/malovicn/bSGdW/8/
Anyone knowing how to fix that JS fiddle? :)
I am struggling with declarative setting grid column to a external template
Here's my template
<script type="text/x-kendo-template" id="someTemplate"> <div> <label> ${firstName}</label> <label>${lastName}</label> </div></script><div data-role="grid" data-bind="source: people" data-columns='[ {"field": "firstName", "title": "Full Name", "template": "kendo.template($("#someTemplate"))" }]'></div>http://jsfiddle.net/malovicn/bSGdW/8/
Anyone knowing how to fix that JS fiddle? :)
1 answer
90 views
My html is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" /><link href="../../Content/examples-offline.css" rel="stylesheet" type="text/css" /><script src="../../Scripts/jquery.min.js" type="text/javascript"></script><script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script><script src="../../Scripts/console.js" type="text/javascript"></script></head><body><select id="size"></select><script >$(document).ready(function() {$("#size").kendoDropDownList({dataTextField: "Text",dataValueField: "Value",dataSource: {transport: {read: {dataType: "jsonp",url: "/Grid/GetStateList",}}}});});</script></body></html> And Controller is public JsonResult GetStateList() { List<ListItem> list = new List<ListItem>() { new ListItem() { Value = "1", Text = "One" }, new ListItem() { Value = "2", Text = "Two" }, new ListItem() { Value = "3", Text = "Three" } }; return this.Json(list,JsonRequestBehavior.AllowGet); /* in MVC v3,v2 Json is blocked for GET requests (as you can tell from the error) for security reasons. If you want to override that behavior, check out the overload for Json that accepts a JsonRequestBehavior parameter.*/ } But I am Unable to bind kendo dropdown in case of remote data .In case of local data its working fine .What changes should be done so that kendoDropDownList can be bound ?Thank and Regards,Karan ShahSoftware Engineer,GIPL
Daniel
Telerik team
answered
on
04 Jun 2013
2 answers
1.3K+ views
I am developing an MVC 4 website for a customer and have run into an issue with the dropdownlist.
I have a Grid, bound to my model, and I can see all the data (correctly) in the grid.
The above code loads the grid fine, I can trigger all the actions correctly, and they all work great.
My problem comes in when I edit a row, and the field I need to change is a DropDownList. For this particular issue, it is a list of States. We are using popup edit mode, and have a custom editor template.
This is the Editor Template code.
The control successfully loads the states, and binds to the model, and shows the correct state value, if there is one provided. In our database, the StateId field is Nullable, and I think this is where the problems arise.
For completeness, here is the controller function that populates the state list.
the client.GetStates() returns an IEnumerable<State> collection.
NOTE: This exact same code works in a non-grid view in our MVC project.
Now, when the StateId is populated on load, it will display the correct state in the DropDownList. If I change this state and click the Update button on my popup editor, the Update Action is triggered, model.StateId = NewIDSelected and the change gets saved to the database. Now if the StateId is NULL from the database, obviously no state is selected, but now, if I select a state from the DropDownList, and click the Update button on my editor, the Update Action is not triggered, and no change is saved to the database.
To add to that, if I change any other field on the editor (say change or add the street address) in addition to the State change (from null to a state value), the Update Action is correctly triggered, but the model.StateId = null.
As I stated before, this exact same scenario works perfectly on a view that does not use a grid at all (as a matter of fact the popup editor is an exact duplicate of that view).
Can anyone help me figure out how to fix this? We have got around it by using a plain HTML DropDownList, but it is ugly ugly... but it works.
I am using Chrome, .net Framework 4, kendo Q1 2013
I have a Grid, bound to my model, and I can see all the data (correctly) in the grid.
@(Html.Kendo().Grid((IEnumerable<MyModel>)ViewBag.Model) .Name("Grid") .Columns(columns => { .. removed for brevity .. columns.Command(command => { command.Edit(); command.Destroy(); }); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditorTemplate")) .Pageable() .Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Events(events => events.Error("error_handler")) .Model(model => model.Id(m => m.recordID)) .Create(update => update.Action("Create", "Controller")) .Update(update => update.Action("Update", "Controller")) .Destroy(update => update.Action("Destroy", "Controller")) ) )My problem comes in when I edit a row, and the field I need to change is a DropDownList. For this particular issue, it is a list of States. We are using popup edit mode, and have a custom editor template.
This is the Editor Template code.
@(Html.Kendo().DropDownListFor(m => m.StateId) .Name("StateId") .DataTextField("StateName") .DataValueField("StateId") .DataSource(source => { source.Read(read => { read.Action("GetStatesList", "Controller"); }) .ServerFiltering(true); }) .SelectedIndex(0) .OptionLabel("Select a State") )The control successfully loads the states, and binds to the model, and shows the correct state value, if there is one provided. In our database, the StateId field is Nullable, and I think this is where the problems arise.
For completeness, here is the controller function that populates the state list.
public JsonResult GetStatesList(){ var states = client.GetStates(); return Json(states, JsonRequestBehavior.AllowGet);}NOTE: This exact same code works in a non-grid view in our MVC project.
Now, when the StateId is populated on load, it will display the correct state in the DropDownList. If I change this state and click the Update button on my popup editor, the Update Action is triggered, model.StateId = NewIDSelected and the change gets saved to the database. Now if the StateId is NULL from the database, obviously no state is selected, but now, if I select a state from the DropDownList, and click the Update button on my editor, the Update Action is not triggered, and no change is saved to the database.
To add to that, if I change any other field on the editor (say change or add the street address) in addition to the State change (from null to a state value), the Update Action is correctly triggered, but the model.StateId = null.
As I stated before, this exact same scenario works perfectly on a view that does not use a grid at all (as a matter of fact the popup editor is an exact duplicate of that view).
Can anyone help me figure out how to fix this? We have got around it by using a plain HTML DropDownList, but it is ugly ugly... but it works.
I am using Chrome, .net Framework 4, kendo Q1 2013
Jeff Goldsack
Top achievements
Rank 1
Rank 1
answered
on
04 Jun 2013
12 answers
364 views
Hey everyone!
I was searching all over but couldn't find an answer to my question. I'm initializing an autocomplete widget as the following:
This code is loaded into my DOM as a result of an Ajax request:
in my main (an always loaded) JS file i got:
However, the autocomplete search works perfect. But now I want to populate the fields jtc_cMail and jtc_cPhone with values from my autocomplete request. But either the select: Function is working (not allowed here (guess because MVVM?), also the custom event inject is fireing.
I couldn't find anything how I need to go on. Please help me out.
Greetings
Duke
I was searching all over but couldn't find an answer to my question. I'm initializing an autocomplete widget as the following:
This code is loaded into my DOM as a result of an Ajax request:
<div id="view_ticketCreate"> <form id="jar_ticketing_create"action="" class="k-block jar-container"> <fieldset class="login"> <legend>Kontaktinformationen</legend> <p class="notice">Definieren Sie hier die Kontaktinformationen zu diesem Ticket.</p> <p> <label>Kunde</label> <input data-role="autocomplete" data-bind="source: customers, events{click: inject}" data-text-field="CName" placeholder="Suchen Sie nach dem Kunde" type="text" id="jtc_cID" class="k-textbox sourced"> </p> <p> <label>Kontakt</label> <input type="text" name="jtc_cName" class="k-textbox"> </p> <p> <label>E-Mail</label> <input data-bind="value: cMail" type="text" name="jtc_cMail" class="k-textbox"> </p> <p> <label>Telefon</label> <input data-bind="value: cPhone" type="text" name="jtc_cPhone" class="k-textbox"> </p> <p> <label>Gerät</label> <select name="dID" class="k-textbox sourced"> <option value="000">Nicht geräte spezifisch</option> <option value="001">CFBS01</option> <option value="002">CFBS02</option> <option value="003">CFBS03</option> <option value="004">CFBS04</option> </select> </p> <p> <label>Login</label> <input type="text" name="cLogin" class="k-textbox"> </p> </fieldset></form></div><script> kendo.bind($("#view_ticketCreate"), view_ticketCreate);</script>var view_ticketCreate = kendo.observable({ customers: new kendo.data.DataSource({ transport: { read: { dataType: "jsonp", contentType: "application/json; charset=utf-8" }, parameterMap: function(options, operation) { return { SearchTag: options.filter.filters[0].value } } }, schema: { data: "data" }, serverFiltering: true, dataTextField: "CName", select: function(e){ if (e.item == null) return; var DataItem = this.dataItem(e.item.index()) cPhone: DataItem.Telefon } }), inject: function(e){ alert('ok') }, cPhone: "0123456789", cMail: "asd@asd.de"});I couldn't find anything how I need to go on. Please help me out.
Greetings
Duke
1 answer
149 views
Hello Support:
I'm having conceptual difficulties with how to encapsulate a fetch(). Consider the following:
var getAllProjects = function() {
projectsDataSource.fetch(function() {
var dataView = projectsDataSource.view();
return dataView;
});
};
where projectsDataSource is a Kendo dataSource defined with a remote source. I should say that the inner portion above works flawlessly (by inner portion I mean the part defined as projectsDataSource.fetch(function() { ...}).
However, I decided to encapsulate this functionality in a separate module defined by RequireJS, leading naively to the code above where I declare getAllProjects().
I'm trying to return dataView to the outer function, getAllProjects(), a function that is revealed publicly. All I get back, though, is undefined. It would seem that you're using callbacks, not promises, which appears to be confusing me.
What am I missing here?
Thank you.
I'm having conceptual difficulties with how to encapsulate a fetch(). Consider the following:
var getAllProjects = function() {
projectsDataSource.fetch(function() {
var dataView = projectsDataSource.view();
return dataView;
});
};
where projectsDataSource is a Kendo dataSource defined with a remote source. I should say that the inner portion above works flawlessly (by inner portion I mean the part defined as projectsDataSource.fetch(function() { ...}).
However, I decided to encapsulate this functionality in a separate module defined by RequireJS, leading naively to the code above where I declare getAllProjects().
I'm trying to return dataView to the outer function, getAllProjects(), a function that is revealed publicly. All I get back, though, is undefined. It would seem that you're using callbacks, not promises, which appears to be confusing me.
What am I missing here?
Thank you.
Atanas Korchev
Telerik team
answered
on
04 Jun 2013
3 answers
714 views
I am using Kendo dataSource with transport (read, update, create) functionality. read operation retrieves data and displays it in a Grid. Gird has 3 columns - key, value, and class. Update operation edits a particular row taking in the options object as shown -
parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}
}
The options object above is pre-loaded with the data in the particular row of the grid being edited.
However, for create operation, the options object is pre-set to null for all the fields. Options object is loaded when the user enters values for key and value. The value of class remains the same for all the rows, existing and new. How can I access the grid data (for the value of class) within the the code below?
parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}
if (operation == "create") {
return {key : options.models[0].key, value : options.models[0].value, class : <what code should go here?>}
}
}
parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}
}
The options object above is pre-loaded with the data in the particular row of the grid being edited.
However, for create operation, the options object is pre-set to null for all the fields. Options object is loaded when the user enters values for key and value. The value of class remains the same for all the rows, existing and new. How can I access the grid data (for the value of class) within the the code below?
parameterMap : function (options, operation) {
if (operation == "update") {
return {key : options.models[0].key, value : options.models[0].value, class : options.models[0].class}
}
if (operation == "create") {
return {key : options.models[0].key, value : options.models[0].value, class : <what code should go here?>}
}
}
Petur Subev
Telerik team
answered
on
04 Jun 2013
