I am trying to set the value (the text within the button) of a command column in a Telerik MVC grid.
I have this code:
columns.Command(o => o.Custom("ActivationCode").Text("\\#=ActivationCode\\#").Click("showDetails")).Width(180);
What I am trying to do is have the text inside the button render as the value of the underlying data model. Example value would be AY63P9 for example.
Using the Text() method it just renders the value in that function, it does not insert the bound value.
I have also tried using
columns.Command(o => o.Custom("ActivationCode").Click("showDetails")).Width(180).Title("\\#=ActivationCode\\#");
But I receive the same error message - "ActivationCode is not defined"
You can name the button using jQuery.
Declare DataBound event for the grid as below,
#(Html.Kendo().Grid<Models.TempTable>()
.Name("tempData")
.Columns(columns =>
{
columns.Bound(p => p.Name).Width(100);
columns.Bound(p => p.Status).Width(100);
columns.Command(command =>
{
command.Custom("ActivationCode").Text("");
}).Width(100);
})
.Events(e => { e.DataBound("tempData_DataBound"); })
In DataBound method, get the value you want to assign. For example, get the first column value (Name column) and assign it to the button.
function tempData_DataBound(e) {
var tmpTable = $('#tempData').find('table tbody');
var rowCnt = e.sender._data.length;
for (var i = 0; i < rowCnt; i++) {
var _tempName = $(tmpTable).find('tr:eq('+ i +') td:eq(0)').html();
$(tmpTable).find('tr:eq(' + i + ')').find('.k-grid-ActivationCode').text(_tempName);
}
}
The result is
Related
I am using the Tabulator plugin and am using the editorParams function to select from a list of options. If a value isn't selected (eg: Cancelled) I want it to revert to the old (previous) cell value and do nothing, but calling cell.setValue() keeps retriggering the cellEdit function and it gets stuck in a loop.
table.on('cellEdited', function(cell) {
var cellOldValue = cell.getOldValue();
var cellNewValue = cell.getValue();
var row = cell.getRow();
var index = row.getIndex();
if (cellNewValue == 'none-selected') {
cell.setValue(cellOldValue);
} else {
if (confirm('Are you sure?')) {
// ok, do something
} else {
cell.setValue(cellOldValue);
}
}
});
This just keeps triggering the prompt. Any solutions, thank you?
Has a transaction function that worked in first pass and at 2nd pass, got "TypeError: Cannot set _id to Null value. Both passes were to create a new transaction. Besides, system seemed to indicate that there was value for variable that was being used to assign to_id. In this case,
print"this.selectedLeave_id" and saw value as expected. However, Angular right away in next statement complaining that Null value was set to "this.SLTran.leave_id".
Below pls find code and any help is appreciated.
onSubmitLeaveTran()
{
if (this.selectedLeaveTran_id != 0) // means first loaded all trans and then select from table to modify
{
this.sLTran = this.tempSLTran; // tempSLTran was from row selected to be modified
this.sLTran.leaveType = this.tempLeaveType; // from dialog box edited data
this.sLTran.leaveStartDate = this.tempLeaveStartDate; // from dialog box edited data
this.sLTran.leaveEndDate = this.tempLeaveEndDate; // from dialog box edited data
this.sLTran.numDaysRequested = this.tempNumDaysRequested; // from dialog box edited data
console.log('2-2.5 inside onSubmit Leave Tran for update :',this.sLTran);
this.staffLeaveDataSvc.updateSLTran(this.sLTran).subscribe((sLTran:staffLeaveTran) => {this.sLTran = sLTran});
}
else
{ // a new tran
console.log('2-2.4 inside onSubmit Leave Tran selectedLeave_id for new tran:',this.selectedLeave_id);
this.sLTran.leave_id = this.selectedLeave_id; // first established the leave_id associated with this new tran
this.sLTran.leaveType = this.tempLeaveType;
this.sLTran.leaveStartDate = this.tempLeaveStartDate;
this.sLTran.leaveEndDate = this.tempLeaveEndDate;
this.sLTran.numDaysRequested = this.tempNumDaysRequested;
this.staffLeaveDataSvc.addSLTran(this.sLTran).subscribe(
(sLTran:staffLeaveTran) => {
this.sLTran = sLTran
});
}
};
I have 2 SP lists (A and B).
List A has filter buttons next to each list item. When a user clicks a button it should filter List B, only showing the related items.
List A has an Id column which List B matches it's column (MasterItems) with List A's Id.
Here's the code I'm using:
public _getListItems() {
sp.web.lists.getByTitle("ListA").items.get().then((items: any[]) => {
let returnedItems: IListAItem[] = items.map((item) => { return new ListAItem(item); });
this.setState({
Items: returnedItems,
ListAItems: returnedItems,
});
});
sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });
this.setState({
ListBItems: returnedItems, //This brings in the items from ListB so they can be filtered on this.state.ListB when clicked
});
});
}
private _editItem = (ev: React.MouseEvent<HTMLElement>) => {
this._getListItems(); //This attempts to reset the list when another filter is clicked, but is half working!
const sid = Number(ev.currentTarget.id);
const sid2 = 'DIBR'+sid;
let _item = this.state.ListBItems.filter((item) => { return item.MasterItem == sid2; });
if (_item && _item.length > 0) {
sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
let returnedItems: IListBItem[] =
items.filter(i => _item.some(other => other.Id === i.Id)).map(
(item) => new ListBItem(item)
);
this.setState({
ListBItems: returnedItems,
});
});
}
}
The problem is that when the button is clicked next to an item, it filters correctly on first click!
but if filtered again on the same or different item it will sometimes unset the filter and mix results, other times it will filter correctly. So I'm suspecting I've made a state problem here, but can't seem to discover why.
Regards,
T
UPDATE: I've added a clear filter button which makes things work, but would like the user to be able to click on filter to filter instead of having to clear it each time.
I am doing the same in my SharePoint list
so basically I always set the clear filter function before the filter function,
for example:
function myFilter(){
//my filter code goes here
}
function clearFilter(){
//the clear filter code goes here
}
lets say you are running the function on an item select or a button click or text input change, set the clear filter to run before the filter.
function funcGroup{
clearFilter();
setTimeout(() => {
myFilter();
}, 300);
}
or
function funcGroup{
setTimeout(() => {
clearFilter();
}, 300);
myFilter();
}
I am using this scenario with my SharePoint lists and its working perfect...
I'm trying to post kendo grid data on clicking a button. I want to save the data to an excel file, the default option provided by kendo for saving grid data fails when the dataset is large. So, I'm trying to do the excel operations on server side. My issue is I'm not able to pass the data to the controller.
Code:
View
#(Html.Kendo().Grid(Model)
.Name("OutputCashGrid")
.Events(ev => ev.Edit("onEdit"))
.Columns(columns =>
{
columns.Bound(p => p.ClientID).Hidden();
columns.Bound(p => p.LoadID).Title("Loadid").Hidden();
columns.Bound(p => p.Level1).Title("Level1").Width(130);
columns.Bound(p => p.Level2).Title("Level2").Width(130);
columns.Bound(p => p.AsOfDate).Title("AsOfDate").Width(150).Format("{0:d}").Width(130);
})
.ToolBar(toolbar =>
{
toolbar.Save().HtmlAttributes(new { id = "Save" }).SaveText("Save External Balances and Comments");
toolbar.Custom()
.Text("Export To Excel")
.HtmlAttributes(new { #class = "export" })
.Url("javascript:myFunction()");
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode.
.HtmlAttributes(new { style = "height: 550px;" })
.Groupable()
//.Excel(excel => excel
// .AllPages(true)
// .FileName("CashSummary_" + #ViewBag.goClientName + "_" + #ViewBag.Asofdate.ToString("MM/dd/yyyy") + ".xlsx")
// .Filterable(true)
// .ProxyURL(Url.Action("Excel_Export_Save", "SaveRec"))
// ) //this fails for large datasets
.Reorderable(r => r.Columns(true))
.Sortable()
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Events(e2 => e2.Change("vChange"))
.PageSize(50)
.ServerOperation(false)
.Batch(true) // Enable batch updates.
.Model(model =>
{
model.Id(p => p.OutputcashID); // Specify the property which is the unique identifier of the model.
//model.Field(p => p.OutputcashID).Editable(false); // Make the ProductID property not editable.
.Update("Editing_Update", "SaveRec",new { loadid = #loadid,clientid=#clientid })
)
.Pageable(pageable => pageable
.Refresh(true)
.Input(true)
.Numeric(false)
)
.Resizable(resize => resize.Columns(true))
.Selectable()
)
I tried using Url("Action","Controller") in the custom toolbar it hits the action but doesn't pass the data. When i decorate the action with HttpPost it gives me 404 error.
When calling with js function
function myFunction() {
var grid = $("#OutputCashGrid").getKendoGrid();
var data = JSON.stringify(grid.dataSource.view());
$.ajax({
url: '/SaveRec/Excel_save',
type: 'POST',
data: data,
async: true,
processData: false
});
}
Controller:
// [AcceptVerbs(HttpVerbs.Post)] get 404 error when using http.post, without this it hits the action but doesn't pass data.
public ActionResult Excel_save([DataSourceRequest]DataSourceRequest request,[Bind(Prefix = "models")]IEnumerable<OutputCash> results)
{
//gives me null for results
var WFSEntities=new WFSEntities();
var grid = WFSEntities.OutputCashes;
var gridresults = grid.ToDataSourceResult(request).Data; //returns all the data from the table.
//Create new Excel workbook
var workbook = new HSSFWorkbook();
//Create new Excel sheet
var sheet = workbook.CreateSheet();
//create excel sheet, removed code for brevity
return File(output.ToArray(), //The binary data of the XLS file
"application/vnd.ms-excel", //MIME type of Excel files
"Output.xls"); //Suggested file name in the "Save as" dialog which will be displayed to the end user
}
To do the entire operation server side, you don't pass the data to the controller from the ajax call. The controller takes in the URL you pass and you grab the data for the export in the controller. After it has been pulled fresh server side, you pass to your worksheet generator. The trickiest part is passing in any filters/pages that you want applied to the data before the controller action grabs it. It is also beneficial to have a loading image present while the server side processing takes place.
I have a sample code like this
<kendo-combobox [allowCustom]="false"
[suggest]="true"
[data]="dropDownButtonItemsObs | async"
[(ngModel)]="selectedComboBoxItem"
[textField] = "'text'" [valueField] = "'value'">
</kendo-combobox>
The dropDownButtonItemsObs is a Observable, data retrieved from the web api.
With my example above - using async pipe, can you guide an example how to programmatic set the selected item for the combo box?
figured out how to have it set up, however I feel my code is not the fully exactly the option using async pipe as it is in the document http://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/data-binding/#toc-async-pipe
this.dropDownButtonItemsObs = this.dashboardService.getDropdownItems();
this.dropDownButtonItemsObs.subscribe(dropdownItems => {
this.dashboardService.getDropdownSelectedValue().subscribe(data => {
this.selectedComboBoxItem = dropdownItems.find(item => { return item.value === 2 });
});
});