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 :)
Related
I am using nested data trees in Tabulator.js and if I use the option dataTreeStartExpanded:true all nested rows will be expanded. I want only one be expanded on load/render? Is that possible?
Here is working jsFiddle to play around.
I found that there is a div with class tabulator-data-tree-control-expand or tabulator-data-tree-control-collapse. Changing the name in dev tools does nothing.
Currently it looks like
But I want to be like that after the web page loads
Maybe I can somehow click the + to expand. Tabulator has a listener there
But I do not know how to call it for that particular +.
oh, I found it in documentation.
.. a function that will be passed in a row component and the level of that row in the table (starting at 0), it should return a boolean value to indicate the rows expansion state:
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeStartExpanded:function(row, level){
return row.getData().driver; //expand rows where the "driver" data field is true;
},
});
and then in data you have to use new property driver:true
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);
I have made a grid with buttons in each row which on-click opens a pop-up having different grids on each button.
Each row of the pop-up grid may have a child (another grid with only one column). And if there is no child it should be empty.
So, I'm trying to map each row with a child using parent-Id(PId) and (Id) as shown in the given example, which is taking all the available child's into a row or taking none of them into it.
Dojo Sample Code
Using detailInit requires a slightly different method of exposing the data belonging to the parent item. You can extract this data using e.data like so:
var newData2 = crdata.filter(function(ell) {
return ell.NId == e.data.Id && ell.PId != 0;
});
That along with checking that the dataSource NId = parent row Id and moving the setup of the dataSource for the child grid into the detailInit function itself should do the trick.
Dojo example to demonstrate the above.
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
As the title states, I have a django-selectable autocomplete form field on my page, that I am trying to clone dynamically after page load. The cloning part works, but the autocomplete fields do not function. I don't know the internals of django-selectable, and I'm still learning jQuery so I am lost as far as figuring out how to "fix" the autoselect functionality.
My general approach is this: I render the form widget using django template variable inside a div container, and I clone the div container.
HTML
<div class="autocomplete" id="autocomplete_{{ form.instance.id}}">{{form.autocomplete_dropdown}}</div>
jQuery
// This works, just the cloned form lacks "autocomplete" functionality.
var autocompleteArray = theDiv.find('.autocomplete');
var acClone = autocompleteArray.clone();
table.find(".column").append(acClone);
Based on SunnySydeUp's comments I made the following revisions:
jQuery
// Clone the div and all its contents
var acClone = autocompleteArray.clone(true, true);
// Get the children of the div
var acCloneChildrenArray = acClone.children();
// iterate through the children array, modify ids where they exist to make them unique
// e.g., unique id contained in idSuffix.
for (var i = 0; i < acCloneChildrenArray.length; i++) {
// if it has an id, make it unique
if (acCloneChildrenArray[i].getAttribute('id')) {
var ident = acCloneChildrenArray[i].getAttribute('id')
acCloneChildrenArray[i].setAttribute('id', ident+'_'+idSuffix);
};
};
Now the data and events are copied, but they are tied to the prototype/master dropdown. That is, clicking one of the cloned objects actually triggers the dropdown for the master. I guess the question comes down to how to attach the event handler dynamically to the new dropdowns?
Final working code (has a minor bug--duplicated dropdown button, but the autocomplete and dropdown functionality works, per SunnySydeUp's solution).
jQuery
// Clone the div
// We leave clone deepcopy flags at default==false
var acClone = autocompleteArray.clone();
// Get the children of the div
// You don't need to set unique id's on the children, it's irrelevant.
// Bind the new selectable fields to the event handlers.
window.bindSelectables('body');
I haven't used django-selectable before but I'm guessing it uses javascript/jQuery to make the autocomplete work. When you call clone, it doesn't clone the javascript for the dropdown. Try doing:
var acClone = autocompleteArray.clone(true);
Passing in true will make jQuery also copy the data and events on that input.
Clone documentation