With the Telerik Ajax Grid Control up can do the following:
dataItems = $find("<%= grid.ClientID %>").get_masterTableView().get_dataItems();
In order to get the dataItem collection of the grid. There doesn't seem to be a 'get_MasterTableView' for the mvc control, unless I am missing something.
dataItems = $("#grid").get_masterTableView().get_dataItems()
or
dataItems = $("#grid").data("kendoGrid").get_masterTableView().get_dataItems()
doesn't seem to work.
Thanks.
You can do (more info here):
var dataSource = $("#grid").data("kendoGrid").dataSource;
or, if you want to get a specific data item, you can do (more info here):
var dataItem = $("#grid").data("kendoGrid").dataItem("tr:eq(1)");
UPDATE:
If you want to iterate through items, you can use the data() method of the datasource object (more info here):
var data = $("#grid").data("kendoGrid").dataSource.data();
for (var i = 0; i < data.length; i++) {
var item = data[i];
// some code
}
Related
I just added a script to a Form/Google Spreadsheet. It grabs the Response URL from the Form and pushes it into a column in the response spreadsheet. I would like to have the URL linked to a button(In html, I would of course anchor my image with the Edit Response URL, but now I am a little confuse, since I am not a super experienced script editor). How would that be possible to integrate it to my script?:
function assignEditUrls() {
var form = FormApp.openById('1-Sxpvd9jktE-SVXV0_dfp018xwcIoa3aXMA_fdff9W8');
//enter form ID here
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Form Responses 1');
//Change the sheet name as appropriate
var data = sheet.getDataRange().getValues();
var urlCol = 5; // column number where URL's should be populated; A = 1, B = 2 etc
var responses = form.getResponses();
var timestamps = [], urls = [], resultUrls = [];
for (var i = 0; i < responses.length; i++) {
timestamps.push(responses[i].getTimestamp().setMilliseconds(0));
urls.push(responses[i].getEditResponseUrl());
}
for (var j = 1; j < data.length; j++) {
resultUrls.push([urls[timestamps.indexOf(data[j][0].setMilliseconds(0))]]);
}
sheet.getRange(2, urlCol, resultUrls.length).setValues(resultUrls);
}
Its not possible to programatically add buttons or images to spreadsheets.
what you can do is add the url in those cells as a fomula =hyperlink("url",yoururl) so it looks prettier.
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 am using a telerik radcombobox for a drop down list inside a user control in a web forms application. I need to delete all the items in the box, let's say id is ddlVeihicleMake and repopulate it with a new list of item passed to the function. Here is an example of what I understand it should be like,
function addNewItems(selectRef, optionsArray, valuesArray) {
var combo = document.getElementById("ctl00_cpMain_ctl01_appRadPaneltabVehicleInformation_i0_i0_tabVehicleInformation_ddlVehicleMake_Input");
combo.get_items().clear();
for (var idx = 0; idx < optionsArray.length; idx++) {
if (valuesArray == "") {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
} else {
var comboItem = new Telerik.Web.UI.RadComboBoxItem();
comboItem.set_text(optionsArray[idx]);
combo.trackChanges();
combo.get_items().add(comboItem);
}
}
It fails for me on get_items().clear() and get_itmes().add(comboItem). Appreciate any help I can get.
Thanks!
Try something like this:
function DeleteItems(sender, args)
{
var combo = window.$find("<%= cboMyComboBox.ClientID %>");
combo.trackChanges();
for (var i = 0; i < combo.get_items().get_count(); i++) {
combo.get_items().remove(combo.get_items().getItem(i));
}
combo.commitChanges();
}
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]);
}
}
}
here's my code. it works, if you want to loop through all the rows. now, QA told me I have to make it to support filter. so, when user use filter, only a subset of the rows will show on the grid. I need to only loop through only those rows.
var entityGrid = $("#EntitesGrid").data("kendoGrid");
var data = entityGrid.dataSource.data();
var totalNumber = data.length;
for(var i = 0; i<totalNumber; i++) {
var currentDataItem = data[i];
VersionIdArray[i] = currentDataItem.VersionId;
}
I tried.
var data = entityGrid.dataSource.data().fetch();
and
var data = entityGrid.dataSource.data().filter();
couldn't get it working.
For future reference and for those who are interested, I found the the solution at:
http://colinmackay.scot/2012/07/23/kendo-ui-paging-and-accessing-the-filtered-results-in-javascript/
It works by first getting hold of the grid's data source, getting the filter and the data, creating a new query with the data and applying the filter to it. While this does result in getting the results of the filter it does have the distinct disadvantage of processing the filter operation twice.
function displayFilterResults() {
// Gets the data source from the grid.
var dataSource = $("#MyGrid").data("kendoGrid").dataSource;
// Gets the filter from the dataSource
var filters = dataSource.filter();
// Gets the full set of data from the data source
var allData = dataSource.data();
// Applies the filter to the data
var query = new kendo.data.Query(allData);
var filteredData = query.filter(filters).data;
// Output the results
$('#FilterCount').html(filteredData.length);
$('#TotalCount').html(allData.length);
$('#FilterResults').html('');
$.each(filteredData, function(index, item){
$('#FilterResults').append('<li>'+item.Site+' : '+item.Visitors+'</li>')
});
}
Many thanks!!! With this help now I did this...
kendo.data.DataSource.prototype.dataFiltered = function () {
// Gets the filter from the dataSource
var filters = this.filter();
// Gets the full set of data from the data source
var allData = this.data();
// Applies the filter to the data
var query = new kendo.data.Query(allData);
// Returns the filtered data
return query.filter(filters).data;
}
So now I can get my filtered data very easy!!! Awesome!!!
Example:
var dataFiltered = $("#MyGrid").data("kendoGrid").dataSource.dataFiltered();