Can we replace kendo UI dropdown list with default html "select -> option" elements?
I am concerned about how it is displayed in mobile devices. I want to open native apple and android interface when selecting a dropdown value.
Yes it is absolutely possible. I will do an example with kendo dropdown and JQuery
<input id="DropdownList" class="form-control"/>
Here is a simple input box.
We need a simple Javascript to treat is as a dropdownlist.
<script>
$("#DropdownList").kendoDropDownList({
dataTextField: "Name",
dataValueField: "ID",
});
</script>
And to bind it to some datasource all we have to do is create a JQuery function to do it as
var dropDown = $("#DropdownList").data("kendoDropDownList");
dropDown.setDataSource(someList);
someList is a simple JSON object which we can get through ajax requests.
I'm using JqGrid with MVCJqGrid Html wrapper in my mvc5 project. MVCJqGrid version I'm using is 1.0.15. I have following code in my cshtml file in order to create grid in page.
#(Html.Grid("Contacts")
.SetCaption("Contacts")
.SetUrl(#Url.Action("Contacts", "Home"))
.SetAutoWidth(true)
.SetViewRecords(true)
.AddColumn(new Column("Name").SetAlign(Align.Left).SetEditable(false))
.AddColumn(new Column("IsPrimaryContact").SetAlign(Align.Center).SetFormatter(Formatters.Checkbox).SetLabel("Is Primary?"))
.AddColumn(new Column("Email").SetLabel("Email Address").SetFormatter(Formatters.Email))
.AddColumn(new Column("Handphone").SetAlign(Align.Right).SetFormatter(Formatters.Number))
.AddColumn(new Column("Office").SetAlign(Align.Right))
.AddColumn(new Column("Telephone").SetAlign(Align.Right))
.AddColumn(new Column("Other").SetAlign(Align.Right))
)
In above code, "IsPrimaryContact" is bool value and I display it as checkbox column in grid. When page loads, all the columns are shown as readonly i.e. I cannot edit but Checkbox column remains editable and can check/uncheck the checkbox in column. I want checkbox also to be disabled and user should not be able to change its value. I have already added SetEditable for Checkbox column to false and also tried few other things but checkbox in column always remains enabled. How I can show the checkboxes in column as disabled when page loads?
Instead of using the standard formatters, you could use a custom formatter. You can find an example here http://mvcjqgrid.skaele.it/Home/Formatters
Set the custom formatter for the column:
.AddColumn(new Column("IsPrimaryContact").SetAlign(Align.Center).SetCustomFormatter("displayCheckBox").SetLabel("Is Primary?"))
Formatter function
<script type="text/javascript">
function displayCheckBox(cellvalue, options, rowobject) {
return '<input type="checkbox" value="' + cellvalue + '" disabled="disabled">';
}
</script>
Didn't test the code, but it should work ;)
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
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!
I am using jqgrid and the toolbar filter. After filtering I want to reload the searchoptions in the toolbar filter with:
loadComplete: function() {
mygrid.jqGrid('setColProp','device_nr',{searchoptions: {dataUrl:'filter_jq.php?val=newval'}});
}
I tried also:
var str = ":All;1:Dev1;2:Dev2";
mygrid.jqGrid('setColProp','device_nr',{searchoptions:{value:str}})
But nothing changed.(but I can change the param "sopt").
Is it possible to change the searchoptions in filter toolbar with setColProp?
This is how it defined in ColModel:
colModel:[{name:'device_nr',index:'device_nr', width:100, stype: 'select',searchoptions:{dataUrl:'filter_jq.php?val=init',sopt:['eq']}}
]
I am afraid that you will have to manually modify the contain of the corresponding select element of the toolbar. If the name of the corresponding column in the colModel is 'device_nr' the id of the corresponding control will be 'gs_device_nr' and you should do the following:
$("#gs_device_nr").html('<option value="">All</option>'+
'<option value="1">Dev1</option>'+
'<option value="2">Dev1</option>');