How do I check if a particular field or column of a subgrid is business recommend or not? I want to do this using a web resource. Also due to some requirements, I will have to use the execution context of the form where the subgrid is present and not of the subgrid itself.
It is a little tricky because at the time that the form loads, the subgrid does not have data. So you have to use the Form's load event to attach a load event to the subgrid.
This is described in this MS Docs Page. You can do this like
function attachGridEvent(executionContext)
{
var formContext = executionContext.getFormContext();
var gridContext = formContext.getControl("gridCategories");
// We have the grid, now add a "load" event handler
gridContext.addOnLoad(MyGridLoadedEvent);
}
Now you've got a 'load' event for your grid so you can iterate through its rows and examine its data
I haven't been able to get this to work for subgrids that don't contain data
I get the first row in the sub grid. Once I have that we can loop through each of the row's attributes. Each attribute has the following methods:
getName Returns the logical name of the attribute of a selected grid
row.
getRequiredLevel Returns a string value indicating whether a
value for the attribute is required or recommended.
setRequiredLevel Sets whether data is required or recommended for the
attribute of a selected grid row before the record can be saved.
getValue Retrieves the data value for an attribute.
setValue Sets the
data value for an attribute.
MS Docs Page
I'm using some modern browser features (map, =>) but this code should work for you
function MyGridLoadedEvent(evt)
{
var gridContext = evt.getEventSource();
var rows = gridContext.getGrid().getRows();
if (rows.getLength() > 0)
{
let rowAttributes = rows.getByIndex(0).getAttribute();
let mappedResults = rowAttributes.map(x => x.getName() + " : " + x.getRequiredLevel());
alert(mappedResults);
}
}
I have a TreeView that displays a list of database records. When a user selects a record, I populate a grid with the related record details. The foreign key is sourceid.
I pass the selected record's id like this:
.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes").Data("GetCurrentSourceID"))
The GetCurrentSourceID function is simply:
function GetCurrentSourceID() {
return {sourceid: currentSourceID };
}
That works.
But when I want to add a new record, how do I get the currentSourceID value into the Post? If I try the obvious:
.Create(update => update.Action("AquisitionNotes_Create", AquisitionNotes").Data("GetCurrentSourceID"))
The value from the editor (0 of course) gets precedence and gets passed.
How do I force my actual sourceid to overwrite the editor's value? Or am I solving the problem in the wrong way?
Brad
To pass the default value to the create you should use DataSource
for example
#(Html.Kendo().Grid()
.DataSource(data=>data.Ajax()
.Model(m=>{
m.Field(field=>field.Whatever).DefaultValue(TheValue);
})))
Got it figured out thanks to the lead that #user5135401 gave me.
user5135401's solution works if you want to set a static default value. I do not know of a way to do a dynamic default value form Razor. This is how you do it per this forum post:
Call a JS function from the grid's .Edit event like:
.Events(events => events.Edit("SetDefaultSourceID"))
Then that function returns the value, in my case the foreign key value of the selected TreeView item:
function SetDefaultSourceID(e) {
if (e.model.isNew()) {
//set the required field value
e.model.set("sourceid", currentSourceID);
}
}
I have a Kendo UI grid which uses a dropdown as the editor for a field. I'm having problems getting the dropdown to properly bind to the viewModel (at least I think that is the issue). If I make a selection from the dropdown then add a new row or navigate from the row I am on, the field shows [object Object]. Now if I go back to the row and make a different selection and navigate to a different row, it behaves like it should, showing the selection I made. Here is a js bin showing the behavior.
The problem is SuggestedVendor type is string but when you click Add New Line Item link to add new item you set some default value Id: 1, Position: 1 and SuggestedVendor : null but it should empty string like SuggestedVendor : ''
dataSource.add({ Id: 1, SuggestedVendor: (viewModel.suggestedVendor === null) ? '' /* instead of null*/ : viewModel.suggestedVendor.SuggestedVendor, Position:1 });
Working demo
Note:
You can set your default value during datasource field declaration, for more details demo for custom editing. In this way you don't need manually handle $(".k-grid-custom-create").on("click", function (e) {...})
I've a Kendo grid with editable = incell and more than one required text field. The default values are empty strings. When I click on "Add new record" the first required field is marked as error because it's empty. I can only leave the field after I've done some input. Although the other required fields are still empty I can leave the row.
How can I prevent that a row can't be left without filling all required fields?
Try this,
$('.k-grid-save-changes').on("click", function () {
var grid = $("#grid").data("kendoGrid");
if (grid.editable && !grid.editable.validatable.validate()) {
//What ever you want to do
e.preventDefault();
return false;
}
});
While both autocomplete and select in jqgrid editform place the selected label into the cell, select will place the value (id) in the postdata array where autocomplete will place the label into the postdata array.
is there a way to get the editoption's autocomplete to post the item value (id) instead of the label?
here is the jqgrid code segment i'm using autocomplete in...
$('#tab3-grid').jqGrid({
colNames:['Workorder', 'wo.CUID',.....],
colModel:[
.
.
.
{name:'wo.CUID', index:'cu.LastName', width:120, fixed:true, align:'center', sortable:true, editable:true, edittype:'text',
editoptions:{dataInit:function(el){$(el).autocomplete({ source: 'php/customer-ac-script.php'
, minLength: 1
})
}
},
formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
editrules:{required:true}
},
.
.
.
$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
{view:true, closeOnEscape:true, cloneToTop:true}, // general parameters that apply to all navigation options below.
{jqModal:true, navkeys:[true,38,40], savekey:[true,13]}, // edit options.
{jqModal:true, navkeys:[true,38,40], savekey:[true,13], reloadAfterSubmit:false, afterSubmit: addRecordID}, // add options.
{jqModal:true, afterSubmit: serverMessage}, // del options.
{jqModal:true}, // search options.
{jqModal:true, navkeys:[true,38,40]} // view options.
);
The php code segment:
// construct autocomplete select.
$i = 0;
while($row = mysql_fetch_assoc($result)) {
$output[$i][$crudConfig['id']] = $row['CUID'];
$output[$i][$crudConfig['value']] = $row['LastName'];
logMsg(__LINE__,'I','cu.CUID: '.$row['CUID'].', cu.LastName: '.$row['LastName']);
$i++;
}
// encode to json format and send output back to jqGrid table.
echo json_encode($output);
logMsg(__LINE__,'I','Send json output back to jqGrid table: '.json_encode($output));
Would it be as simple as calling a function under the autocomplete select event or the grid before or after editform submit?
Also, i noticed this note in the jqgrid doc's for datainit: that says...
Note: Some plugins require the position of the element in the DOM and
since this event is raised before inserting the element into the DOM
you can use a setTimeout function to accomplish the desired action.
Would the lack of including the settimeout function be causing the problem?
The server code which provide the JSON response on the autocomplete request has id and value properties. On the other side the standard behavior of jQuery UI Autocomplete is to use label and value properties (see "Datamodel" in the documentation). The value of label property (if any exist) will be used to display in the contextmenu. The value of value property will be placed in the <input> field after the user choose the item from the contextmenu. The value of label property can has HTML markup, but the value of value property must be the text.
So I see the problem as pure problem of the usage of jQuery UI Autocomplete independent on jqGrid. If I understand correct your question you can solve your problem by modification your server side code.
Oleg's answer clarifying the data model for jquery UI's autocomplete, has allowed me to move forward and understand that autocomplete has nothing to do with constructing and sending the postdata array to the server, jqgrid's editform handles it. With that knowledge, i was able to answer my original question and successfully integrate autocomplete into jqgrid. So, in the interest of sharing, i'd like to show you all my motivation and solution.
By default, selecting a label from the autocomplete list put's the value of the selected label/value pair into the text box. All the editform cares about when you submit is what's in the edit fields. So when you submit the editform, the cell's postdata element value will again contain the value of the autocomplete text box. But what if while wanting to post the value of the label/value pair, you want the label of the label/value pair displayed in the text box? You have a problem! How do you get the value of the label/value pair posted to the server?
Well, after spending a few days on it, it turns out to be quite simply. While i'm sure there is more than one solution, here is mine:
add a hidden id column in the grid
define the select: and focus: events in the autocomplete function
in the select: function; insert the selected label into the text box (optional), disable the default behavior of autocomplete, then set the cell of the hidden column to the value of the selected label/value pair
in the focus: function; insert the selected label into the text box(optional), disable the default behavior of autocomplete
add an "onclickSubmit:" event to the navgrid edit options with function name something like "fixpostdata"
in the "fixpostdata" function; get the cell value of the hidden column and insert it into the postdata element associated with the cell.
The following are the grid and javascript code segments i used…
grid segments
{name:'wo_CUID', index:'wo_CUID', width: 70, hidden: true},
{name:'wo.CUID', index:'cu.LastName', width:120, sortable:true, editable:true, edittype:'text',
editoptions:{
dataInit:function(el){ // el contains the id of the edit form input text box.
$(el).autocomplete({
source: 'php/customer-ac-script.php',
minLength: 1,
select: function(event, ui){event.preventDefault();
$(el).val(ui.item.label);
var rowid = $('#tab3-grid').getGridParam('selrow');
// set the hidden wo_CUID cell with selected value of the selected label.
$('#tab3-grid').jqGrid('setCell', rowid,'wo_CUID',ui.item.value);},
focus: function(event, ui) {event.preventDefault();
$(el).val(ui.item.label);}
})
}
},
formoptions:{rowpos: 1, label:'Customer', elmprefix:'* '},
editrules:{required:true}
},
.
.
$('#tab3-grid').jqGrid('navGrid', '#tab3-pager',
{view:true, closeOnEscape:true, cloneToTop:true},
{jqModal:true, navkeys:[false,38,40], onclickSubmit: fixpostdata}, // edit options.
.
.
javascript function
// define handler function for 'onclickSubmit' event.
var fixpostdata = function(params, postdata){
var rowid = $('#tab3-grid').getGridParam('selrow');
var value = $('#tab3-grid').jqGrid('getCell', rowid,'wo_CUID');
postdata['wo.CUID'] = value;
return;
}
The fixpostdata function fires when you submit the editform but befor the postdata array is sent to the server. At this point you replace the cell's postdata element value with whatever you want. In this case, the value of the label/value pair stored in the hidden column cell. When the function returns, the modified postdata array is sent to the server.
Done!