In my Kendo Grid I have a column that I'd like to contain a button.
On clicking this button, I'd like to populate one of fields in the grid (called TradesmanId) with an ID that is available to a javacript function (it is the ID of a logged in user).
This ID should sit in the field until the save changes event on the grid is called.
I had thought about defining the column like this, but I wonder if a command column would work better?
.Columns(trdcol =>
{
trdcol.Bound(f => f.TradeHrs).Title("Man Hours").Width(45);
trdcol.Bound(f => f.TradeDate).Title("Time Date").Width(77).ClientTemplate("#= kendo.toString(TradeDate, 'hh:mm dd/MM/yyyy') #");
trdcol.Bound(p => p.TradesmanId).ClientTemplate("<button id='button' class='k-button'><span class='k-icon k-i-check-outline'></span> #= TradesmanId#</button>").Title("Signature").Width(85);
})
What you did is fine. You can just add a class to your button and then add a click handler that'll do the following:
$(document).on("click", "buttton.my-class", function(e) {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.getByUid($(this).closest("tr").data("uid"));
dataItem.TradesmanId = getLoggedInUserId(); //your javascript function returning the user id
grid.refresh();
})
Related
I have used MVC kendo grid and I have bind the dropdown to grid. Now I have to get the dropdownchange event to populate other grid items by using dropdown selection.
columns.ForeignKey(c => c.CountryID, (SelectList)ViewBag.Countries).Title("Select Country");
$("#ddlTables").change(function () {
//You will get change event here
//Add debugger here and see
//Do your code here
});
columns.ForeignKey(c => c.CountryID, (SelectList)ViewBag.Countries,new {#id = "ddlCountry"}).Title("Select Country");
Here is the code replace this with your code and try to do your stuff and if still facing issue let me know
You can do it using an editor template as follows.
change the column as follows
columns.Bound(c => c.CountryID).Title("Country").EditorTemplateName("Countries").Width(300);
after that create a partial view inside views/shared/EditorTemplates with name Countries as follows
#using System.Collections
#(Html.Kendo().DropDownList()
.DataValueField("COUNTRYNAME")
.DataTextField("COUNTRYNAME")
.Name("CountryID")
.BindTo((IEnumerable)ViewBag.Countries)
.OptionLabel("Select Country")
.Filter(FilterType.Contains)
.Events(e =>
{
e.Change("CountryChange");
})
)
After this you can write jquery as follows
<script>
function CountryChange()
{
//You will get change event here
}
I saw this response on how to hide a column. I need a little more complicated behavior. I have a react table like this
var StockTable = React.createClass({
render: function () {
var items = [];
for (var symbol in this.props.stocks) {
var stock = this.props.stocks[symbol];
items.push(<OptionRow key={stock.symbol} stock={stock} bid={this.props.bid} ask = {this.props.ask} />);
}
return (
<table table-head id="stocktable">
...
I need to detect when a user clicks on the header of the table, get the column she clicked on, and hide that column. Then, if a user clicks a separate button on the page, I need all the columns that are hidden to display again.
It would also be nice if the cursor changed to something like a hand when in the table header to alert the user that an action is possible. Like it does when you hover over a button.
I would have a list of hidden table headers in state
this.state = {hidden: []}
and event handlers for each header
<th onClick={() => hideHeader('cost')}>
to avoid rendering them
hidden.indexOf('cost') !=== -1 ? <someheader/> : null
Rendering null is a valid way to avoid rendering something.
To change pointers: How can I make the cursor a hand when a user hovers over a list item?
I have a controller named dataController, two services, named dataHttpServices and dataLocalServices and an html template, some directives.
In my html template, I have two different tabs uses same controller and add item to list in my controller from two different places.
In debug mode, I see the data change properly but the data binding is not working properly.
I don't know What is my mistake, help please. In code;
Here is Html;
<div
class="metadataSelect"
layout="column"
ng-model="selectedItems"
ng-show="selectedItems.length > 0">
<div layout="row" ng-repeat="item in selectedItems">
{{item.Name}}
</div>
</div>
Here is the controller;
$scope.addSelectedItem = function (selectedItem) {
var found = false;
var self = this;
dataLocalService.addSelectedItem(selectedItem);
$scope.selectedItems = dataLocalService.getSelectedItems();
};
And here is the service;
this.selectedItems = [];
this.addSelectedItem = function (item) {
this.selectedItems.push(item);
};
this.getSelectedItems = function () {
return this.selectedItems;
};
I call addSelectedItem from scope in two different button's click event with ng-click.
If I first add an item by click the first button and click the second button (first click the first button), the button binds the array to div correctly.
But when I add an item by click the second button before click the first button, the array does not bind to div.
After add some items to array by click the second button, when I click the first button, bind all the elements to div. For example three element at once but doesn't bind without clicking the first button.
What is my mistakes. Thanks for helps.
I solved it with using $scope.$watch. And I think the problem is their scope is different because i create controller twice with ng-controller. Here is the code snippet i found to solve it.
$scope.$watch('selectedItems', function () {
$scope.selectedItems = $metadataLocalService.getSelectedItems();
});
This solves my problem. Because watch is tracking the related data changes and etc.
I have a Kendo MVC grid that I am creating with the Html.Kendo().Grid helper. When the PopUp editor window opens, I want to catch the event and run a bit of javascript. When I configure a normal kendo window with .Events, the events fire properly and my function runs. However, when I code the .Events property on the .Editable.Window of the grid, the events do not fire.
#(Html.Kendo().Grid<FooRecord>()
.Name("cFooGrid")
.Columns(c =>
{
c.Bound(f => f.Foo);
c.Bound(f => f.Bar);
c.Bound(f => f.Bas);
c.Command(a => a.Edit());
})
.Editable(e => e
.Mode(GridEditMode.PopUp)
.Window(w => w.Events(v => v.Open("OnEditStart").Activate(#<text>function () {console.log("EditWindow.Activate")}</text>)))
)
.ToolBar(t =>
{
t.Create();
})
.DataSource(ds => ds
.Ajax()
.Create(r => r.Action("UpdateIndex", "Home"))
.Read(r => r.Action("IndexList", "Home"))
.Update(u => u.Action("UpdateIndex", "Home"))
.Model( m => {
m.Id(f => f.Foo);
})
)
)
When I review the generated code in Chrome's developer tools, the window is generated without the Activate or Open features:
jQuery(function(){jQuery("#cFooGrid").kendoGrid({"columns":[{"title":"Foo Key","field":"Foo","encoded":true,"editor":null},{"title":"Bar Field","field":"Bar","encoded":true,"editor":null},{"title":"Bas Value","field":"Bas","encoded":true,"editor":null},{"command":[{"name":"edit","buttonType":"ImageAndText","text":"Edit"}]}],"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"popup","template":"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Foo\"\u003eFoo Key\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" id=\"Foo\" name=\"Foo\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Foo\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bar\"\u003eBar Field\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-maxlength=\"The field Bar Field must be a string or array type with a maximum length of \u0026\\#39;20\u0026\\#39;.\" data-val-maxlength-max=\"20\" id=\"Bar\" name=\"Bar\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bar\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bas\"\u003eBas Value\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Bas Value field is required.\" id=\"Bas\" name=\"Bas\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bas\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e","window":{"title":"Edit","modal":true,"draggable":true,"resizable":false},"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add new record"}]},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Home/IndexList"},"prefix":"","update":{"url":"/Home/UpdateIndex"},"create":{"url":"/Home/UpdateIndex"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Foo","fields":{"Foo":{"type":"string"},"Bar":{"type":"string"},"Bas":{"type":"string"}}}}}});});
Or, more specifically:
"window":{"title":"Edit","modal":true,"draggable":true,"resizable":false}
I would expect that the window would be generated with Activate: and Open: parameters, but they don't show up. Can anyone give me a pointer as to whether this just isn't supported or I am doing something wrong?
Edit:
So in order to capture the events as above, there are two steps:
Add this to the grid definition (remove the Window .Events)
.Events(e => e.Edit("OnEditStart"))
Then add a javascript function like this to the page.
function OnEditStart(pEvent) {
var editWindow = pEvent.container.data('kendoWindow');
editWindow.bind('activate', function () {
console.log('Edit start event fired');
});
}
NOTE: There does not appear to be any way to capture the open event since this event is fired on the window before the edit event on the grid.
The "events" of the kendo grid popup are not honoured/serialized (at least not the last time I tested this back in 2014) and so you should use the grid's Edit event to control the "Pop Up" window events
So within your grid add this:
.Events(event => event.Edit("onEdit"))
.//other grid settings here.
Then add a javascript function like this:
function onEdit(e) {
//get window object
var kendoWindow = e.container.data("kendoWindow");
kendoWindow.setOptions({
title: "I have a custom Title"
//do stuff in here
});
}
Then you can apply what ever functions you want to the window via javascript.
I do something similar to this to resize the pop up editor so it takes up 80% of the screen size regardless of the display/device.
If you have something more specific you are after then I will update my answer accordingly.
edit: If you want you can refer to this post from Telerik's own forums which is what I used when I first encountered this issue back in mid 2014.
Kendo Pop Up Editor not firing off applied events
Using MVC I am displaying a list 'DeliveryRunList' through a drop down.
'Select' being the option the user sees, if the user clicks the drop down and selects 'select' as their choice, it will store the value as NULL, this is fine.
However is there anyway to change 'Select' to 'No Value' when the drop down is clicked so it will store as empty, but yet still appear as 'select' before the drop down is clicked.
<div class="editor-label">#Html.DropDownList("DeliveryRunId", Model.DeliveryRunList, "Select")</div>
You can use jQuery to achieve this easily:
$(function () {
$('#DeliveryRunId').focus(function () {
$('#DeliveryRunId option:first-child').text('No Value');
});
});
I ran into a similar problem recently, but instead of going for JQuery as Mike said (which is also a nice way of doing the task), i manually added it to the selectlist of the DropdownListFor Html helper from the controller and put it in the Viewbag and send it to it.
List<SelectListItem> DropDownValues= new List<SelectListItem>();
DropDownValues.Add(new SelectListItem() { Text = "-Select-", Value = "No Value" });
DropDownValues.Add(new SelectListItem() { Text = "Text 1", Value = "1.ToString()" });
DropDownValues.Add(new SelectListItem() { Text = "Text 2", Value = "2.ToString()" });
ViewBag.DropDownValueList= new SelectList(DropDownValues, "Value", "Text");
And in your View,
#Html.DropDownListFor(model => model.DropDownName, (SelectList)ViewBag.DropDownValueList)
I didn't check this code, but i remember doing like this and it should work.. Let me know if it does..