DevExpress MVC GridView - SetDropDownWindowTemplateContent - asp.net-mvc

I'm working on a DevExpress gridview and finding a severe lack in documentation for a function call. Everywhere I look, SetDropDownWindowTemplateContent(string content) has no exmaples of what string content is or looks like. I've tried simply doing "Option1;Option2 (as devexpress states ';' is the delimiter) but it doesnt work.
Please help, pulling my hair out.
settings.Columns.Add(col =>
{
col.FieldName = "DefaultValue";
col.Caption = "Rule Type Value";
col.Width = 300;
col.ColumnType = MVCxGridViewColumnType.DropDownEdit;
col.SetEditItemTemplateContent(column =>
{
Html.DevExpress().DropDownEdit(c =>
{
c.Name = "ddlName";
c.SetDropDownWindowTemplateContent("WHAT GOES HERE!?!?!");
}).Render();
});
});

Take a look at this demo to learn more on how to use this method.
settings.SetDropDownWindowTemplateContent(c => {
Html.DevExpress().ListBox(
listBoxSettings => {
...
}
).Render();
});

Related

"CS0162: Warning as Error: Unreachable code detected" on Razor View

I have the following code within a script tag on my razor view:
self.regions = [];
#foreach(var region in Model.OperationRegions)
{
<text>
self.regions.push({
regionid: '#region.Region_Id',
regionname: '#region.Title',
selected: ko.observable(#(Model.RegionsList.Contains(region.Region_Id).ToString().ToLower()))
});
</text>
}
self.categories = [];
#foreach(var category in Model.Categories)
{
<text>
self.categories.push({
categoryid: '#category.Category_Id',
title: '#category.Title'
});
</text>
}
For clarity, the code outside of the foreach loops and within the text tags are Javascript and the purpose of the razor code is to populate my Javascript arrays with data from the server.
When I run this I am currently getting a server error saying "CS0162: Warning as Error: Unreachable code detected"
The error is thrown on the second "foreach" in the snippet.
Surprisingly I couldn't find another question referring to this error message on an MVC razor page so I'm posting this here.
My question is why is that line of code considered to be unreachable? I will update this question if I find anything else on my page to be relevant to the issue as I try to debug.
The error has disappeared now. I had renamed a property of my model and not recompiled before trying to load the page again. Recompiling made the error go away. I have no idea how the root cause translated to the error message shown but its fixed now in any case.
This is an extremely poor way to handle this. There's no need to build an array piece by piece like this. Just convert your list to JSON.
self.regions = #Html.Raw(Json.Encode(Model.OperationRegions.Select(region => new {
regionid = region.Region_Id,
regionname = region.Title,
selected = Model.RegionsList.Contains(region.Region_Id)
})));
The only thing this can't handle is making selected an observable. However, you can simply loop through the array and fix this:
for (var i = 0; i < self.regions.length; i++) {
self.regions[i].selected = ko.observable(self.regions[i].selected);
}
However, the better approach is to use another view model:
var OperationRegionViewModel = function (data) {
var self = {};
self.regionid = ko.observable(data.regionid);
self.regionname = ko.observable(data.regionname);
self.selected = ko.observable(data.selected);
return self;
};
Then, you can just do something like:
var regions = #Html.Raw(Json.Encode(Model.OperationRegions.Select(region => new {
regionid = region.Region_Id,
regionname = region.Title,
selected = Model.RegionsList.Contains(region.Region_Id)
})));
self.regions = $.map(regions, new OperationRegionViewModel);
Or, even better build your JSON all at once:
var json = #Html.Raw(Json.Encode(new {
regions = Model.OperationRegions.Select(r => new { ... }),
categories = Model.Categories.Select(c => new { ... }),
// etc
});
Then, inject this all into your view model:
var viewModel = (function (json) {
// other stuff
self.regions = $.map(json.regions, new OperationRegionViewModel);
self.categories = $.map(json.categories, new CategoryViewModel);
// etc
})(json);

iOS Ionic 2 app unable to read from SqlStorage

We're building an Ionic 2 (currently beta 11).
We're using built-in SqlStorage database. From Android our app is able to read and write date just fine, but with iOS we can only write the data. When we attempt to read the data we get the number of rows returned but none of the actual data.
getQueueItems(): Promise<any> {
return new Promise<any>((resolve, reject) => {
this.sql.query('SELECT * FROM queue').then(
(res) => {
console.log(res, 'result');
// resolve(sqlResult.res.rows);
}
);
}).catch(() => {
});
}
The resultset looks like this:
{
"tx": {
"db": {
"openargs": {
"name":"__ionicstorage",
"location":2,
"createFromLocation":0,
"backupFlag":2,
"existingDatabase":false,
"dblocation":"nosync"
},
"dbname":"__ionicstorage"
},
"txlock":true,
"readOnly":false,
"executes":[],
"finalized":true
},
"res": {
"rows": {
"length":3
},
"rowsAffected":0
}
}
Does anyone know how we can read from SqlStorage so that iOS gets the data?
After a lot of searching and reading tons of forum posts we finally found the answer. I'm posting here for future searchers, hopefully it will help you.
The trick is that in order for the query results to be usable by all platforms you have to iterate through the result set yourself adding the appropriate objects as you go.
this.sql.query('SELECT * FROM queue').then(
(sqlResult) => {
let queueItems = [];
for(let i = 0; i < sqlResult.res.rows.length; i++){
queueItems.push(sqlResult.res.rows.item(i));
}
resolve(queueItems);
}
);

Add positive sign in Kendo NumericTextBox

I have a Kendo NumericTextBox. This text box allows positive and negative numbers.
As expected, negative numbers have a '-' prefix.
Is it possible to prefix a '+' on positive numbers?
I'm using ASP.NET MVC 5. Here's a code sample:
#Html.Kendo().NumericTextBoxFor(model => model.PositveNegative).Step(0.25f)
Any help with this would be greatly appreciated.
Thanks.
Abrar
You can use Change and Spin event handler.
Here are the code in javascript version.
$("#inputID").kendoNumericTextBox({
format: "+#",
change: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
},
spin: function() {
var value = this.value();
if(value>0) this.options.format="+#";
else this.options.format="#";
}
});
Using Mr Cocococo's answer as a starting point here is the MVC wrapper version for you:
#(Html.Kendo().NumericTextBox().Name("Test").Step(0.25f)
.Events(events => events.Change("Testing").Spin("Testing"))
)
<script>
function Testing()
{
var numeric = $("#Test").val();
if (numeric > 0)
{
$("#Test").kendoNumericTextBox({ format: "+##.##", decimals: 2 });
}
else
{
$("#Test").kendoNumericTextBox({ format: "##.##", decimals: 2 });
}
console.log(numeric);
}
</script>
This works with either typing or using the spinners and should give you the desired results.

Dart .onMouseOver

DivElement collectWoodHover = querySelector("#collectWood");
if (collectWoodHover.onMouseOver == true) {
querySelector("#collectWoodHover").style.display = "block";
} else {
querySelector("#collectWoodHover").style.display = "none";
}
Hello!
I was flicking through some of the stuff in the auto complete thing in Dart and found .onMouseOver.
I wonder if I am using it correctly because it doesn't seem to work. The div element is always hidden.
Thanks for your help in advance.
Try something like:
collectWoodHover.onMouseOver.listen( (event) {
print('onMouseOver!');
} );
onMouseOver is a stream. You can find more information how to use streams in Dart here.
onMouseOver is an event stream.
You use it like:
DivElement collectWoodHover = querySelector("#collectWood");
collectWoodHover.onMouseOver.listen((e) =>
e.target.style.display = "block";
}
collectWoodHover.onMouseOut.listen((e) =>
e.target.style.display = "none";
}
I have not actually tried this code. But you should get the idea.
I think you are not selecting the div correctly.
Try:
querySelector(collectWoodHover).style.display = "block";
Because it's a var as in sample, or:
querySelector("#onHover").style.display = "block";
if the div id is 'onHover' that should work

display image devexpress gridview, is this a rocket science?

Let say I have ViewModel which I use in devexpress gridview. Inside that view I display my data in devexpress gridview like this
#Html.DevExpress().GridView(
settings =>
{
settings.Name = "myGridView";
settings.KeyFieldName = "Id";
....
var column = settings.Columns.Add("Id", "Id");
column = settings.Columns.Add("Title", "MyTitle");
...
}).Bind(Model).GetHtml()
My Model is of IEnumerable
and everything is ok with this code up.
Now I want to display image inside that gridview before or after Id column.
So I found that this should be done with Html.DevExpress().BinaryImage()
But I'm stuck here for a while now.
First to describe my viewmodel and how my images are stored.
My Model have List<Photo> collection. I'm getting images as FileContentResult.
So I know I should use this Html.DevExpress().BinaryImage() but I dont know.
Here is example which I should follow.
column = settings.Columns.Add("", "Photos");
Html.DevExpress().BinaryImage(
imageSettings =>
{
//imageSettings.Name = "Photo";
imageSettings.Width = 100;
imageSettings.Height = 100;
})
.Bind(((System.Data.Linq.Binary)DataBinder.Eval(Model, "Photo")).ToArray())
.Render();
Update:
I think I should try with this solution. Problem here is that I want to display in my grid first image from the Photos collection. I tried with with code below but with no luck. No errors.
var photoColumn = settings.Columns.Add("Photos[0].ImageData", "Foto");
photoColumn.Visible = true;
photoColumn.Width = 20;
photoColumn.FieldName = "Photo.ImageData";
photoColumn.ColumnType = MVCxGridViewColumnType.BinaryImage;
DevExpress.Web.ASPxEditors.BinaryImageEditProperties properties = (DevExpress.Web.ASPxEditors.BinaryImageEditProperties)photoColumn.PropertiesEdit;
properties.ImageHeight = 50;
properties.ImageWidth = 50;
You do not need to use BinaryImage within the GridView directly, because MVCxGridViewColumnType supports BinaryImage.
Related link - GridView - How to load binary image within BinaryImage column
Please, also review the Grid View - Templates demo that demonstrates how to use the BinaryImage within the data rows.
In you case it is necessary to customize DataItemTemplate and customize BinaryImage inside it as follows:
settings.Columns.Add(column => {
column.SetDataItemTemplateContent(c => {
Html.DevExpress().BinaryImage(
imageSettings => {
imageSettings.Name = "Photo" + c.KeyValue;
imageSettings.Width = 50;
imageSettings.Height = 50;
})
.Bind(Here_Your_Code_To_Retrieve_Image_From_Current_DataItem)
.Render();
});
});
Here is one that worked for me.
settings.Columns.Add(column =>
{
column.SetDataItemTemplateContent(c =>
{
Html.DevExpress().BinaryImage(
imageSettings =>
{
imageSettings.Name = "PhotographOfCommodity" + c.KeyValue;
imageSettings.Width = 50;
imageSettings.Height = 50;
})
.Bind(DataBinder.Eval(c.DataItem, "PhotographOfCommodity")).Render();
});
});
HOPE THIS HELPS

Resources