I am using a library called lit to create custom web components and i have tried using the #change and #select event handlers to display another component with no luck. I also can't seem to find the info on the docs.
My code looks like this :
return html`
<div>
<bx-select helper-text="Optional helper text" #change=${this._updateValue} label-text="Select" placeholder="HIV Test 1 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.initialTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 2 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item #change=${this._updateValue}
label-text=${item.label}
value=${item.concept}
.selected=${this.confirmedTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 3 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.finalTestVal == item.concept}
>
${item.label}
</bx-select-item>`
)}
</bx-select>
</div>`;
Any help/ advise on this will be appreciated.
Based on the name <bx-select> I'll assume you're using Carbon web components.
Unfortunately it doesn't look like it's listed in the doc but the event name that's fired when you select appears to be bx-select-selected so you'd want to add an event listener with #bx-select-selected.
This can be seen here https://web-components.carbondesignsystem.com/?path=/story/components-select--default when you select an option and see the "Actions" tab below.
You can also see the component's source code to see where the event is dispatched here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L62 and the name is defined here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L387.
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
}
Below is my Kendo grid and i need to call a javascript/jquery function on click of update button.
Can some one please suggest solution for this.
enter image description here
I suggest using the before edit event.
#(Html.Kendo().Grid(Model)
.Name("grid")
.Events(e => e
.BeforeEdit("gridBeforeEdit")
)
)
<script>
function gridBeforeEdit(e)
{
if (e.model.isNew()) {
//Handle create record
}
else{
//Handle update record
}
}
</script>
Please refer to this API Reference for all the available events for Kendo grid.
I have selecting, unselect and unselecting event. But when I click on select all or unselect all none of these events are called.
This is the plugin link
http://demos.krajee.com/widget-details/select2
There is an event that is fired. Its logic is defined in here:
Select2 Krajee JS Official Source Code
The name of the event for select all is krajeeselect2:selectall and for unselect all is krajeeselect2:unselectall.
Consuming the event via JQuery is done as always:
$('#myKartikSelect2Id').on("krajeeselect2:selectall", function (e) {
console.log(e);
});
$('#myKartikSelect2Id').on("krajeeselect2:unselectall", function (e) {
console.log(e);
});
Hope it helps (:
I don't find better solution but with this options you can override "Select all" checkbox with empty space.
'toggleAllSettings' => [
'selectLabel' => '',
'unselectLabel' => '',
'selectOptions' => ['class' => 'text-success'],
'unselectOptions' => ['class' => 'text-danger'],
],
Maybe not very correct, but using this works $this->renderAjax()
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