Unable to bind the id of the combobox field on grid update - extjs

I'm trying update the grid with the edited values. When I update the bus type and give update, the binded value in the back end is valueFied that's the id, But when I update only time and name the bus type cell renders the displayField which fails the gridupdate at the back end saying Integer value error, since the display field is the string , How would i always render or bind the valuefield to the back end no matter what i update and display always the type name,
here's the fiddle to try.Fiddle
Hoping for a quick response.
Screen Shot of the grid
Thanks much.

I Solved this issue by adding below method in the update function.
if(!Ext.isNumber(gridRow.data.typebus))
{
gridRow.data.typebus = gridRow.data.id;
};
hope this helps someone.

Related

How to select the last record in extjs grid when I move to the last page

Thanks you at first!
I encountered a problem, when I load a grid and moveLast(),but I can not select the last row,here is my code:
var store = this.getMyOwnStoreStore().load({
scope : this,
callback : function(){
Ext.getCmp("pagingtoolbarId").moveLast();
Ext.getCmp("gridId").getSelectionModel().select(theLastRowNumber -1);
}
})
But when i run the code,I can not get the record of the last page!!!
The select method of selectionModel actually expects record(s) - http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select.
For this to work use the following - Ext.getCmp("gridId").getSelectionModel().select(gridStore.getAt(gridStore.getCount()-1));
inQstvJS's answer helped me figure this out as I was placing a number in "select(1)" thinking that "select" just wanted the index of an item in the grid. Not realizing that it wants the index of the store item. Thanks
id = grid.config.store.data.items.length;
grid.getSelectionModel().select(grid.store.getAt(id));

ExtJS grid selectionchange data

I have this code:
grid.getSelectionModel().on('selectionchange', function(selModel, selections) {}
and inside the function with the variable 'selections' I want to get the selected row field 'name' data.
How do I do it?
I have tried 'selections.data.name' and 'selections.get('name')' but none works.
I know it's possible because Firebug shows the data of the variable 'selections'.
The answer is:
selections[0].data.name or selections[0].get('name')

how to add a empty string as default in the drop down where dropdown is a directive

In my AngularJS project, I am having a dropdown field as a directive and the values are coming from the backend.The user can also leave the field without selecting the dropdown(optional field) but the problem is, there is no empty field from the backend. So I need to add an empty field into the dropdown as default.
Since there is no option in the directive got struck in this issue.Googled a lot but didnt get any solutions yet.Kindly provide some suggestion.
Note:Client machine,cant post the code.
If there is no value set for the ng-model that the dropdown is bound to, Angular will provide a blank option by default that can be left in place (ignored) by the user and will result in your final value being whatever you set that ng-model to in the first place. If you need an actual empty string for the value, initialize it to that.
If you need to enable the user to select an empty value once they have already selected a value, you will need to add an empty value to the object that the dropdown is bound to. Add the empty value like this:
myPromise.then(function(data){
$scope.ddInfo = data;
$scope.ddInfo.unshift({id:'0000',text:'Not Applicable'});
});

In Backgrid, how can I change pageSize with a select input?

I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page

Grid Batch Editing Telerik MVC Grid and Validation

My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.

Resources