Kendo UI batch edit grid DropDownList does not show up - kendo-grid

I am using a kendo ui batch edit grid and I want to use a dropdown as a column of it.
I read other topics about this subject and I did these steps:
1- I created a list of text/value and named it as
DocumetTypesSelectList in a viewbag like this:
ViewBag.DocumetTypesSelectList = DocumentTypesBll.GetDocumentTypes().ToList().Select(item => new SelectListItem
{
Value = item.DocumentTypeId.ToString(),
Text = item.Title
}).ToList();
2- I Cast the viewbag as a list of SelectItems in my view like this:
var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
3- I added a column to grid as follows:
columns.ForeignKey(p => p.DocumentTypeId, (System.Collections.IEnumerable)DocumetTypesSelectList, dataFieldText: "Text", dataFieldValue: "Value")
but it does not open to select on of the items. on click you can change the value, and off click it shows the text using DocumetTypesSelectList .
Thanks In Advance
many thanks for your help

Please explain little bit more about
on click you can change the value, and off click it shows the text
It seems that here (System.Collections.IEnumerable)DocumetTypesSelectList you have missed your DocumetTypesSelectList object to pass on properly. You can do this in your controller by using ViewBag as ViewBag.DocumetTypesSelectListEx = DocumetTypesSelectList and use this ViewBag in your view as (System.Collections.IEnumerable)ViewBag.DocumetTypesSelectListEx
Second thing is, in your DocumetTypes you must have two fields one is for value and one is to display. It seems you have both as "Text" and "Value". Also check the demo here

Related

VueJs component names

I'm working in VueJS and i have the following code
<li #click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li>
so what i try to accomplish is to display the name like {{selectedComponent}}
but as excpected it displays "appManagment" because this is the component that was selected.
So the question is, how to display a different name, for example i want just "Managment" to appear instead of "appManagment".
I'm using it for the navigation menu that displays where the user is located, so any help would be appreciated.
I would create an object like the one below
var prettyNames = {
'appManagment': 'Some very nice name'
}
and then just use it whenever you want to display text which corresponds to the currently selected component. For example
prettyNames[selectedComponent]
You can register a custom filter with the global Vue.filter() method, passing in a filterID and a filter function. The filter function takes a value as the argument and returns the transformed value:
Vue.filter('custom', function (value) {
// add your code to determine
// name based on value here
return newName;
})
Then use your filter on the text:
<i class="ion-clipboard"></i>{{ selectedComponent | custom }}

angularjs save rendered values in html in a variable

I hope someone can help me with this, It's a strange question maybe as I didn't find an answer online.
I call the database and retrieve a list (in json) of items.
Then in angularjs,I render this list by extracting relevant pieces of data(name,age,etc) and show it properly in a table as a list of rows.
I have then an edit button that takes me to another page where I want to put a dropdown list.
What I want to know if is possible to add to that dropdown list the rendered list I previously created in my previous page.
is it possible to save the previously rendered list in a variable and then use that variable in the dropdown?
thank you
You could store the list within a controller and make this data availablte to this dropdown, I think.
Instead of trying to query for the list, add the list to the template, get the list from the template and render somewhere else, I'd suggest query for the list, save the list in a service , and then when you want to use that list again, get it from the service. Something like:
service:
var services = angular.module('services');
services.factory('getListService',['$http',function($http){
var getListOfStuff = function(){
//call to database
return //your json
};
var extractNameAgeEtc = function(){
var myListOfStuff = //get list of stuff from $http or database
var myListOfNameAgeEtc = //make a list of tuples or {name,age,etc} objects
return myListOfNameAgeEtc;
};
return {
extractNameAgeEtc : extractNameAgeEtc
};
}]);
controllers:
angular.module('controllers',['services']);
var controllersModule = angular.module('controllers');
controllersModule.controller('tableRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your table rendering template, probably with ng-repeat
$scope.MyTableValue = getListService.extractNameAgeEtc();
}]);
controllersModule.controller('dropdownRenderController',['getListService','$scope',function(getListService,$scope){
//use this with your dropdown rendering template, probably with ng-repeat
$scope.MyDropDownValue = getListService.extractNameAgeEtc();
}]);

How to get Tooltip for selected item in DropDownListfor?

I couldnt find an attribute "title" for DropdownListFor and was wondering how to do the same for just the selected item in the dropdownlistFor. My code is
#Html.DropDownListFor(m => m.objDetails.CategoryId, new SelectList(Model.objDetails.Categories, "CategoryId", "CategoryName"), new { id = "cboCategory", style = "width:340px;"} )
Source SO
The built-in DropDownList helper doesn't allow you for setting additional HTML attributes on individual options such as title. You will have to write your own custom helper if you want to achieve that. Here's one example

DOJO 1.8. FilteringSelect in DataGrid fed by FileItemReadStore is not working

I'm struggeling with DOJO 1.8 and Datagrid. I would like to put a filteringSelect into a Datagrid cell. The widget should be fed by a Store. The store is fed by an AJAX request and works find. Also the select widget shows up, but it is empty. There's neither a value nor an option to see in the browser:
The Code for the Store:
// AJAX REQUEST TO GET PROJECTS AND SAVE AS STORE
require(['dojo/request', 'dojo/data/ItemFileReadStore'], function(request, ItemFileReadStore){
request('project/json/getprojects', {
handleAs: 'json'
}).then(function(json){
var projectStore = new ItemFileReadStore({data: {'identifier':'id', 'label':'label', 'items': json}});
});
The JSON I retrieve looks like this:
[{"id":2,"name":"Bilder-App","customer":"Company A","label":"Company A >> Bilder-App"},{"id":8,"name":"Zeiterfassung","customer":"Company B","label":"Company B >> Zeiterfassung"}]
The goal is that the select-box shows the "label" field visually and saves "id" to the store/grid.
Here's the code of the grid_layout for the cell:
{field: "project_id", name: "Kunde/Projekt", type: dojox.grid.cells._Widget, widgetClass: dijit.form.Select, widgetProps: {store: projectStore, searchAttr: "label"} },
Is anyone able to help me with that?
MANY THANKS!
AFX
Here is the working formatter:
// PROJECT-ID FORMATTER
function formatProjectId(value, index){
var item = projectStore.get(value);
var label = item['label'];
return label;
}
However, there's one slight problem: Right when I selected the item in the select box it shows the id in the field. When I leave the field it gets formatted correctly.
Does anyone know how to solve this?
OK!
I was able to find a solution.
First of all, I changed to Memory-Store, since I figured out that the ItemFileReadStore wasn't working correctly.
I read somewhere, that you need to require the 'dijit/form/FilteringSelect' specifically. So I did that.
So my field in the layout variable looks like this:
{field: "project_id", name: "Kunde/Projekt", type: dojox.grid.cells._Widget, widgetClass: dijit.form.FilteringSelect, widgetProps: {searchAttr: "id", labelAttr: "label", store: projectStore}},
My Store has an array of data consisting of the fields 'id' and 'label'...so it gave the field those attributes! And BOOOOM...it works!
Now I have to add a formatter-function to format the displayed IDs onces they were edited.
Posting about this soon!
Have a good one,
AFX

Store IList selected data to a variable

I'am working with Adobe AIR application and i have a registration form which contains a combobox which consist of 2 values...i want to store the selected value to a variable..
here is the code..
var a:IList = new ArrayCollection(['Nurse','Patient']).list;
selectbox.dataProvider =a;
suppose if it was a textbox,we can store the value like this:-
var lastname:String = textbox2.text;
in the same way how can i store the selected value from combobox...?
Thanks
You'll use the selectedItem property:
var role:String = selectbox.selectedItem;
P.S. Welcome to StackOverflow! If you find my answer helpful, please be sure to 'accept' it by clicking the green checkmark to the left.