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
}
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();
})
I'm following along with a React tutorial on Thinkster and noticed that the form has an onSubmit tag, which automatically passes on the event to be intercepted.
I did some quick research and couldn't seem to find any indication that this is normally what happens on an onSubmit. Am I missing something here? I just found it rather curious.
From CommentInput.js
...
this.createComment = ev => {
ev.preventDefault();
const payload = agent.Comments.create(this.props.slug, {body: this.state.body});
this.setState({body: ''});
this.props.onSubmit(payload);
};
}
render() {
return (
<form className="card comment-form" onSubmit={this.createComment}>
...
}
Thanks!
inside constructor() method declare
this.createComment= this.createComment.bind(this); to remove auto submiting if it is the case of your question. But if you are asking that, are the data passed when you click submit button, then yes. They should be sent.
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
I am trying to handle double click event for each row on kendo grid.Single click event is working by using k-on-change( k-on-change="methodname(dataItem.val)" ) , but i can not handle double click event from angularjs.
Try this to get access to the element.
HTML
<div data-kendo-grid="grid" options="gridOptions"></div>
JS
$scope.$on("kendoWidgetCreated", function(event, widget){
if (widget === $scope.grid) {
$scope.grid.element.on('dblclick', function (e) {console.log(e)});
}
});