I've got a Telerik MVC Server Side Grid with pagination, the component generates a pagination dropdown at the bottom of the table which lets you select the page size.
I would like to change the value of that dropdown programatically from javascript and make it so the grid triggers a refresh with the new value.
I have already tried targetting the dropdown itself like so:
var listViewPagerDropDownList = $(".k-pager-sizes").find("select").data("kendoDropDownList");
listViewPagerDropDownList.value(userPreferencePageSize);
Targetting the pager:
var pager = $(".k-grid-pager").data("kendoPager");
pager.pageSize(userPreferencePageSize);
As well as trying to change it manually with jQuery like so:
var selectBox = $(".k-pager-sizes").find("select");
selectBox.val(userPreferencePageSize);
selectBox.find("option[value='" + userPreferencePageSize + "']").prop("selected", true);
But no matter what I do, it has no effect. Any idea?
Confused as to what you actually want, but to change the pagesizes you need to access the pager's dropdownlist datasource that holds the page values:
// Add a page size of 25 to the dropdown
$("select[data-role='dropdownlist']").data('kendoDropDownList').dataSource.add({text: "25", value: "25"});
You could use other datasource commands to clear existing values.
If you just want to change the page size of the grid, try:
$("#grid").data("kendoGrid").dataSource.pageSize(numberOfRows);
Related
I am using Kendo Grid with inline editing .
I need, on click of checkbox which is present in the grid i have to make row as editable and come out of edit mode.
To make kendo grid as editable i am using this code
var grid = $("#GridID").data("kendoGrid");
var gridDataArray = grid.dataSource._data;
var ctrl = event.target;
var row = $(this).parents('tr');
var index = row.index();
grid.editRow(row);
so the selected row is in edit Mode. Now, i need to get out of edit mode using javascript/JQuery.
Use saveRow or cancelRow, depending on whether you want to save the user changes or not.
On a side note, use the official data method
grid.dataSource.data()
instead of internal fields:
grid.dataSource._data
I am trying to append my Kendo Grid toolbar after some functions using following::
1) I am getting the toolbar as::
var toolbar = $("#Grid").find(".k-grid-toolbar").html();
2) then after some changes to Grid using grid.setOptions(JSON.parse(options)) which causes disappear of Toolbar i am again appending toolbar to grid as::
$("#Grid").find(".k-grid-toolbar").html(toolbar);
Here toolbar is appended properly but I am not able to use those functions(i.e. Dropdown inside of toolbar).
How can i get my toolbar Dropdown working?
Thanks in advance
Getting the html() method provides ONLY the HTML code, and not the JavaScript attached to the elements from this HTML. So when you inject your HTML code in the toolbar, you need to call again the JavaScript attached to the elements. If you want to get a kendo widget configuration, for example a dropdownList, you need to call options and dataSource from your widget.
E.g:
var $toolbar = $("#Grid").find(".k-grid-toolbar"),
toolbar = $toolbar.html(),
// Dropdown list Element
$ele = $("input[name=myInput]", $toolbar.get(0)),
// Dropdown list Widget object
ddl = $ele.data("kendoDropDownList"),
cfg = ddl.options;
// toJSON returns objects without the observer properties
cfg.dataSource = ddl.dataSource.data().toJSON();
// HERE YOU REBUILD YOUR TABLE
$toolbar.html(toolbar);
$("input[name=myInput]", $toolbar.get(0)).kendoDropDownList(cfg);
If the elements you add to the toolbar are always the same, I would suggest you create instead a function with the grid as argument (and the data, if the data changes):
function setToolbarContent(grid){
var $toolbar = grid.find(".k-grid-toolbar");
$toolbar.html('My HTML String');
$toolbar.find("input[name=myInput]").kendoDropDownList({my: 'cfg'});
}
And by the way, if you were adding the toolbar config and template to grid.setOptions(), maybe it wouldn't disappear in the first place :)
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
I have three Tabs and in each tab, I have a Grid.
The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:
<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">
The rows are constructed from Doublebox objects. The data is populated successfully.
The Problem:
I need to handle multiple-cell editing on the client side. The editing is done via mouse-clicking on a particular cell and entering a value.
As example let's say that the user edits first cell on the first row and the value should be
propagated to all other cells on the same row and in all three Grids (so also the two Grids which the user currently does not see, because they are in tabpanes).
I am using jQuery to do this value propagation and it works OK.
I am passing the jQuery as follows:
doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);
This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.
The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones.
I am assuming that ZK-Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.
Code of how I extract the Grid values:
Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);
The model for my Grid is a List of MyCustomRow:
myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));
I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK-Events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)
Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!
Your problem is exactly what you are expecting.
Zk has it's own event system and do not care about your jq,
cos it's jq and zk don't observ the DOM.
The ways to solve your problem.
Use the "ZK-Way":
Simply listen at server-side and chage things there.
I am not sure if not selected Tabs
are updateable, but I am sure you could update the Grid
components on the select event of the Tab.
Fire an zk-event your self:
All you need to know, is written in the zk doc.
Basically, you collect your data at client side, send
an Event to the server via zAu.send() extract the
data from the json object at serverside and update your Grids
I would prefer the first one, cos it's less work and there should not be
a notable difference in traffic.
I post the solution we came up with:
This is the javascript attached to each Doublebox in the Z-Grid
//getting the value of the clicked cell
var currVal = jq(this).val();
//getting the next cell (on the right of the clicked cell)
objCells = jq(this).parents('td').next().find('.z-doublebox');
// if there's a next cell (returned array has length) - set the value and
// fire ZK onChange Event
if (objCells.length) {
zk.Widget.$(jq(objCells).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCells).attr('id')).fireOnChange();
} else { //otherwise we assume this is the last cell of the current tab
//So we get the current row, because we want to edit the cells in the same row in the next tabs
var currRow = jq(this).parents('tr').prevAll().length;
//finding the next cell, on the same row in the hidden tab and applying the same logic
objCellsHiddenTabs = jq(this).parents('.z-tabpanel').next().find('.z-row:eq(' + currRow + ')').find('.z-doublebox');
if (objCellsHiddenTabs.length) {
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).setValue(currVal);
zk.Widget.$(jq(objCellsHiddenTabs).attr('id')).fireOnChange();
}
}
The java code in the RowRenderer class looks something like this:
...
if (someBean != null) {
binder.bindBean("tBean", someBean);
Doublebox box = new Doublebox();
setDefaultStyle(box);
row.appendChild(box);
binder.addBinding(box, "value", "tBean.someSetter");
...
private void setDefaultStyle(Doublebox box) {
box.setFormat("#.00");
box.setConstraint("no negative,no empty");
box.setWidth("50px");
String customJS = ""; //the JS above
//this is used to visually see that you're editing multiple cells at once
String customJSNoFireOnChange = "jq(this).parents('td').nextAll().find('.z-doublebox').val(jq(this).val());";
box.setWidgetListener(Events.ON_CHANGING, customJSNoFireOnChange);
box.setWidgetListener(Events.ON_CHANGE, customJS);
}
What is interesting to notice is that ZK optimizes this fireOnChange Events and send only 1 ajax request to the server containing the updates to the necessary cells.
I'm dynamically populating several select boxes via ajax calls when my app first opens. When the page loads however, what I am noticing is my select boxes start out empty and then once populated they adjust their size accordingly. This is annoying and a bit of a UI distraction.
I do have the population methods within my document.ready method, but perhaps I am approaching this incorrectly?
$(document).ready( function(){
populateOptions(); // Populate our select box upon page load.
});
// Builds a select list and binds it to a class
function populateOptions(){
var optionList = getOptions();
var myList = "";
// Loop over our returned result set and build our options
for(i=0; optionList.length; i++){
myList += "<option>"+optionList[i][1]+"</option>";
}
// Now take our myList and append it to our select
$("#myOptionList").append(myList);
}
Options: <select id="myOptionList"></select>
you can set a width to the select by css
Add a dummy option to show while Loading via AJAX:
<select id="myOptionList">
<option>Loading...</option>
</select>
Clear "loading" option and add new list once available
$("#myOptionList").html('');
$("#myOptionList").append(myList);
to set width with css:
#myOptionList{
width:150px;
}
One simple solution would be to create your child directly when your ajax function is called.
Before finishing your populateOptions() function, append the select to your .
I remember having this issue, it is possible to solve it but this is a very simple way to handle it.
Hope this help.