I have kendo tree view with check boxes. When i do the button click the values are getting lost after refresh. I wanted to show back to the user after button click could you please help me on this.
$("#treeview1").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource:EquipmentTypes,
id: ["EquipmentTypeId"],
dataTextField:["EquipmentTypeName"],
expanded: false,
spriteCssClass: "rootfolder",
dataValueField: ["EquipmentTypeId"],
value:"#Model.UtilizationFilter.EquipmentTypeFilter"
});
I assume this is because the button in the question does a post of a form. If that is the case then I don't see any easy solutions.
You could either change the buttons so they fetch via ajax. Or add a change event to the tree and then save the values in hidden fields and set them manually after load.
.Events(e => e.Check("onCheck"))
Related
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
I'm having a weird issue. My kendo drop down list is revealing the drop down list each time I press the up or down arrow, on all the inputs in my app. Does anyone know what can be causing this? I went to the kendo page that talks about this, but its mostly a reference for the keyboard shortcuts.
I should mention that kitting the down and up arrow DOES change to the next item in the list, but I can't have the dropdown list showing each time.
var dataYesNo = [ { text: "Yes", value: 'true' }, { text: "No", value: 'false' } ]; $('#ddlList').kendoDropDownList({ dataSource: dataYesNo, dataValueField: 'value', dataTextField: 'text', optionLabel: 'select a value...' });
OK, I figured it out. I stumbled onto this ...
http://www.telerik.com/forums/conflict-w-bootstrap-js-dropdownlist
I had to upgrade my bootstrap version to 3.3.5 and works like a charm. Regardless, thanks for the assistance.
I am evaluating kendo ui right now to use in our big application. We have a situation where we have much values in dropdowns (like 200+) and there are more than 1 drop down with that size. So if we have a complex form. The Page Load takes time to render the form. (Due to that each box needs to be loaded from service and filled up).
We avoided this by writing our own asp.net web control with on demand support (like autoBind property) in the drop down list in kendo ui.
Now, DropDownList from KendoUI serves the purpose with autobind = false, BUT when setting value it fetches data from remote binding first and then selects appropriate value. (this is cool and really good for small lists) but Potentially this will mean that when we load the page and set the value it will issue remote binding calls for each of the drop downs.
Now,
Can we set value/ text to appear without issuing the remote binding. We want remote binding to be done ONLY when the user clicks on the drop down itself. (not when we are filling form). This will save extra calls to system and help quickly render the form to user.
Here is JS Bin
http://jsbin.com/ayivad/3/edit
If somebody from kendo ui would like me to help out - let me know, but this idea will allow us to use kendo ui drop downs with good use.
<input type="button" id="btnSet" value="Set Value (Click without clicking on DropDown" />
<br/><br/>
<select id="products"></select>
$(document).ready(function () {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products",
}
}
}
});
var combobox = $("#products").data("kendoDropDownList"),
setValue = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
combobox.value(3);
};
$("#btnSet").click(setValue);
});
Thanks,
Riz
1) Set text instead of value : http://docs.kendoui.com/api/web/dropdownlist#configuration-text
Kendo:
text String(default: "")
Define the text of the widget, when the autoBind is set to false.
Example
$("#dropdownlist").kendoDropDownList({
autoBind: false,
text: "Chai"
});
dirty alternative - Try to hijack ddl "optional label" for your needs. Load your data for the page inclusive of the value you want to show at the ddl, then initialize ddl's with optional values equal to the value you want to show. Once user opens the ddl, remote data will load, once data loaded you will ovewrite/remove the optional label and happy days.
http://docs.kendoui.com/api/web/dropdownlist#configuration-optionLabel
(Consider splitting the list, 200 long drop down us far from user friendly.)
$("#dropdownlist").kendoDropDownList({
optionLabel: "My value" });
Also consider using Kendo ComboBox, afterall auto complete after 3 chars or so sounds as quite sensible solution in case of your 200 items. We use same solution to 500 + combobox.
I am trying to bring up a fancybox widget using a custom button in jqgrid. To do this, I would need to grab the Id of the selected row. I am currently trying this to do it. And it is not working. The custom button shows, it responds to the click event, but I cannot get the selected id. Can anyone help me out? Thanks!!!
jQuery("#list").jqGrid('navGrid','#pagernav',
{edit:true,add:false,del:false,search:false},
{
height:280,
reloadAfterSubmit:true,
closeAfterEdit:true,
editCaption: "Edit Sample",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
checkOnSubmit:true,
saveData: "Data has been changed! Save changes?",
bYes : "Yes",
bNo : "No",
bExit : "Cancel"
}
).jqGrid('navButtonAdd','#pagernav',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(lastsel){
alert("Adding Row to id" + lastsel);
},
position:"last"
});
Look the answer. It shows how to get 'selrow' parameter of jqGrid which you need. In case of multiselect scenario (multiselect: true) you should use 'selarrrow' parameter instead.
The only parameter of navButtonAdd is the event object from the click event (see jqGrid code). Because the click is on your custom button it bring you very little information. You can use the event only for example to implement different actions if the button was clicked in combination with Ctrl or Shift or some other keys pressed. In all standard scenarios you have to use 'selrow' or 'selarrrow' parameters.
You should be careful, because the custom button can be clicked even if no rows are selected. In the case the value of 'selrow' parameter is null (the value of 'selarrrow' is empty array []).
You can consider to implement hide/show or enable/disable some navigator buttons based on whether or which row is selected. See this and this demos from this and this old answers.