Now i'm using a datasource like this: (with the parameters to filter hard coded)
$(function () {
$("#scheduler").kendoScheduler({
date: new Date(Date.now()),
startTime: new Date(2013, 5, 13, 9, 0, 0, 0),
height: 800,
timezone: "Etc/UTC",
group: {
resources: ["Rooms"]
},
resources: [
{
name:"Rooms",
title: "Room",
field: "RoomID",
dataSource: {
transport:
{
read: { url: "#Html.Raw(Url.Action("Filter_Rooms", "Room", new{
pPar1= true,
pPar2 = false,
pPar3 = true,
}))", dataType: "json" }
}
}
}
As you can see these paramaters are still hard coded and I want to change them whenever the user wants using checkboxes:
<div class="checkbox">
<label>
<input id="chkPar1" type="checkbox"> Parameter 1
</label>
</div>
<div class="checkbox">
<label>
<input id="chkPar2" type="checkbox"> Parameter 2
</label>
</div>
Filter
I thought while using javascript to check if button is clicked and then store checkbox paramaters in global variables and use these in the transport read of the scheduler but it seems you can't use document.getelementbyId here.
Here they suggested Kendo UI Dynamically Change Datasource String (XML) but that doesn't seem to work for me neither..
var dynamicUrl = "Html.Raw(Url.Action('Filter_Rooms', 'Room', new{pFilter = true, pCapacity = 25,pBeamer = true,pTelevision = false}))', dataType: 'json'"
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.transport.options.read.url = dynamicUrl;
So How can I dynamically change these paramaters or update the entire transport read url?
Regards
Try this:
var pFilter = (document.getElementById("someID").value);
var pCapacity = document.getElementById("someID").value;
var pBeamer = document.getElementById("someID").value;
var pTelevision = document.getElementById("someID").value;
var dynamicUrl = "Html.Raw(Url.Action('Filter_Rooms', 'Room', new{pFilter = " + pFilter + ", pCapacity = " + pCapacity + ",pBeamer = " + pBeamer + ",pTelevision = " + pTelevision + "}))', dataType: 'json'"
There could be some type of string format that you could use like in C# but I'm not sure. Hope this works!
Not sure if it's exactly what you're after, but a good frame of reference might be this example project. It very simply shows how to load new content when you change the view. You may be able to adapt it.
Related
I have an editor field in asp.net which needs to be integer input only between 1 and the size of a list. Atm i got this as code
#Html.Editor("Prioriteit" + item, new { htmlAttributes = new { #type = "number", min = "0",step = "1", value = "0" } })
this isn't to the maximum of the list, I know this. However when i open the page i can still add text.
View with text in editor
Someone can help me out?
thanks in advance
Changed the code for the sake of someone linking it to another question
code
#Html.TextBox("Prioriteit" + item,null, new { htmlAttributes = new { #type = "number", min = "0",step = "1", value = "0" } })
still the same
`
You can also do the following:
<input type="number" min="0" step="1" value="0" name="Prioriteit#item" />
Try this:
#Html.TextBox("Prioriteit" + item, "0", new { #type="number", min = "0", step = "1" })
I am using file uploader with MVC.
Following is my code :
<div class="demo-section k-content">
<input name="files" id="files" type="file" />
</div>
<script>
$(document).ready(function () {
var data = JSON.stringify({
'ReportID': '#(Model.ReportID)',
});
$("#files").kendoUpload({
async: {
saveUrl: '#Url.Action("save", "UserPage")',
//removeUrl: "remove",
autoUpload: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
}//,
});
});
on ActionResult I am using following code :
string fileName = Path.GetFileName(files.FileName);
fileName = model.ReportID + "s" + Guid.NewGuid() + extension;
Everything is working fine except the value of model.ReportID its returning NULL every time.
I am missing something here?
Try something like that:
#(Html.Kendo().Upload()
.Name("uploadFiles")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
.SaveField("files")
//.Batch(true)
.RemoveField("fileNames")
)
.Multiple(true)
.ShowFileList(true)
.Events(events => events
.Error("onUploadError")
.Progress("onUploadProgress")
.Complete("onUploadComplete")
.Success("onUploadSuccess")
.Select("onUploadSelect")
.Upload("onUploadAdditionalData")
.Remove("onUploadRemove"))
)
inside the onUploadAdditionalData event you can pass parameters like:
function onUploadAdditionalData(e) {
e.data = { val1: val1, val2: val2 };
}
your controller action should look like this:
public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string val1, string val2)
{
//do upload handling here
}
If you check documentation http://docs.telerik.com/kendo-ui/api/javascript/ui/upload#configuration-async async.data is undocumented and i am not sure if there is such property.
You can put it directly to saveUrl:
saveUrl: '#Url.Action("save", "UserPage", new { ReportID = Model.ReportID })'
Hypothetical example to illustrate a problem I am having using angular-UI select2. Let's say I have a screen where I want to edit a "game" model. A game, among other things has players. I want to be able to set the players via a select2 drop down menu. Here's some example code:
app.js
$scope.getGamePromise().then(function(results) {
$scope.game = results;
console.log(game.players); //prints [{name:'Joe',age: 15},{name:'Sally',age:16}]
});
$scope.players = [
{
name: 'Joe',
age: 15
},
{
name: 'Fred',
age: 14
},
{
name: 'Sally',
age: 16
},
{
name: 'Lucy',
age: 13
}
]
view.html
<select ngModel="game.players" ui-select2 multiple>
<option ng-repeat="player in players" value="player">{{ player.name }}</option>
</select>
When I want to save this 'game' object, I send the game object up to the server. The server is expecting game.players to be an array of objects. However, what is being sent up is a string. I am moderately familiar with angular, and completely new to select2. How can I get my select2 to set game.players as an array of objects instead of strings?
I guess you find another solution or you don't have the problem anymore. Anyway I post it here:
Use
<input>
instead of
<select>
Example:
<input type="hidden" ui-select2="playersCfg" ng-model="players"/>
And following configuration:
$scope.playersCfg = {
multiple: true,
allowClear: true,
data: { results: Player.query(), text: 'name' },
formatResult: function(item) {
return "<div class='select2-user-result'>" + item.name + "</div>";
},
formatSelection: function(item) {
return item.name;
}
};
Player.query()
is a resource which returns a list of player containing a name (name) and an identifier (id)
Hope it would help somebody!
I am trying to get this basic kendo ui with expandable rows working:
<div id="grid"></div>
<script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
columns: [
{
field: "ProductId",
title: "ProductId"
}
],
dataSource: {
type: "json",
transport: {
read: '#Url.Action("GetData1", "MockForms")'
}
},
height: 450,
sortable: true,
pageable: true,
detailTemplate: "<h2 style='background-color: yellow;'>Expanded!</h2>",
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
});
});
</script>
The json is generated like this:
public ActionResult GetData1([DataSourceRequest] DataSourceRequest request)
{
var list = new List<Product>
{
new Product {ProductId = 1, ProductType = "SomeType 1", Name = "Name 1", Created = DateTime.UtcNow},
new Product {ProductId = 1, ProductType = "SomeType 2", Name = "Name 2", Created = DateTime.UtcNow},
new Product {ProductId = 1, ProductType = "SomeType 3", Name = "Name 3", Created = DateTime.UtcNow}
};
return Json(list.AsQueryable().ToDataSourceResult(request));
}
and seems to be send OK (according to firebug). However, nothing is bound (there are no javascript errors). Any ideas?
PS:
OnaBai's 2nd comment helped me to get this to work. I changed:
return Json(list.AsQueryable().ToDataSourceResult(request));
=>
return Json(list);
which produces this JSON:
[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022051570)\/"}]
Still I would like to use:
return Json(list.AsQueryable().ToDataSourceResult(request));
as this will eventually make paging and sorting easier. It currently produces:
{"Data":[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022186643)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022186648)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022186648)\/"}],"Total":3,"AggregateResults":null,"Errors":null}
I tried to use:
field: "Data.ProductId",
instead of:
field: "ProductId",
in the JavaScript code with no avail.
If you want to use ToDataSourceResult you should use the ASP.NET MVC wrappers. More info is available in the documentation: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
I am trying to integratae my Grails application with extJS.
Below is the code in my edit.gsp file.
<%# page import="tune.Music"%>
<script type="text/javascript">
var ds = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/tune/music/listData'}),
reader: new Ext.data.JsonReader({
results: 'total',
root:'items',
id:'id'
},
[
{name: 'playerId'},
{name: 'playerPrice'}
]
)
});
var cm = new Ext.grid.ColumnModel([
{header: "Player Id", width: 70, sortable:true, dataIndex: 'playerId'},
{header: "Player Price", width: 90, dataIndex: 'playerPrice'}
]);
//cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
renderTo:'grid-example',
width:1300,
height:300
});
</script>
</head>
<body>
<div class="body">
<!--<g:javascript library="examples"/>-->
<!-- EXAMPLES -->
<h1>Ext Grid</h1>
<div id="grid-example"></div>
</div>
</body>
My controller action:
def list={
}
def listData = { def session = sessionFactory.getCurrentSession()
def result = session.createSQLQuery("select player_id from w.music where player_id=('530AS')").list();
def tuneInstanceList = new ArrayList()
result.each
{ def tune = new Tune()
tune.playerId = it
tune.playerPrice = "100"
tuneInstanceList.add(tune) }
def listResult = [total: tunInstanceList.size(), items: tunInstanceList]
render listResult as JSON;
}
The above code works for me.
However, This works in my development environment.
If I run this in another env it doesnt work because of the url that I have hardcoded here viz url: 'http://localhost:8080/tune/music/listData'.
One of the options is to use gsparse. However, i would like to mention a relative urlPath here if thats possible.
What do I replace my urlPath with so that the right action is called even in other environments.
Thanks!
replaced the HttpProxy url as
url: '/tune/music/listData' and it worked.
Thanks!