I'm new with Kendo UI PanelBar. I would like to expand the panelbar using javacript when the user click on a button. Thanks for your help.
#(Html.Kendo().PanelBar()
.Name("TestBar")
.Items(panelbar =>
{
panelbar.Add().Text("Additional Information")
.Content(#<text>#Html.Partial("Req") </text>);
})
)
Please try with the below code snippet. Call below funciton in your button click event.
<script>
function ExpandItemInPanelBar(){
var panelBar = $("#TestBar").data("kendoPanelBar");
// I have set 0 in 'eq(0)' so it will expand first item you can change it as per your code
panelBar.select(panelBar.element.children("li").eq(0));
var item = panelBar.select();
panelBar.expand(item);
}
</script>
Let me know if any concern.
Update 1:
//Check any item is expanded in panelbar
if(panelBar.element.children("li").hasClass("k-state-active") == true)
{
alert('items(s) expanded');
}
//Check every item is expanded or not in panelbar
items = panelBar.element.children("li");
for(var i = 0 ; i < items.Length; i++)
{
if($(items[i].hasClass('k-state-active'))
{
alert('this item is expanded');
}
}
Related
Here I have a code to update a cell contet when pressing a button.
It works fine, but it doesn't set the flag, that indicates, that the cell has been changed.
It should look like this with the litle red triangle:
The code:
<a id="button" href="#">Click me</a>
<div id="grid"></div>
<script>
var dataSource, grid;
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
data: [
{ category: "Beverages", name: "Chai", price: 18},
{ category: "Seafood", name: "Konbu", price: 6}
],
})
grid = $("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
}).data("kendoGrid");
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
});
});
</script>
Update:
Here is the update based on #tstancin: Kendo example.
Thank you for the answer - I had thought of it to.
I am wondering if it's possible to do the update in a more clean way with some binding through som MVVM perhaps?
Kind regards from Kenneth
If that's all you want then you should expand your button click code with the following:
$('#button').click(function (e) {
var data = grid.dataItem("tr:eq(1)");
data.set('category', 'Merchandice');
$("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
$("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});
But if you, for instance, manually change the value of name column from Chai to something else, and then click the click me button, the dirty marker in the name column will disappear.
You should use flags for every cell and set them before data.set(). Then, in the grid's dataBound event you should inspect every cell's value and assign the dirty marker if it's needed. For manual changes you should handle the save event and set flags there.
I wrote a script that makes it posible to use a call like this:
SetCellData(id, columnName, value);
So with an id, a columnName and a value, I can update a value in a grid and the flag will be set on the cell.
function SetCellData(id, columnName, value) {
var dataItem = grid.dataSource.get(id);
dataItem.set(columnName, value);
var columnIndex = GetColumnIndex(columnName);
if (columnIndex > -1) {
var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')
if (!cell.hasClass("k-dirty-cell")){
cell.prepend("<span class='k-dirty'></span>");
cell.addClass("k-dirty-cell");
}
}
}
function GetColumnIndex(columnName) {
var columns = grid.columns;
for (var i = 0; i < columns.length; i++)
if (columns[i].field == columnName)
return i;
return -1;
};
I have the code here : example
I have a Kendo Grid and I want to detect the right click and left click, so based on these I do two separate things. I used to get ID from the grid on either left or right click before and was working fine. But to fix an IE11 clicking problem I had to update the kendo.js to 2013.2.716 version and after that it detects left/right click all right but for "Right Click" can't get the selected row Id. The following is my code to detect left/right click and PlodId is a column in my grid:
function LoadMainShiftGrid() {
//For Right Click --> Delete Selected Shift
$("#shiftReport").delegate("tbody>tr", "contextmenu", function (e) {
if (e.which == 3) {
$("#plodDetails").hide();
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
// MY PROBLEM FOR RIGHT CLICK SELECTEDROWDATA COMES TO NULL <<<<
var SelectedPlodId = selectedRowData.PlodId;
}
});
//For Left Click --> Show Plod Detials
$("#shiftReport").delegate("tbody>tr", "click", function (e) {
if (e.which == 1) {
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
});
}
Thank you in advance.
I've changed the click binding function to 'mousedown' and select the row manually (Thank you #drw85 for the idea) and after that it works fine.
function LoadMainShiftGrid() {
$('#shiftReport').data('kendoGrid').tbody.on('mousedown', function (e) {
//select the clicked row manually; this resolves all problem :D
$('#shiftReport').data("kendoGrid").select(e.target.parentElement);
if (e.which == 3) {
$("#plodDetails").hide();
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
//For Left Click --> Show Plod Details
if (e.which == 1) {
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
});
}
I think that happens, because the right click doesn't actually select the row.
You can select it through code, before you try to get it via
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
You should be able to get the click target through the event object and set the selected property on it via kendo.
var index = gridData.find(e.delegateTarget).index();
var dataItem = gridData.dataSource.view()[index];
dataItem.selected();
You might have to pass true to the selected function.
You can also get the selected row like this..
$("#shiftReport").on("mousedown", "tr[role='row']", function (e) {
if (e.which === 3) {
$(this).addClass("k-state-selected");
var gview= $('#shiftReport').data("kendoGrid");
var selectedRow = gview.dataItem($(this));
}
});
Use .Selectable() will high light the row when you hover over rows and click on any particular row, sample code:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.PageSize(15)
)
.Sortable()
.Columns(columns =>
{
columns.Bound(model => model.NetworkID);
columns.Bound(model => model.FirstName);
columns.Bound(model => model.LastName);
})
.Filterable()
.Scrollable(s => s.Height(550))
.Pageable()
.Resizable(resize => resize.Columns(true))
.Selectable()
)
In IE 11 this will work
$("#grid").kendoGrid({
change: function(e) {
var selected = this.select();
var selectedDataItems = [];
for (var i = 0; i < selected.length; i++) {
var dataItem = this.dataItem($(selected[i]).closest("tr"));
selectedDataItems.push(dataItem);
}
}
});
In my Kendo grid I am trying to put the 'create new item' button in the header (title) of the command column instead of the toolbar. Here is part of my grid definition:
var grid = $("#grid").kendoGrid({
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } },
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"},
My question is: how to create a new row and put that row in edit mode in 'NewItemClick()'
There are some troublesome scope issues when you try to bind the click event in the template definition itself.
Instead, it is easier to assign the link an ID, and then bind the click event later. Notice that I've given it id=create.
headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"
Then in document ready, I bind the click event:
$("#create").click(function () {
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.page(dataSource.totalPages());
grid.editRow(grid.tbody.children().last());
}
});
The above function creates a new row at the bottom of the grid by manipulating the datasource. Then it treats the new row as a row "edit". The action to create a new row was borrowed from OnaBai's answer here.
Here is a working jsfiddle, hope it helps.
I would like to complete on gisitgo's answer. If your datasource takes some time to update, when calling page(...), then the refresh of the grid will cancel the editor's popup. This is averted by binding the call to editRow to the "change" event :
var grid = $("#grid").data("kendoGrid");
if (grid) {
//this logic creates a new item in the datasource/datagrid
var dataSource = grid.dataSource;
var total = dataSource.data().length;
dataSource.insert(total, {});
dataSource.one("change", function () {
grid.editRow(grid.tbody.children().last());
});
dataSource.page(dataSource.totalPages());
}
NB: This approach will yield problems if your grid is sorted because the new row will not necessarily be at the end
I have found that issues might appear if you have multiple pages, such as the inserted row not opening up for edit.
Here is some code based on the current index of the copied row.
We also edit the row based on UID for more accuracy.
function cloneRow(e) {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
if (row && row.length == 1) {
var data = grid.dataItem(row);
var indexInArray = $.map(grid.dataSource._data, function (obj, index)
{
if (obj.uid == data.uid)
{
return index;
}
});
var newRowDataItem = grid.dataSource.insert(indexInArray, {
CustomerId: 0,
CustomerName: null,
dirty: true
});
var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']");
grid.select(newGridRow);
grid.editRow(newGridRow);
//grid.editRow($("table[role='grid'] tbody tr:eq(0)"));
} else {
alert("Please select a row");
}
return false;
}
I have this code:
function getArea (){
var area1 = document.getElementById('first');
var area2 = document.getElementById('adart');
if (area1.style.display.match("none") && area2.style.display.match("none"))
{
area1.style.display = 'block';
}
else
{
area1.style.display = 'none';
}
}
function getArea1 (){
var addArticle = document.getElementById('adart');
var area1 = document.getElementById('first');
if (addArticle.style.display.match("none") && area1.style.display.match("none"))
{
addArticle.style.display = 'block';
}
else
{
addArticle.style.display = 'none';
}
}
Now, in my html page:
I have two text areas and two buttons.
Each button "activates" a different text area.
All that my code does is to make the property 'display' in each text area to be "block" or "none", also, to make sure that if one text is already visible, the others will not.
The problem is that the first button "edit article" is not working until I click on the second button "add article". The second button works properly.
Any thoughts?
I just want to place a dropdown list on my page and when i select any page number from dropdownlist , it should display appropriate page from webgrid. MVC3
//For displaying Dropdown List...
#{
int i = 1;
<select id="number">
#for (i = 1; i < 6; i++)
{
<option value=#i>
#i
</option>
}
</select>}
//Jquery for navigating on page selected by dropdownlist...
<script language="javascript">
$(document).ready(function () {
$("#number").change(function () { // Number is the name of dropdownlist control
var selectedvalue = $('#number').val(); // Value selected by control
value = '/student?page=' + selectedvalue; // Here student is my controller name
$('#editlink').attr('href', value); // For rendering on a Action Link.
});
});</script>
//Action Link.....
#Html.ActionLink("Go", "student", "page=", new { ID = 0 }, new { id = "editlink" })
// edit link is the link name used in Jquery.