I am using JsGrid in my asp.net application. I felt it was very awesome grid. Everything worked out very well, but I was stuck at one point.
I have a dropdown on a page which is fetching data from database. and next to that control, i have added JsGrid.
When I change the index of dropdown, and when I click on Add row on my jsgrid, it should set the default value for one of the fields in the grid.
Can anybody please help me out in this regard.
enter image description here
Regards,
Nithin Eate
Redefine insertTemplate of the grid column you want to set default value to and pick up value from your dropdown widget:
insertTemplate: function() {
var input = this.__proto__.insertTemplate.call(this); // original input
// getValueFromDropDown() should read value from your dropdown control
var defaultValue = getValueFromDropDown();
input.val(defaultValue)
return input;
}
The source GitHub issue https://github.com/tabalinas/jsgrid/issues/471
Related
I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks
The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn
I am using Breezejs with Durandal in my .net application.
When i try to edit a section which contains
1) Text box
2) Dropdownlist with caption and options
3) TextArea
4) Button
Onclick of edit button, i am binding these controls with their respective values(till then it works fine).
After i change textbox value to "test123" and dropdown values to it's "caption" and clicking on save button. In save function I am creating Breeze entity in modified state and updating them as shown below,
var personEntity = breeze.manager.createEntity('TableName', { Id: id }, breeze.EntityState.Unchanged);
personEntity.entityAspect.entityState.setModified();
personEntity.name(name); //"test123"
personEntity.dropdownValue(status) //I have selected the caption, means value is undefined
personEntity.textArea(address); //No change
then making savechanges() to DB.
In table text box value is updated properly but the value of dropdownlist is not updated(from some value
to Null);
Kindly suggest me some solution so that i can save null value in DB if caption is selected.
Thanks in Advance......
The problem is that the ContextProvider on the server is not detecting that the dropdownValue has changed. It determines the changed properties by looking at the entityAspect.originalValues. Since you create a new entity with dropdownValue = undefined, and you set it to undefined, no change is detected.
Change your code to initialize the dropdownValue to something else:
var personEntity = breeze.manager.createEntity('TableName',
{ Id: id, dropdownValue: 'something' });
personEntity.name(name);
personEntity.dropdownValue(status);
personEntity.textArea(address);
I'm attempting to rebind the listview data after changing the template, based on a DropDownList value. I've included a JSFiddle for reference. When I rebind currently the values in the template are undefined.
Thanks!
JSFiddle link
I was thinking the best way to handle it would be in the 'select' or 'change' function:
var cboDetailsCategory = $("#detail").kendoDropDownList({
data: [
"All",
"Customer",
"Location",
"Meter",
"Other"],
select: function (e) {
var template = $("#" + e.item.text()).html();
console.log("template", template);
$("#details").html(template);
},
change: function (e) {
},
please refer to the JSFiddle link and this graphic as a visual
Here is a lengthier workflow:
User completes a name search and clicks a search button.
Name results are populated in a listview, rendered individually as button controls using a template.
User then clicks one of the name results (shown as the button text).
A dropdownlist of categories ('All' <--default , 'Location', 'Customer'...) gives the user the ability to target what subject of data they want to see. 'All' is the default, showing all details about the selected name.
So by default the 'All' template is populated.
If user wants to see the 'Location' details (template) they select it from the dropdownlist.
The template shows but the values are all blank. The only way to populate it is to click the name (button) again.
I want to remove the need for having to re-click the button (name) to populate the template ('Location', etc...).
I have put together a JSFiddle showing the structure. Though due to the data being private and served over secure network I cannot access it.
Refer to JSFiddle:
I believe the issue is that the onclick event grabs the data-uid and passes it to the initial default template (named 'All' but it's not included in code as it's lengthy). When the user changes the dropdownlist (cboDetailsCategory) and selects a new template I lose the data.
Thanks for your help. I'm really stuck on this and it's a current show stopper.
There isn't an officially supported way to change templates, without destroying the listview and rebuilding it. However, if you don't mind poking into into some private api stuff (be warned I can't guarantee that kendo won't break it without telling you) you can do this
var listview = $("#MyListview").getKendoListView();
listview.options.template = templateString;
listview.template = kendo.template(listview.options.template);
//you can change the listview.altTemplate the same way
listview.refresh(); //redraws the elements
if you want to protect against unknown API changes you can do this, which has A LOT more overhead, but no risk of uninformed change (untested!)
var listview = $("#MyListview").getKendoListView(),
options = listview.options;
options.dataSource = listview.dataSource;
listview.destroy();
$("#MyListview").kendoListView(options);
Here's the solution, thanks for everyone's help!
JSFiddle Link
The issue was where I was setting the bind:
$("#list").on("click", ".k-button", function (e) {
var uid = $(e.target).data("uid");
var item = dataSource.getByUid(uid);
var details = dropdown.value();
var template = $("#" + details).html();
$("#details").html(template);
kendo.bind($("#details"), item);
currentData = item;
});
i asked a similar question before however the solution no longer works for my application, i need a button click to create a new row (FailureInstance) in a table (failuretable) and i need it to populate three of the cells with data from fields that are elsewhere filled in. here is my code: form1.failuretable.AddFailureButton::click - (JavaScript, client)
xfa.host.messageBox("Failure Recorded and Added To Table Below. Please Continue Filling Out the Form Until All Failures Have Been Recorded. Then Please Save and Submit the Form.", "Continue/Save/Submit", 3);
if (xfa.host.version < 8) {
xfa.form.recalculate(1);
}
var newRow = failuretable._FailureInstance.addInstance(1);
newRow.FailureCode.rawValue = form1.FailureType.rawValue;
newRow.Location.rawValue = form1.CellLocation.rawValue;
newRow.Comments.rawValue = form1.AdditionalComments.rawValue;
right now this doesn't even create a new row for my table... any help is appreciated!
You should check whether multiple instances for a row are allowed. Select FailureInstance in hierarchy view and then in Object->Binding (if you dont see it go to window menu and select Object) check wheter "Repeat Row for Each Data Item" is selected. If not then select it and your code should work fine.
I advice also to enable JavaScript debugging in your Adobe Reader because it than you should see when error appears and what is it about. Open Reade go to Edit->Preferences->JavaScript and select "Show console on errors and messages". Then you will need to restart Designer.
At design time remember to enable:
Object > Data Binding > Repeat Table For Each Data Item
In code, I believe that lack invoking "instaceManager":
...
var newRow = failuretable.FailureInstance.instanceManager.addInstance(1);
...
http://help.adobe.com/en_US/livecycle/9.0/designerHelp/index.htm?content=000178.html
I am using 'CheckColumn' in 'gridpanel' and also I am using a window which contain a chart. In the window, when I click on some values in the chart, I have to set the corresponding check box as checked in the grid. My question is how to set a check box as checked programmatically? I got the row id of the corresponding value that I need but I do not know how to use it to check it.
Thanks a lot!
// in the code below, i am searching for the specific row how contain my value
grids.getStore().each(function(rec){
var rowData = rec.data;
if (rowData['value']==value)
{
var record = grids.getStore().getAt(rec.index);
// what i can do now? // thanks
}
});
i found what i need , just: add
rec.set('myfield', true);
thanks