I need a picture in combobox but I have only path
var files = Url.Content("~/Content/skin/Simple.png");
#(Html.Telerik().ComboBox()
.Name("ComboBox")
.BindTo(files.Select(f => new SelectListItem { Selected = false, Text = f.ToString(), Value = "" }))
)
thank you but if I need to show all pictures in folder
string searchFolder = Url.Content("~/Content/skin/");
var filters = new[] { "jpg", "jpeg", "png", "gif", "tiff", "bmp" };
var files = Some Class.GetFilesFrom(searchFolder, filters, false);
there are my full code
controller
public ActionResult Combo()
{
return View();
}
model
public class Combo
{
public static string[] GetFilesFrom(string searchFolder, string[] filters, bool isRecursive)
{
var filesFound = new List<String>();
var searchOption = isRecursive ? SearchOption.AllDirectories : SearchOption.TopDirectoryOnly;
foreach (var filter in filters)
{
filesFound.AddRange(Directory.GetFiles(searchFolder, String.Format("*.{0}", filter), searchOption));
}
return filesFound.ToArray();
}
}
and View
#using TETRA.RS.WWW.UI.Models
#{
string searchFolder = Url.Content("~/Content/skin/");
var filters = new[] { "jpg", "jpeg", "png", "gif", "tiff", "bmp" };
var files = Combo.GetFilesFrom(searchFolder, filters, false);
}
#(Html.Telerik().ComboBox()
.Name("ComboBox")
.BindTo(files.Select(f => new SelectListItem { Selected = false, Text = f, Value = "" }))
)
And I see only full path in combobox
And I do not Know how many pictures in a folder
There are different ways of adding images to an item selectable from a radcombobox, each has their benefits and the most suitable can only be defined by your requirements.
The easiest way is to assign a value to the ImageUrl attribute.
(Telerik Documentation: http://www.telerik.com/help/aspnet-ajax/combobox-appearance-item-images.html)
Alternatively you could modify the item template. (Telerik Demo: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx)
I have used Kendo UI
I have a folder with pictures and I don't Know how much there are
I need to get all the pictures and use in comboBox
Method finds all pictures
public static string[] GetFilesFrom(string searchFolder, string[] filters, bool isRecursive)
{
var filesFound = new List<string>();
var searchOption = isRecursive ? SearchOption.AllDirectories : SearchOption.TopDirectoryOnly;
foreach (var filter in filters)
{
filesFound.AddRange(Directory.GetFiles(searchFolder, String.Format("*.{0}", filter), searchOption));
}
return filesFound.Select(Path.GetFileName).ToArray();
}
SettingsController
public ActionResult Theme()
{
return View();
}
public JsonResult ThemeJson()
{
string searchFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Content\\themes\\skin");
var filters = new[] { "jpg", "jpeg", "png", "gif", "tiff", "bmp" };
var files = Tools.GetFilesFrom(searchFolder, filters, false);
return Json(files.Select(f => new { Id = f, Name = Path.GetFileNameWithoutExtension(f) }));
}
and View
#using Kendo.Mvc.UI
#(Html.Kendo().ComboBox()
.Name("customers")
.DataTextField("Name")
.DataValueField("Id")
.HtmlAttributes(new { })
.DataSource(source => source.Read(read => read.Action("ThemeJson", "Settings").Type(HttpVerbs.Post)))
.Filter("startswith")
.Height(300)
.Template("<img src=\"" + Url.Content("~/Content/themes/skin/") + "${data.Id}\" alt=\"${data.Id}\" />" +
"<dl>" +
"Name theme: ${ data.Name }" +
"</dl>")
)
also you need add reference kendo.all.min.js and Kendo.Mvc.UI
Related
I have a simple list with 108 items, this code was working until today, but some how stop working with the message in the Title.
I'm only passing a simple CAML but I can´t ride of this error.
Anyone have a Suggestion? this is annoying.
private static int GetLookupCity(string city)
{
var oList = Ctx.Web.Lists.GetByTitle("City");
var camlQuery = new CamlQuery
{
ViewXml = "<View><Query><Where><Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">" + city + "</Value></Eq></Where></Query></View>"
};
var listItems = oList.GetItems(camlQuery);
Ctx.Load(listItems,
items => items.Include(
item => item["ID"],
item => item["Title"]));
Ctx.ExecuteQuery();
foreach (var oListItem in listItems)
{
FieldLookupValue lv = new FieldLookupValue
{
LookupId = int.Parse(oListItem["ID"].ToString())
};
return lv.LookupId;
}
Ctx.Dispose();
return 0;
}
I I'm using this in an Excel Addin, so It's not thread safe. The only way I can put this work was to use the Garbage Collector in all methods.
private static int GetLookupCity(string city)
{
var oList = Ctx.Web.Lists.GetByTitle("City");
var camlQuery = new CamlQuery
{
ViewXml = "<View><Query><Where><Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">" + city + "</Value></Eq></Where></Query></View>"
};
var listItems = oList.GetItems(camlQuery);
Ctx.Load(listItems,
items => items.Include(
item => item["ID"],
item => item["Title"]));
Ctx.ExecuteQuery();
GC.Collect();
var queryable = listItems.ToList().FirstOrDefault();
FieldLookupValue lv = new FieldLookupValue
{
LookupId = int.Parse(queryable[0]["ID"].ToString())
};
return lv.LookupId;
Ctx.Dispose();
GC.Collect();
return 0;
}
List<string> _columns = new List<string>() { "Kurator", "Filial", "Klient", "Saldo", "Docs", "no_Docs", "Change", "Status" };
var columns = cols.Select(p => new {
data = p.ColumnName });
Tis gives me an array of objects JsonResult: data:Kurator, data:Filial etc.
Here is data = constant. How i can use it dynamically from another List???
So i need data from two list of objects
List<string> list1 = new List<string>() { "lst1-1", "lst1-2", "lst1-3" };
List<string> list2 = new List<string>() { "lst2-1", "lst2-2", "lst2-3" };
var columns = cols.Select(p => new {
lst1-1= lst2-1 });
To get in return Json(columns, JsonRequestBehavior.AllowGet);
columns = array of (lst1-1:lst2-1,lst1-2:lst2-1, lst1-3:lst2-1)
i`m already break my head!!!
try this:
var columns = from l1 in list1.Select((val, index) => new { val, index })
from l2 in list2.Select((val, index) => new { val, index })
where l1.index == l2.index
select l1.val + " : " + l2.val;
In Extjs, I want to know whether I can restrict the dragging of elements within a specific x,y co-ordinates, just like an option, containment in jQuery-UI.
Currently this is my code:
abc.prototype.initDrag = function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
containerScroll : false,
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
var abcDragZone = v.dragZone ; //Ext.getCmp('idabcDragZone');
var widthToScrollV = $(window).width()-((columnIndex-1)*100);
var widthToScrollH = $(window).height()-((5-rowIndex)*30);
abcDragZone.setXConstraint(0,widthToScrollV);
abcDragZone.setYConstraint(widthToScrollH,0);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
def.scriptGrid.isDraggableForObject = false;
def.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = "\$" + abc.grid.getColumnModel().getColumnHeader(columnIndex);
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
But the problem is that the initdrag is called when the csv sheet is added to DOM. Only when its added that element can be accessed and the individual cells' drag limits can be set. So once I add a csv, the limits are not getting set. If I add it again to DOM then the limits work. Is there an option like the jQuery UI containment for draggable, here in extjs?
edit:
I even tried :
constrainTo( constrainTo, [pad], [inContent] )
body had an id of #abc
when I tried with
dragZoneObj.startDrag = function(){
this.constrainTo('abc');
};
which is a method of the DragZone class. It still did not cover the whole body tag.
qx.ui.mobile.list.List seems not to support the qx.data.controller.List.
Is there another way to add a delegate for createItem? I tried to add the create delegation on both classes, but createItem was not invoked.
Here is an example, how to use databinding with lists:
/**
* Creates a list and returns it.
*/
__createListDataBindings : function() {
var self = this;
var list = new qx.ui.mobile.list.List({
configureItem : function(item, data, row)
{
var stopCount = self.getListData().getLength()-row;
item.setTitle("Stop #"+stopCount);
item.setSubtitle(data);
}
});
this.bind("listData", list, "model");
return list;
},
ListData is a class property:
properties :
{
// overridden
listData :
{
init : new qx.data.Array(),
nullable : true,
event : "updateListData"
}
},
I'm finding it difficult to explain in words, so here's a snippet of code I'm trying out but Firefox/firebug goes into tailspin!
I'm trying to follow this and this as a guide. What I'm trying to do here is
new MyObject.Method('string',optionsArray);
optionsArray items are iterated and saved using the prototype function Set()
if(typeof(MyObj) == 'undefined') MyObj= {};
MyObj.Method = function initialise(id,options)
{
this.id = id;
this.options = options;
this.properties ={};
for (var i = 0; i < this.options.length; i++) // =>options.length=2 (correct)
{
var obj = this.options[i];
//get the keynames, pass with values to Set() to update properties
for (var keys in obj)
{
console.log(keys); //=> correctly prints 'property1' and 'currentValue'
this.Set(keys,obj); //=> this is i guess where it enters a loop?
}
}
}
//sets properties
MyObj.Method.prototype.Set = function (name, value)
{
this.properties[name.toLowerCase()] = value;
}
and in my html page script block, i have
window.onload = function () {
var options = [
{ property1: {
show: true,
min: 0,
max: 100
}
},
{
currentValue: {
show: true,
colour: 'black'
}
}
];
var myObj = new MyObj.Method('someDivId',options);
}
please advise if I'm over complicating the code. I think checking for hasOwnProperty would help.
This should be a cleaner way of achieving what you want:
function MyObj(id, options) { // a function that will get used as the constructor
this.id = id;
this.options = options;
this.properties = {};
this.set(options); // call the set method from the prototype
}
MyObj.prototype.set = function(options) { // set the options here
for(var i = 0, l = options.length; i < l; i++) {
var obj = this.options[i];
for(var key in obj) {
if (obj.hasOwnProperty(key)) { // this will exclude stuff that's on the prototype chain!
this.properties[key] = obj[key];
}
}
}
return this; // return the object for chaining purposes
// so one can do FooObj.set([...]).set([...]);
};
var test = new MyObj('simeDivId', [...]); // create a new instance of MyObj
test.set('bla', [...]); // set some additional options
Note: For what hasOwnProperty is about please see here.
I made a declaration for MyObj and removed the function name initialise since you're obviously declaring this function to be a property of MyObj. Your final code will then be like below, and that runs for me just fine. Please note that you cannot actually call the function until after you declare the prototype function because else the object will have no notion of the Set function.
var MyObj = {};
MyObj.Method = function (id,options)
{
this.id = id;
this.properties ={};
for (var i = 0; i < options.length; i++) // =>options.length=2 (correct)
{
var obj = options[i];
//get the keynames, pass with values to Set() to update properties
for (var keys in obj)
{
console.log(keys); //=> correctly prints 'property1' and 'currentValue'
this.Set(keys,obj); //=> this is i guess where it enters a loop?
}
}
}
MyObj.Method.prototype.Set = function (name, value)
{
this.properties[name.toLowerCase()] = value;
}
var options = [
{ property1: {
show: true,
min: 0,
max: 100
}
},
{
currentValue: {
show: true,
colour: 'black'
}
}
];
var myObj = new MyObj.Method('someDivId',options);
var MyObj = {};
MyObj.Method = function initialise(id,options) {
this.id = id;
this.options = options;
this.properties = {};
for (var i = 0; i < this.options.length; i++)
{
var obj = this.options[i];
for (var keys in obj) {
this.Set(keys,obj[keys]);
//*fix obj => obj[keys]
// (and it should be singular key rather then keys
}
}
console.log(this.properties) // will output what you want
}
//sets properties
MyObj.Method.prototype.Set = function (name, value) {
this.properties[name.toLowerCase()] = value;
}
var options = [{
property1: {
show: true,
min: 0,
max: 100
}
},{
currentValue: {
show: true,
colour: 'black'
}
}];
var myObj = new MyObj.Method('someDivId',options);
this should work problem is you had your myObj = new MyObj... outside your onload event and options was out of its scope as it was declared as private variable to the anonymous function bound to the onload event.
I've fixed also the way you was copying the values to the properties as it doubled the names of the property and made it a bit messy.