I am working on Kendo UI,can anyone provide the solution how to update Kendo grid datasource based on cascading drop-down list selected value.In Kendo demos I found cascading dropdownlists examples.
requirement:
I have 3 dropdownlists,binding with 3 services,now I want to filter the grid data-source based on dropdownlist selected value.
Hai,
In onchange event of thrid dropdownlist,you need to filter the grid datasource based on codition
Change:filterGrid
and a create function:
function filterGrid() {
dataSource.filter([
{ field: "orders", operator: "equals", value: $("#OrderID").val() }
]);
}
Related
Case:
I have an array of answers which I want to show in the view as radio inputs. When one of the answers is already answered it must be [checked] and if it's [checked] a textarea shows, so far so good.
Next I want to check another radio input and I want the current selected to be deselected and its textarea hidden, then the new selected radio input should be [checked] and it's textarea should show.
I use the FormBuilder and FormArray and have following issues.
I can't use index without intrapolation, I see many examples where the index is used without.
If I select another radio input, first my data disappears and it's not checked and on the second click it get's checked but now both are checked.
- I don't have access to the checked event, I can show it in the view with {{tempVar.checked}} as you can see above, if I use a template variable #tempVar, but I don't have access to it in the textarea below *ngIf="tempVar.checked". If I do use it in the ngIf I get the following error
Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
Questions:
Is this the right approach?
An example of a Reactive Dynamic form with FormBuilder and FormArray with Radio inputs
Here is my code
https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf
I would think using the tags should be reserved for unique identifiers? I wouldn't be surprised if dom renderer will update all elements with the same id.
Not sure if this will help, but you could use an answer view model instead (containing the same data) but that also has a 'checked' property
This way you can be sure that it will behave as you would expect.
e.g.: (in your component.ts)
let answers = this.question.Question.PossibleAnswers
.map(a =>
{ return Object.assign({}, a, { checked: false });
}
);
then in html you use: 'answer.checked' instead of 'radio.checked'
ps: also you could use ng-container instead of span, so you don't have an extra DOM imprint in your html
I am facing issue in Setting the Value of Select Box in Grid .
Scenario: in the ListGrid i am having two Combo box .
For One combo box i am getting the value in the list during the onload and displaying .
On change value of first combo i need to fetch data from a list with input value from frst combo. i am getting the value from list but when i try to set in the second combo its not loading
Please find my code below.
//Properly Loading Combo
TaskName=new ListGridField("task_name","task_label);
SelectItem taskItem=new SelectItem("task_name","task_label);
taskNameList=populateTaskName();//Getting while onload
taskItem.setValueMap(taskNameList);
taskItem.addChangedHandler(...);
TaskName.setEditorType(taskItem);
TaskName.setValueMap(taskNameList);
TaskName.setRequired(true);
TaskName.setCanEdit(true);
//Not Loading Combo
SubTaskName=new ListGridField("Sub_task_name","Sub_task_label);
SelectItem subTaskItem=new SelectItem("Sub_task_name","Sub_task_label);
subTaskItem.addChangedHandler(...);
SubTaskName.setEditorType(taskItem);
TaskName.setRequired(true);
TaskName.setCanEdit(true);
//ChangeHandlerFor taskItem-FirstCombo
onChange(){
Form item=event.getItem();
item.setTooltip(item.getDisplayValue());
String taskId=String.valueOf(item.getValue());
populateSubTaskname(taskId);
subTaskItem.setValueMap(subtaskNameList);//getting the subtaskname List from RPC Call
SubTaskName.setValueMap(subtaskNameList);
populateSubTaskname(){
getting the value and loads in List
//subtaskNameList
subTaskItem.setValueMap(subtaskNameList);//getting the subtaskname List
SubTaskName.setValueMap(subtaskNameList);
}
//ChangeHandlerFor taskItem-Second Combo
onChange(){
Form item=event.getItem();
item.setTooltip(item.getDisplayValue());
}//Here also Name in the Map is not setting instead setting the value alone sometimes
Please help me where im wrong.
Once value in the combobox/select item changes, you need to assign it again to List grid field.
eg: listGridField.setEditorProperties(selectItem)
I have a comboviewer, and i need to have the databinding on it, so that the combo selection is automatically updated in the Model.
Also i need to add the combo items dynamically (to the exisitng combo items). With databinding how can i acheive this?
As am new to databinding, please point me to some good tutorial on comboviewer databinding with dynamic items (combo items).
The below code is for binding the comboviewer selection to the model:
final IObservableValue entityComboObservable = ViewersObservables.
observeSingleSelection(myComboViewer);
final IObservableValue modelSelectedEntityObservable = BeansObservables.
observeValue (cmpObj, Company.EMP_SELCTION);
bindingCntxt.bindValue(modelSelectedEntityObservable, entityComboObservable);
where "cmpObj" is my model object which contains the list of objects which will be set as the input to the comboviewer
You can do something like
comboViewer.setContentProvider(new ObservableListContentProvider());
comboViewer.setLabelProvider(labelProvider);
// input must be a List
comboViewer.setInput(input);
IViewerObservableValue swtObs = ViewersObservables.observeSingleSelection(comboViewer);
Now create a model-ovservable and bind it with swtObs
you need to use below input observable.
org.eclipse.jface.databinding.viewers.ViewersObservables.observeInput(Viewer)
bind input observable with the ListObservable.
I use a grid to show a list of master table records which are used by a dropdown in my web app. We maintain a sortOrder column used when displaying the items in dropdown. I want to use the jQueryUI sortable plugin to allow the users to re-order the records being dispalyed in the Grid.
I've an ASP.Net MVC(v2.0) web app. What would be the best way to capture the new order and update it in the database?
I found a post for php that is similar. It uses the ".sortable('toArray')" to get the elements but I've a Grid. Would I have to simplify my Grid to a list?
I've an editable Grid so I added a new column "sortOrder" which has textbox and each time the user drags a row I use the "update" event to find it and set "this.rowIndex".
Hope the following function helps -
$("#sortable tbody").sortable({
helper: fixHelper,
cursor: 'move',
update: function(e, ui) {
$el = $(ui.item);
$el.effect('highlight', {}, 2000);
//Use for debug: alert($('#sortable tbody tr').length);
$('#sortable tbody tr').each(
function(currentIndex) {
$(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex); //td:first
});
}
});
This is where I find my textbox and set its value:
$(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex);
I need to create dynamic filter that adds/removes rows dynamically.
It contains a drop-down box. Depending upon the drop-down box value selected, I create a dynamic <TD> that may have a text field or drop-down list.
If it's a text field, then I have to add date picker for that text field.
I have done this, except date picker for dynamically generated text field.
If you're creating 100 rows, the text fields' names should be same for all rows.
How to add datepicker for dynamically generated text field?
I had the same issue.
You would need to rebind the DatePicker to the dynamically added row.
The date picker associates a hadDatePicker Class to the dynamic row.
So you would need to remove that and rebind.
Something like this -
jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
dateFormat: 'mm-dd-yy'
});
Regards,
Tina Agrawal
Actually i did use the solution provided by #Tina Agrawal But since now, when i select a date from the calendar, i click again and re-select. If i click on next month, it will go to 1900-01-01.
Well it was so strange...
After two hours of trial and errors and research.
i simply did:
$('.date-pick').live('click', function(){
$('.date-pick').datepicker();
});
Well it works.
I had the same issue and solved it in a different way. Although I am not very sure why is it working as I am very new to jquery. I wrote the following and it iterates the entire set of controls having the class "class_date" and rebinds the datepicker control to it.
$(".class_date").removeClass('hasDatepicker').datepicker();
Tirst add a class attribute as "date" to your input or div.
After dynamically add a text input to have to recall $('.date').datePicker() again to bind datePicker to new inputs or div.
I had a similar problem in that when dynamically adding new rows to my table the Date Picker fields in the new rows (any row added to the DOM dynamically) were all updating my initial rows Date Picker fields.
Removing the hasDatepicker class as suggested above was not enough to solve my issue, probably as I was using .clone() to create my dynamically added rows.
The solution when cloning rows was to remove the cloned input fields, re-create them, add them to my newly cloned table row and THEN re-initiate the Date Picker
For example:
//Remove exisiting cloned input fields
new_row.find("td.date input").remove();
//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);
//Re-initiate datepicker on the input fields
new_row.find("td.date input").datepicker({
dateFormat:"dd-mm-yy",
minDate:StartDate,
maxDate:EndDate
});
Use JQuery Live to access the dynamically created DOM.
http://api.jquery.com/live/
The you can attached the picker.
http://jqueryui.com/demos/datepicker/
one should use ".on" instead of live - see
http://api.jquery.com/on/