I have a MVC Kendo MultiSelect helper that I want to set up but NOT retrieve the data for until an external event if fired. Im using it in a cascading capacity with a drop down list and don't what to show any values to select until the dropDownList has a selected value. Everything is working fine except this one annoyance.
#(Html.Kendo().MultiSelect()
.Name("productMultiSelect")
.DataTextField("Name")
.DataValueField("Id")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "OrderProductAdmin3");
});
})
I tried setting the AutoBind property to false but the MultiSelect helper still did and initial DataBind.
I think I can use code like this to data bind it when the external event is fired
var productMultiSelect = $("#productMultiSelect").data("kendoMultiSelect");
if (!DataBound) {
productMultiSelect.dataBind();
DataBound = true;
}
Thank you for your help.
Earl
I'm just going to show and hide it as appropriate.
Related
I have this dropdown
#(Html.Kendo().DropDownListFor(m => m.Letter.LetterTypeId)
.Size(ComponentSize.Medium).Rounded(Rounded.Medium).FillMode(FillMode.Outline)
.OptionLabel("Select RL Type *")
.HtmlAttributes(new { style = "width: 100%" })
.DataValueField(nameof(LookupLetterTypeModel.Id))
.DataTextField(nameof(LookupLetterTypeModel.Name))
.Filter(FilterType.Contains)
.Height(400)
.DataSource(source =>
{
source.Read(read => { read.Action("GetLookupLetterTypes", "Api"); })
.ServerFiltering(false);
})
.Events(e => { e.Select("LetterTypeId_OnSelect"); })
)
Is there a way in Core MVC to turn this control into a custom control that should only allow me to get or set the selected value (no need for the data object)? For all internal JS, the component will handle internally. It just needs to update the parent Model will be bound to. I'm looking at ViewComponent approach, but the code to invoke the view component is not that interesting, and the issue of binding a Model's property remains an issue.
I'm hoping to hide the significant markup of Kendo's Dropdown behind a simple tag-helper syntax for invoking my custom control.
I'm using Kendo (and I've almost never used it before) in an ASPNET Mvc application and I need to create a TreeList with checkboxes: checking a father should check all children and unchecking a child should uncheck the father (and the grandfather, and so on).
The tree in itself works well: I've added a column with custom template and I'm using (successfully) the onClick event to get the value of the checkbox, but I can't figure out how to "bind" that value to the node of the tree (to reach every child and check it).
Here the code:
#(Html.Kendo().TreeList<TreeElem>()
.Name("treelist")
.Columns(col =>{
col.Add().Field(f => f.NodeDescription).Title("TREE LIST");
col.Add().Template("<input type='checkbox' data-bind='checked: checked' onClick='onCheck(event)'/>").Width(55);
})
.DataSource(source => source.Read(read => read.Action("GetData", "TreeController"))
.Model(m => {
m.Id(f => f.NodeId);
m.ParentId(f => f.ParentId);
m.Field(f => f.NodeDescription);
})
)
)
In the javascript:
function onCheck(e) {
console.log(e.target.checked); //print true/false according to the checkbox
console.log($("#treelist").data('kendoTreeList').dataSource.data()); //print the complete node list
//Other stuffs
}
I would like to get the right node from data() (or view()) according to the checkbox selected. Every node has references to his children and father, so the recursive function should be easy after that.
I've looked for and tried a lot of solutions but with almost no result, any idea?
Thanks
With a Kendo Grid defined in ASP.NET, with columns set as multi filterable
.Filterable(ftb => ftb.Multi(True))
I have defined the filterMenuInit event like so:
.Events(ev => ev.FilterMenuInit("filterMenuInit"))
Using the canonical js example for sorting the entries in a filter dropdown on a Kendo Grid,
function filterMenuInit(e) {
var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
filterMultiCheck.container.empty();
filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
filterMultiCheck.createCheckBoxes();
}
I have encountered the following issue - filterMultiCheck.checkSource.view() is always empty, causing the .toJSON() call to fail.
A grid defined totally in js (sadly NOT an option with this particular grid), within the same environment (Kendo Tab on Kendo Window) does not have this issue.
Has anyone any helpful clues?
This may or may not be an option for you, but setting ServerOperation to false in the DataSource solved this for me.
.Events(e => e.FilterMenuInit("filterMenuInit"))
.DataSource(d => d
.Ajax()
.ServerOperation(false)
.Read(...)
)
We're using Kendo UI via MVC wrappers.
Here's how we create a MultiSelect:
#(Html.Kendo().MultiSelect()
.Name("filterUsers")
.DataTextField("Text")
.DataValueField("Value")
.Placeholder("Select users...")...
The problem is that in new version of Kendo UI there's an option clearButton which has no wrapper in MVC.
How can we set it while continue using MVC wrappers? I tried:
1) Data attributes (data-clear-button), but it doesn't work since it requires all settings to be defined via attributes and the widget to be created via kendo.Bind
2) Altering configuration via setOptions, which doesn't work:
$(function() {
var s = $("#multiselect").data('kendoMultiSelect');
s.setOptions({clearButton: false});
});
Any suggestions?
The suggestion of DontVoteMeDown can work for specific MultiSelects, but needs a modification:
$("#multiselect").data("kendoMultiSelect").wrapper
.find(".k-multiselect-wrap > .k-i-close").css("display", "none");
Otherwise the previously suggested implementation will also hide the close buttons for any pre-selected items.
If you want to target all MultiSelects, then use one of the following instead:
CSS
.k-multiselect-wrap > .k-i-close {
visibility: hidden;
}
or
JavaScript
// execute this before any MultiSelects are initialized
kendo.ui.MultiSelect.fn.options.clearButton = false;
I am a beginer ...I don't know how to write code during the radio button select change in MVC....I have used it like this
In csHTML page
#Html.RadioButtonFor(model=>Sales.Pay_Mode, true)Cheque
#Html.RadioButtonFor(model=>Sales.Pay_Mode, false)Cas
This is my cs page code....Where i want write the change event code and how i get the selected value in control page.My requirement is during radio button change i want change the style of the textbox enable as false..
#Html.TextBox("ChequeNo")
Considering the information that you have provided in your question, the following code would fulfill your expectation
#Html.RadioButtonFor(model => model.PayMode, "Cheque") Cheque
#Html.RadioButtonFor(model => model.PayMode, "Cas") Cas
#Html.TextBox("ChequeNo", null, new {id="theTextBox"})
<script type="text/javascript">
$("input[name='PayMode']").change(function () {
var selectedRadio = $("input[name='PayMode']:checked").val();
if (selectedRadio == 'Cas') {
$("#theTextBox").attr("disabled", "disabled");
} else {
$("#theTextBox").removeAttr("disabled");
}
});
</script>
The is no control events handler in MVC like in WebForms or something like this. You must use javascript code to implement your logic. For example with jQuery
$('.your-radio-class').change(function(){
$('#your-textbox-id').css('margin-left', '100px')
});