I want to create custom dropdown in mvc3 c#, so there can be provision to add click event in each option of dropdown.But I don't want any alternative like jquery or create for loop to add attribute manually.Is there is any way to create custom dropdown using htmlhelper or base class.Please help me regarding this.
Suppose this is your dropdown then you use the following way to define events.
<%=Html.DropDownList("ddl", ViewData["MyList"] as SelectList, new { onchange = "this.form.submit()" })%>
And in your jquery code:
$(document).ready(function() {
$("#ddl").change(function() {
var strSelected = "";
$("#ddl option:selected").each(function() {
strSelected += $(this)[0].value;
});
var url = "/Home/MyAction/" + strSelected;
$.post(url, function(data) {
// do something if necessary
});
});
});
Related
I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells.
Grid's edit mode is InCell.
This is my current JavaScript code:
tablesGrid.tbody.find("input[type='checkbox']").each(function () {
$(this).on('change', function () {
var isChecked = $(this).prop('checked');
var dataItem = tablesGrid.dataItem($(this).closest('tr'));
var currentTr = $(this).closest('tr');
var i = $('td:visible', currentTr).index($(this).closest('td'));
var head = tablesGrid.thead.find('th:visible')[i];
var headName = $(head).prop('dataset').field;
tablesGrid.editCell($(this).closest('td'));
dataItem[headName] = isChecked;
tablesGrid.refresh();
});
});
And if you're wondering about this code, I should note that I'm using client template to show checkboxes. But I don't want the user to double click the cell for editing, once to put it in the edit mode, and another one to change the checkbox. I'm not sure if I'm using the right solution, but the JS code works for sure. If I click in the cell and put it in the edit mode, I'll see the change.
#(Html.Kendo().Grid<grid>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.field)
.ClientTemplate("<input type='checkbox' class='checkbox-inline' #=field? checked='checked':''# />")
.EditorTemplateName("Checkbox");
Well, the best solution I came up with is to put the cell in edit mode when mouse enters that cell! So instead of the entire JS code in the question, I simply use this.
tablesGrid.bind('dataBound', function () {
tablesGrid.tbody.find('td').each(function () {
$(this).mouseenter(function () {
tablesGrid.editCell(this);
});
});
});
Please let me know if you have any better or more efficient way to use editable
checkboxes inside a Grid.
Among Edit and Destroy, Kendo grid has a Select command too. But it seems there's no configuration for this operation. Do you know how can I use it? Any better way of JS binding like custom commands? Notice that it doesn't have a click event.
This line is in my Kendo grid, columns section.
columns.Command(command => { command.Select(); command.Edit(); command.Destroy(); });
Well, I found no better way than using a custom command.
Custom command inside grid:
command.Custom("select").Text("Select").Click("select");
and JS handler code:
<script>
function select(e) {
var grid = $("#grid").data("kendoGrid");
var item = grid.dataItem(grid.select());
var data = item.Title;
alert(data);
}
</script>
Another way to call this will be:
function select(e){
var row = $(e.currentTarget).closest("tr");
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Title);
}
I'm working on an iPad app using Kendo and the DropDownList is throwing an ActionSheet. I'd like to force it to use the Web UI list style. How can I do this?
For anyone interested I was able to hack together a solution. Here's a function that accepts a kendoMobileView as the argument and applies the fix.
//Hack to force dropdowns to act like comboboxes in mobile!
utils.fix.dropdownlists = function(view) {
var dropdowns = view.element.find("[data-role='dropdownlist']");
//Iterate through dropdown elements
_.each(dropdowns, function(item){
var comp = $(item).data("kendoDropDownList");
if(comp && comp.popup) {
comp.popup.bind("open", function(event){
event.sender.element.parent().removeClass("km-popup km-widget");
if(event.sender.element.parent().hasClass("km-popup")) {
//Prevent default open animation.
//Then remove classes and open the popup programitcally
//Easy peasy, Lemon squeezy
event.preventDefault();
event.sender.element.parent().removeClass("km-popup km-widget");
setTimeout(function(){
event.sender.open();
},0);
}
});
}
});
}
I am using a autocomplete option for a textbox in asp.net mvc3 by calling a controller method to display list of values associated with ids in textbox.
#Html.TextBox("tbxSearch", null,
new { data_url = Url.Action("GetSearchData"), data_maxValues = 10, data_valueHiddenId = "#Id", #class = "searchTextbox" })
Now I want to use Jquery to get data_valueHiddenId value in alert
$(document).ready(function () {
ConfigureAutoComplete("#tbxSearch");
$("#btnSearchPerson").click(function () {
alert($("#data_valueHiddenId").val());
});
});
data-maxValues is an attribute, not an element.
You can write $('#tbxSearch').data('maxValues')
$(document).ready(function () {
ConfigureAutoComplete("#tbxSearch");
$("#btnSearchPerson").click(function () {
alert($($(this).attr("data_valueHiddenId")).val());
});
});
I have a DDL, on its change I load a partial view _GetX. Right now I am using it like this
#Html.DropDownListFor(model => model.XId, Model.XList, "Select", new { GetUrl = Url.Action("GetX", "Route") })
I need to load this partial view on clicking a button. How do I do this?
Assuming your GetX controller action already returns the partial view:
$(function() {
$('#someButton').click(function() {
// get the DDL. It would be better to add an id to it
var ddl = $('#XId');
// get the url from the ddl
var url = ddl.attr('GetUrl');
// get the selected value of the ddl to send it to the action as well
var selectedValue = ddl.val();
// send an AJAX request to the controller action passing the currently
// selected value of the DDL and store the results into
// some content placeholder
$('#somePlaceholder').load(url, { value: selectedValue });
return false;
});
});