This is what I am trying to accomplish.
var tabIndex = 4; //hard coded NOT WHAT I WANT
var tabStrip = $("#navigationTab").data("kendoTabStrip");
var item = tabStrip.tabGroup.find(':contains("Billing")');
tabIndex = item.??
setTabUrl("navigationTab", tabIndex, '#Url.Action(Mvc.Areas.Account.Billing.ActionNames.AccountBilling, Mvc.Areas.Account.Billing.Name, new { id = Model.AccountId })');
Thanks
var tabStrip = $("#navigationTab").data("kendoTabStrip");
var item = tabStrip.tabGroup.find(':contains("Billing")');
var tabIndex = item.index(); // tabIndex == 4
Related
I have a problem, I like to show a select text values of a MultiSelect control on a tooltip.
I only can show the value(numeric) from MultiSelect, this is my code:
var multiselect = $("#combo_multi").data("kendoMultiSelect");
value2 = multiselect.value(); //show only numeric values ->14376, etc.
Show the numeric values together without spaces. ->14376
I like to show the text value, not the numeric value.
I think I have to use an array for show the text value, but I don´t know how do it.
If somebody have the response of this problem, I appreciate the solution. Thanks.
Maybe this could help you a bit
var multiselect = $("#combo_multi").data("kendoMultiSelect");
var value2 = multiselect.value();
var selectedValues = value2.split(",");
var multiSelectData = multiselect.dataSource.data();
for (var i = 0; i < multiSelectData.length; i++) {
var numberValue = multiSelectData[i].number;
for (var j = 0; j < selectedValues.length; j++) {
if (selectedValues[j] == numberValue) {
// here we get description for value
var desc = multiSelectData[i].description;
break;
}
}
}
Example other
$("#multiselect").kendoMultiSelect();
var multiselect = $("#CityTo").data("kendoMultiSelect");
var dataItem = multiselect.dataItems();
//***Debug
var CityArray = new Array();
CityArray = dataItem;
alert(JSON.stringify(CityArray));
//***End Debug
//**************** Applied example
var newHtml = "";
var item = dataItem;
$.each(item, function (index, item) {
newHtml += '<div class="panel panel-default" ><div class="panel-heading">' + item.City_Name + '</div><div class="panel-body">Panel Content</div></div>';
});
$("#CityCount").html(newHtml);
You can see the details "dataItem" using "item."
item.City_Name
I'm on a newer version of Kendo UI so possibly things have changed since you asked this. I'll give you an updated answer..
var multiselect = $("#combo_multi").data("kendoMultiSelect");
var selectedValues = multiselect.value();
var multiSelectData = multiselect.dataSource.data();
var count = selectedValues.length;
for (var i = 0; i < multiSelectData.length; i++) {
if (selectedValues.indexOf(multiSelectData[i].Value) >= 0 ) {
//found, do something
var selectedText = multiSelectData[i].Text;
count--;
}
if (count == 0) {
break;
}
}
I know the default icon is "circle",now I want to change the icon shape.The total icon shape are only "circle", "square", "triangle", "cross".Can Iuse custome icon?I use these codes in the databound event,but it seems not work.
var colorArr = new Array("#FF0000", "#FF8C00", "#006400", "#40E0D0", "#800080");
var iconShapeArr = newArray("circle", "square", "triangle", "cross");
function onDataBound(e) {
var chart = e.sender;
var series = chart.options.series;
for(var index = 0; index <= series.length - 1; index++) {
chart.options.series[index].color = colorArr[index];
chart.options.series[index].markers.background = colorArr[index];
// chart.options.series[index].notes.icon.shape = "square";
}
As far as I know,it can not be custom.You can change the type like these:
function onDataBound(e) {
var colorArr = ["#FF0000", "#FF8C00", "#006400", "#40E0D0", "#800080"];
var iconShapeArr = ["triangle", "square", "triangle", "cross"];
var chart = e.sender;
var series = chart.options.series;
for(var index = 0; index <= series.length - 1; index++) {
chart.options.series[index].color = colorArr[index];
chart.options.series[index].markers.background = colorArr[index];
chart.options.series[index].markers.type = iconShapeArr[index];
}
}
I'm having a similar issue to this question - however I am requiring to get 2 e.parameters of both 1st and 2nd list boxes in order to populate the spreadsheet for the 3rd list box.
The vert is being read by the e.parameter, but the chan is undefined, which I do not understand as it is fully functional in the second list box but not the third.
Is there something that I have overseen in this code?
var channelBox = app.createListBox().setId('channelBox').setName('channelBox').setWidth(152).setHeight(22);
var chanHandler = app.createServerChangeHandler('showChannelinfo');
chanHandler.addCallbackElement(channelBox);
channelBox.addChangeHandler(chanHandler);
var chaArray = ['Select channel','--','Email','Phone','Chat']; for (var i=0;i<chaArray.length;++i) {channelBox.addItem(chaArray[i]);};
var verticalBox = app.createListBox().setId('verticalBox').setName('verticalBox').setWidth(152).setHeight(22);
var vertHandler = app.createServerChangeHandler('showVerticalinfo');
vertHandler.addCallbackElement(verticalBox);
verticalBox.addChangeHandler(vertHandler);
function showChannelinfo(e){
var app = UiApp.getActiveApplication();
var itemSpreadsheetKey = 'ABC------------123';
var openedSS = SpreadsheetApp.openById(itemSpreadsheetKey);
var sheetList3 = openedSS.getSheetByName("boolean3");//Vertical Lookup Sheet
var channelBox = app.getElementById('channelBox');
var verticalBox = app.getElementById('verticalBox');
var chan = e.parameter.channelBox;
if (chan == 'Phone')
{ verticalBox.clear();
var marketFilter = sheetList3.getRange('A1').setFormula('=iferror(filter(boolean2!A:D,boolean2!B:B=TRUE))');}
if (chan == 'Email')
{ verticalBox.clear();
var marketFilter = sheetList3.getRange('A1').setFormula('=iferror(filter(boolean2!A:D,boolean2!D:D=TRUE))');}
if (chan == 'Chat')
{ verticalBox.clear();
var marketFilter = sheetList3.getRange('A1').setFormula('=iferror(filter(boolean2!A:D,boolean2!C:C=TRUE))');}
var numItemList1 = sheetList3.getLastRow();//get the item array
var list1ItemArray = sheetList3.getRange(1,1,numItemList1).getValues();//Add the items in ListBox
for(var i=0; i<list1ItemArray.length; i++)
{verticalBox.addItem(list1ItemArray[i][0]);}
if (chan == '--')
{verticalBox.clear();
var vertArray = ['Select vertical','Hardware','Apps','Ebooks','Movies','Music','Nik','Shopping','Places','Wallet','YouTube','BeatThatQuote'];
for (var i=0;i<vertArray.length;++i) {verticalBox.addItem(vertArray[i]);};}
return app
};
function showVerticalinfo(e){
var app = UiApp.getActiveApplication();
var itemSpreadsheetKey = 'ABC------------123';
var openedSS = SpreadsheetApp.openById(itemSpreadsheetKey);
var sheetList4 = openedSS.getSheetByName("boolean4");//Language Lookup Sheet
var channelBox = app.getElementById('channelBox');
var verticalBox = app.getElementById('verticalBox');
var langBox = app.getElementById('langBox');
var chan = e.parameter.channelBox;
var vert = e.parameter.verticalBox;
langBox.clear();
var langFilter = sheetList4.getRange('A1').setFormula('=iferror(filter(boolean!A:D,boolean!A:A="' + chan + '",boolean!B:B="' + vert + '",boolean!D:D=TRUE))');
//**this returns as chan = undefined**
var numItemList2 = sheetList4.getLastRow();//get the item array
var list1ItemArray2 = sheetList4.getRange(1,3,numItemList2).getValues();//Add the items in ListBox
for(var i=0; i<list1ItemArray2.length; i++){langBox.addItem(list1ItemArray2[i][0]);}
if (chan == '--')
{langBox.clear();
var langArray = ['Select language','Dutch','French','German','Italian','Portuguese', 'Russian','Spanish'];
for (var i=0;i<langArray.length;++i) {langBox.addItem(langArray[i]);};}
return app
};
If anyone can use their magic eyes to give me any advice, it would be greatly appreciated!
The problem is with your callbackElement.
What I suggest is that you put both these list boxes into a single panel and add this panel as the callback element to both the handlers. Something like
function doGet(){
/* Your other code here */
var panel = app.createVerticalPanel().setId('panel');
var channelBox = app.createListBox().setId('channelBox').setName('channelBox').setWidth(152).setHeight(22);
var chanHandler = app.createServerChangeHandler('showChannelinfo');
chanHandler.addCallbackElement(panel); /* Add panel as the callback element */
channelBox.addChangeHandler(chanHandler);
var chaArray = ['Select channel','--','Email','Phone','Chat']; for (var i=0;i<chaArray.length;++i) {channelBox.addItem(chaArray[i]);};
var verticalBox = app.createListBox().setId('verticalBox').setName('verticalBox').setWidth(152).setHeight(22);
var vertHandler = app.createServerChangeHandler('showVerticalinfo');
vertHandler.addCallbackElement(panel); /* Add panel as the callback element */
verticalBox.addChangeHandler(vertHandler);
panel.add(channelBox);
panel.add(verticalBox);
/* Your other UI Code here */
}
Is there a way to refresh a single Kendo grid row without refreshing the whole datasource or using jQuery to set the value for each cell?
How do you define the row that you want to update? I'm going to assume that is the row that you have selected, and the name of the column being updated is symbol.
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// update the column `symbol` and set its value to `HPQ`
data.set("symbol", "HPQ");
Remember that the content of the DataSource is an observable object, meaning that you can update it using set and the change should be reflected magically in the grid.
data.set will actually refresh the entire grid and send a databound event in some cases. This is very slow and unnecessary. It will also collapse any expanded detail templates which is not ideal.
I would recommend you to use this function that I wrote to update a single row in a kendo grid.
// Updates a single row in a kendo grid without firing a databound event.
// This is needed since otherwise the entire grid will be redrawn.
function kendoFastRedrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}
Example:
// Get a reference to the grid
var grid = $("#my_grid").data("kendoGrid");
// Access the row that is selected
var select = grid.select();
// and now the data
var data = grid.dataItem(select);
// Update any values that you want to
data.symbol = newValue;
data.symbol2 = newValue2;
...
// Redraw only the single row in question which needs updating
kendoFastRedrawRow(grid, select);
// Then if you want to call your own databound event to do any funky post processing:
myDataBoundEvent.apply(grid);
I found a way to update the grid dataSource and show in the grid without refreshing all the grid.
For example you have a selected row and you want to change column "name" value.
//the grid
var grid = $('#myGrid').data('kendoGrid');
// Access the row that is selected
var row = grid.select();
//gets the dataItem
var dataItem = grid.dataItem(row);
//sets the dataItem
dataItem.name = 'Joe';
//generate a new row html
var rowHtml = grid.rowTemplate(dataItem);
//replace your old row html with the updated one
row.replaceWith(rowHtml);
updateRecord(record) {
const grid = $(this.el.nativeElement).data('kendoGrid');
const row = grid.select();
const dataItem = grid.dataItem(row);
for (const property in record) {
if (record.hasOwnProperty(property)) {
dataItem.set(property, record[property]);
}
}
}
The behaviour Im trying to achieve is to press and hold a listbox item and I should be able to delete the item.
I have created the listbox through code. Everylistitem has a stackpanel which holds two textblocks, ie a date and a string.
How can i get press and hold event for a selectedlistitem?? I have not used binding anywhere.
C#:
for (int i = 0; i < iHistCount; i++)
{
TextBlock dateText = new TextBlock();
TextBlock durationText = new TextBlock();
TextBlock spacer = new TextBlock();
TextBlock spacer2 = new TextBlock();
dateText.FontFamily = (FontFamily)App.Current.Resources["CicleFina"];
durationText.FontFamily = (FontFamily)App.Current.Resources["CicleFina"];
dateText.FontSize = 25;
durationText.FontSize = 25;
dateText.TextAlignment = TextAlignment.Right;
durationText.TextAlignment = TextAlignment.Left;
dateText.VerticalAlignment = System.Windows.VerticalAlignment.Center;
durationText.VerticalAlignment = System.Windows.VerticalAlignment.Center;
spacer.Width = 30;
dateText.Width = 130;
spacer2.Width = 50;
durationText.Width = 170;
DateTime dtHist = pCycMan.GetHistoryDate(i);
strDisplay = dtHist.ToString("dd-MMM-yyyy");
dateText.Text = strDisplay;
if( condition)
{
// logic
durationText.Text = strDisplay;
}
StackPanel st = new StackPanel();
st.Height = 50;
st.Orientation = System.Windows.Controls.Orientation.Horizontal;
st.Children.Add(spacer);
st.Children.Add(dateText);
st.Children.Add(spacer2);
st.Children.Add(durationText);
listboxHistory.Items.Add(st);
}
XAML
<ListBox x:Name="listboxHistory" Height="280" Canvas.Left="60" Canvas.Top="232" Width="360" Foreground="Gray">
Assuming you're using the Silverlight toolkit for a context menu, this link is a good example, and has how to create the menu in code-behind.
http://windowsphonegeek.com/articles/WP7-ContextMenu-in-depth--Part1-key-concepts-and-API
For example here:
StackPanel st = new StackPanel();
st.Height = 50;
st.Orientation = System.Windows.Controls.Orientation.Horizontal;
st.Children.Add(spacer);
st.Children.Add(dateText);
st.Children.Add(spacer2);
st.Children.Add(durationText);
listboxHistory.Items.Add(st);
ContextMenu cm = new ContextMenu();
MenuItem delete = new MenuItem()
{
Header = "Delete",
Tag= "Delete" //you could also put the item itself here, would be a good reference
};
delete.Clicked += //your event handler
MenuItem edit = new MenuItem()
{
Header = "Edit",
Tag = "Edit", //you could also put the item itself here, would be a good reference
};
edit.Clicked += //your event handler
//add the items to the context menu.
cm.Items.Add(delete);
cm.Items.Add(edit);
ContextMenuService.SetContextMenu(st, cm);