How to define a Combo Column in Gridview which bind an Enum (as possibilities), but which has as default value coming from object coming from a List which bind the grid view?
The problem is coming from the bindlist which will display the different options in the combo should be a list of string... Kind of: 'None', 'True', 'False', 'Maybe'...
And the default value is coming from object.field1 which is coming from of List binded to the grid view.
Get it!!
settings.Columns.Add(column =>
{
column.FieldName = "field_name";
column.EditorProperties().ComboBox(p =>
{
p.DataSource = Enum.GetNames(typeof(Definition_of_Enum));
});
});
By Deveexpress support...
Related
I'm simultaneously displaying some data in a react-table component and on a interactive map. I'm trying to implement a feature where items can be selected by clicking the table row or the object on the map.
Here is what that looks like.
In my component's state there is a selectedIndex property that holds the array index of currently selected item.
I managed to handle the click events both on react-table row and on the interactive map object and set the appropriate value to the selectedIndex property.
I managed to highlight both the row that displays the selected item and the object that represents the selected item on the map.
getTrProps={(s: any, rowInfo: RowInfo) => {
if (rowInfo == null) {
return {};
}
return {
onClick: (e: any, handleOriginal: any) => {
this.handleSelectedIndexPress(rowInfo.index);
if (handleOriginal) {
handleOriginal();
}
},
style: rowInfo.index === this.state.selectedIndex ?
{background: '#00AFEC', color: 'white'} : {}
}
}
<GlifyPointsLayer
data={state.reportPoints}
click={(e, point: [number, number, number]) => this.handleSelectedIndexPress(point[2])}
color={{r: 1, g: 0, b: 1}}
size={10}
/>
{state.selectedIndex != null &&
<Marker
position={state.reportPoints[state.selectedIndex] as any}
icon={markerIcon}
/>
The only problem is that when the user selects a item by clicking on it on the interactive map, sometimes, the item dose not get highlighted on the table since its not on the currently displayed page.
When that happens I would like to jump to the page where the selected item is.
I know that there is the page property on the ReactTable component with witch I can programmatically control the currently displayed page.
The problem is that when I handle the click event on the interactive map I only have access to the index of the selected element.
handleSelectedIndexPress = (index: number) => {
// Here i need to figure out the page number that the row with index "index" is in.
const selectedIndex = index !== this.state.selectedIndex ? index : null;
this.setState({selectedIndex: selectedIndex});
};
How do I figure out what page number that index is in so that I can set the currently displayed page properly? Keep in mind that react-table rows can be sorted in many different ways so the index is not mathematically linked to the page number.
I’m using Kendo UI v2016.3.1118 for my web application.
I use the editing capabilities (mode: “incell”) in the Kendo UI grid. I have created a grid with editing textbox, date, and numeric values and it works fine.
What I want to do now is to apply editing for columns with dropdown values.
I’ve integrated a custom dropdownprovider like described in Telerik sample (https://demos.telerik.com/kendo-ui/grid/editing-custom, demo: https://dojo.telerik.com/UjAGU).
That works so far quite well. However, after I change a value in the DropDown and the cell loses focus, the display switches back to the view mode. It only appears a little red indicator in the upper left of the cell, indicating the value has been changed (cell is “dirty”). Except of the red indicator the cell is empty (no value is shown in cell).
In my case I’ve only numeric (foreign key) values for the columns of type dropdown foreign in my datasource.
My datasource looks similar to this:
{
Product ID: 1,
ProductName: "Chai",
Category: 1
}
Datasource in sample provided by Telerik:
{
Product ID: 1,
ProductName: "Chai",
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, berries, and ales"
}
}
I've tried to set the cell value to the selected text in the Select-Event of the dropdown. Nevertheless there is still no text shown for the dropdown in view-mode. Unfortunately, I cannot find a suitable event. The event closeCell is never thrown in my constellation.
Any ideas out there?
Regards
Stefan
I think your issue probably stems from the difference between what is returned by your dropDownList when you make a selection (i.e. an entire object, complete with text and value), and what your grid model object requires (just the value).
Assuming you have a function to create the editor like the one in the sample you referenced, can you please try altering it to set the valuePrimitive property to true?
function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
valuePrimitive: true,
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
According to the documentation:
If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
Hopefully that will resolve your issue.
I have a created a gridview and added a checkbox in item template. This grid has few columns along with DataKey (primary key). Due to performance gain, this grid will fetch the next set of recrods on each page change based on the page number click. So that is done.
Now when user selects a checkbox in page one and then go to page 2 and coming back to page one, then user will not see the checkbox checked as the user did earlier.
So is there a good way to persist the checkbox when user move page to page?
This checkbox be used as a flag to select the rows that can be deleted later by a button outside the grid.
Since you receive a new set each time a paging is selected, I suggest the following approach:
Create an array[] object via javascript that will add to list the datakey whenever a checkbox is selected and in turn remove it if the checkbox is deselected. Something like this:
var selectedDataKeys = [];
$('.checkboxclass').on('change', function() {
// Considering you assign the data key as id for the checkbox otherwise implement a way to retrieve the id.
var dataKey = $(this).prop('id');
// Determine if the dataKey is in the selected data keys array
var isContained = (selectedDataKeys.indexOf(dataKey) > -1 );
if($(this).is(':checked')) {
// If is contained is false - add to the array
if (!isContained)
selectedDataKeys.push(dataKey);
} else {
// If is contained is true - remove to the array
if (isContained){
selectedDataKeys = $.grep(selectedDataKeys, function(value) {
return value != dataKey;
});
}
}
});
From this point on the client user will have an active list of selected items, now its up to you to use that list to manipulate your grid display page. Either modify the display on document ready by comparing all the item on the grid display with the selectedDataKeys array or sending those keys and do the comparison server side.
Hope this helps.
I have a razor (cshtml) file with a dropdownlistfor:
#Html.DropDownListFor(model => model.x_nme, (SelectList) ViewData["Y"]);
The SelectList is formed in the controller as:
var = new SelectList(xList, "id", "x_nme", current.id);
ViewData["Y"] = y_var;
I want the model to bind to the "x_nme" attribute, which displays correctly in the dropdown, but instead it binds to the id attribute.
I need the id attribute as this dropdown fills several fields in the form using javascript/ajax/jquery and I could as an alternative bind to a hidden field to get the name correct.
I was wondering if there is a way to directly bind the model => model.x_nme to the text in the drop-down instead of the underlying id w/o having to have a hidden field.
Thanks in advance.
ViewData["Y"] = new SelectList(xList, "Text", "Text");
Then there is only text on the dropdown, so it will be selected!
This actually works!
I am populating a dictionary object with key value pairs like this..
Dictionary<string, string> twoValues = new Dictionary<string, string>();
foreach (var item in query)
{
twoValues.Add(item.Name, item.Id);
}
return twoValues;
I am returning these value pairs to the controller and populating a MVC model (selectlists)
model.Names = new SelectList(twoValues.Keys);
model.Ids = new SelectList(twoValues.Values);
return model;
In the view I have an action link and a drop down. Drop down is populated with key values of the dictionary (in this case, key is text names, and value is ids)
//Action link
<%=Html.ActionLink("link", "Method", "Controller", new { Id = ?? })%>
//Drop down
<%=Html.DropDownList("names", Model.Names, "")%>
How do I pass the Id associated with the selected Name in drop down to the controller via action link?
I tried having another drop down list next to names with the ids .. but somehow I need to maintain the link between the two drop downs.. since I am separating the dictionary key value pairs in the view for display...
I can have something like...
//Action link
<%=Html.ActionLink("link", "Method", "Controller", new { Id = ?? })%>
//Drop down
<%=Html.DropDownList("names", Model.Names, "")%>
<%=Html.DropDownList("ids", Model.Ids, "")%>
How do I pass the id via the action link for the selected 'Name' drop down list.
You need to do some javascript trick on the click event. Read the selected value of the drop down and build the url and navigate to that.
#Html.ActionLink("Link","Method","Controller",null,new { #class="hackLink"})
<script type="text/javascript">
$(function(){
$(".hackLink").click(function(e){
e.preventDefault(); //Prevent default link click behaviour
var item=$(this);
var selectedVal=$("#names").val();
var newUrl=item.attr("href")+"?id="+selectedVal;
window.location.href=newUrl;
});
});
</script>
Assuming names is the ID of your DropDown.
Alternatively, you can listen to the change event of the Dropdown and then set the value href attribute of the link.
I would recommend creating one dropdown that will have the value of the options equal to your id field and the text equal to your names. You should be able to create it using something this:
Controller:
IEnumerable<SelectListItem> items = yourQueryCode.Select(c => new SelectListItem
{
Value = c.ID.ToString(),
Text = c.Name
});
ViewBag.Names = items;
HTML:
<%= Html.DropDownList("Names", (IEnumerable<SelectListItem>) ViewBag.Names) %>
This will allow you to get the ID linked to the name as the value of the dropdown when you do $('#dropdown').val().
Preferably you would have the SelectList as part of your model that you return to the view, but the above will work as well. There will only have to be a few minor changes when you switch to returning via the model and the transition is pretty simple. Hopefully this is enough to get you headed in the right direction.