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
Related
We have tried asp sorting and grouping the datasource the order will be changed. But in client side working fine. We have attached code snippet below.
List<accs> acc = new List<accs>();
acc.Add(new accs() { Account = "4320", Content = "Invest" });
acc.Add(new accs() { Account = "4290", Content = "rewrw" });
acc.Add(new accs() { Account = "4290", Content = "test11" });
var list = acc.OrderBy(x => x.Content);
var t = list.GroupBy(p => p.Account, p => p.Content, (key, g) => new { Account = key, Content = g.ToList() });
return View();
serverside output:
0-Account="4320"
1-Account="4290"
ClientSide output:
0-Account="4290"
1-Account="4320"
Please let me know if you have any solution.
Regards,
Gopi G.
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);
I implemented a demo using a GridView in DevExpress for MVC.
I want to set an image for Delete Button in my GridViewPartial View.
Someone knows how can I set it?
#{
var grid = Html.DevExpress().GridView(settings => {
...
settings.CommandColumn.Visible = true;
settings.CommandColumn.ShowNewButton = true;
settings.CommandColumn.ShowEditButton = true;
...
});
if (ViewData["EditError"] != null){
grid.SetEditErrorText((string)ViewData["EditError"]);
}
}
#grid.Bind(Model).GetHtml()
Thanks Mates.
EDITED:
Trying this
settings.SettingsCommandButton.DeleteButton.ButtonType = GridCommandButtonSettings.Image;
settings.SettingsCommandButton.DeleteButton.Image.Url = "~/content/images/icons/icon_delete.png";
It returns "Is needed a reference, method or property non statics "DevExpress.Web.GridCommandButtonSettings.Image.get""
Slight update for newer versions of DevExpress. ButtonType has been deprecated in favor of Render Mode.
New
settings.SettingsCommandButton.RenderMode = GridCommandButtonRenderMode.Image;
settings.SettingsCommandButton.DeleteButton.Image.Url = "~/Content/Images/next.png";
Obsolete
settings.SettingsCommandButton.DeleteButton.ButtonType = GridCommandButtonRenderMode.Image;
Did it,
In Razor View (probably you are using GridViewPartial) define the button through:
settings.SettingsCommandButton.DeleteButton.ButtonType = GridCommandButtonRenderMode.Image;
settings.SettingsCommandButton.DeleteButton.Image.Url = "~/Content/Images/next.png";
i am working on mvc4 project.I have a devexpress combobox.I want to get values in other textbox according to comboxbox value but client side.
I have referring to this example
http://www.devexpress.com/Support/Center/Question/Details/Q360473
But i don't know how do i achieve this
here is my partial view code for combobox binding
#Html.DevExpress().ComboBox(
settings => {
settings.Name = "comboBoxGetUsersByEmail";
settings.Width = 250;
settings.SelectedIndex = 0;
settings.Properties.DropDownWidth = 550;
settings.Properties.DropDownStyle = DropDownStyle.DropDownList;
settings.CallbackRouteValues = new { Controller = "ManageUsers", Action = "GetEmployeesByEmail" };
settings.Properties.CallbackPageSize = 20;
settings.Properties.IncrementalFilteringMode = IncrementalFilteringMode.Contains;
settings.Properties.TextFormatString = "{0}";
settings.Properties.ValueField = "email";
settings.Properties.ValueType = typeof(string);
settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { OnEmailChange(); }";
settings.Properties.Columns.Add("email", "Email", 120);
settings.Properties.Columns.Add("employeeid", "EmployeeID", 40);
settings.Properties.Columns.Add("name", "Name", 130);
}
).BindList(ViewData["Employees"]).GetHtml()
Now i want when value of combox changes i have labelfor mvc helper in page so on change of combox value they fill with their vales according
This works fine,
On your javascript function add the following code:
<script>
function OnEmailChange(){
var selectedValue = comboBoxGetUsersByEmail.GetValue();
document.getElementById('YOUR_LABEL_ID').innerHTML = selectedValue;
}
</script>
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();
});