I have the caption parameter set in the jqGrid definition. I want to know if there's a way to set it dynamically depending on the class attribute of the table element to which the jqGrid plugin is attached.
HTML 1
<table id="myjqgrid" class="view"></table>
<div id="Pager"></div>
HTML 2
<table id="myjqgrid" class="edit"></table>
<div id="Pager"></div>
JQGrid Definition
$("#myjqgrid").jqGrid({
caption: "" // this is what I want to set dynamically
})
You can use setCaption method to set new caption on the grid:
var $grid = $('#myjqgrid');
$grid.jqGrid('setCaption', 'newCaption');
If you need to set the caption depend on the class of the <table> element the code can be like the following
if ($grid.hasClass('edit')) {
$grid.jqGrid('setCaption', 'Edit Caption');
} else if ($grid.hasClass('vew')) {
$grid.jqGrid('setCaption', 'View Caption');
} else {
$grid.jqGrid('setCaption', 'Default Caption');
}
The only thing which you can't do with respect of setCaption method is to remove (to hide) the caption: the results which you have if you created grid without caption parameter (or with caption: ""). To remove (to hide) the caption you can do
$(">div.ui-jqgrid-titlebar", $grid.closest('div.ui-jqgrid-view')).hide();
or
$($grid[0].grid.cDiv).hide();
(see the answer for details).
Related
I have a form in a View that brings together a number of pieces of information (address, telephone etc). All these elements are wrapped up in a view model. There is one section that asks the user to select a county. On selection, I want to be able to show a price based on the county selected.
I came across the following SO question which is close to what I want, but it looks like the action submits the form to a 'change controller'. I naively need to be able to basically call two controllers - one onSelectedChange and the other onSubmit. I'm pretty sure ya can't do this!
Here' what I'm after:
#model ViewOrder
#using (Html.BeginForm("Order", "Home"))
{
#* - textboxes et al - *#
<p>
#Html.DropDownListFor(x => x.Counties,
new SelectList(Model.Counties, "CountyId", "County"),
new { #class = "form-control input-sm" })
</p>
<p>
#* - £Price result of dropdown list selection and
add to View Model to add to sub total - *#
</p>
<input type="submit" text = "submit"/>
}
I'm very new to MVC - Could do this easily in webforms (but I'm sticking with MVC!) There must be some form of Ajax action that would allow this. Any suggestions?
First you have a problem with you #Html.DropDownListFor() method. Model.Counties is a complex object (with properties CountyId and County) but you cannot bind a <select> (or any control) to a complex object, only a value type. Your model needs a property (say) public int SelectedCountry { get; set; } and then #Html.DropDownListFor(x => x.SelectedCountry, new SelectList(Model.Counties, "CountyId", "County"), ...)
To display the price, you need to handle the .change event of the dropdown, pass the selected value to a controller method, and update the DOM.
Script (based on the property being SelectedCountry)
var url = '#Url.Action("GetPrice", "yourControllerName")';
$('#SelectedCountry').change(function() {
$.getJSON(url, { ID: $(this).val() }, function(data) {
// do something with the data returned by the method, for example
$('#someElement').text(data);
});
});
Controller
public JsonResult GetPrice(int ID)
{
// ID contains the value of the selected country
var data = "some price to return";
return Json(data, JsonRequestBehavior.AllowGet);
}
I created a dropdownlist using jqwidgets and i got a form using velocity template. In the form action i want to get the selected value of my dropdownlist. i need the value in my controller page. How can i get the selected value of the dropdownlist inside velocity template variable? I am passing the item inside $submitUrl.setParameter("filePath", "item"). but if I print the value inside controller then I am getting only item. not the selected value of the dropdownlist. Any suggession?
<script type="text/javascript">
$(document).ready(function ()
{
// Create the countryjqxWidget DropDownList
$("#countryjqxWidget").jqxDropDownList({source: countryList, selectedIndex: 0, width: '200', height: '25', theme: 'ui-redmond'});
$('#countryjqxWidget').on('change', function (event)
{
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
alert(value);
var item = $("#jqxDropDownList").jqxDropDownList('getSelectedItem');
}
});
});
</script>
<form id="form" class="form-horizontal" action="$submitUrl" method="post" >
#lr_btn("submit-btn", "Submit", "Submitting...")
</form>
#set( $submitUrl = $renderResponse.createActionURL() )
$submitUrl.setParameter("submit", "upload")
$submitUrl.setParameter("filePath", "item")
Have you tried by adding the "countryjqxWidget" within your Form and setting its "name" attribute. As far as I know, if you set the "name" attribute, the selected value will be passed automatically on Form submit. It does not matter that the jQWidgets DropDownList is created from DIV tag, You can still set its "name" attribute.
I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
I have an controller which has check like that
if (form["submit"].ToString() == "Continue")
{
}
and i have button which is doing submit
<button name="submit" value="Continue">Continue</button>
It was all working well until i decided to disable Continue button on submit to prevent double click using this function:
$('form').submit(function () {
if ($(this).valid()) {
$(':submit', this).attr('disabled', 'disabled');
}
});
So now i don't get value form["submit"] posted on controller.
Any thoughts how may i fix that?
I want still prevent second click but be able to get form["submit"] value posted on controller.
Can you control the submit value in a hidden field in the form? I can't tell what other logic you might need, but when the form renders, you could set the hidden field's value to the submit button's value and change it when necessary using the first script below. As long as it has a name attribute and is enabled (which you'd rarely disable a hidden field) then it will post when the form is submitted.
$(function() {
// this assumes your button has id="myButton" attribute
$(':hidden[name="submit"]').val($('#myButton').val());
});
And of course in your form, you would need a hidden field with name="submit"
<input type="hidden" name="submit" value="Continue" />
Then, whenever the state of your form changes, modify the disabled state of the button and the value of the hidden field to reflect the value (if it changed at all).
There are also frameworks you may find useful for UI features like this. KnockoutJS comes to mind. It can be used to "value" bind input elements. It's probably overkill for this small example, but it could be useful if your UI expands. I've added markup, script and comments below if you're interested.
$(function () {
var viewModel = {
submitValue: ko.observable("Continue")
};
ko.applyBindings(viewModel);
$('form').submit(function() {
if($(this).valid()) {
// the following line will change the both the hidden field's value
// as well as the button's value attribute
viewModel.submitValue("some other value");
// I couldn't follow your selector here, but please note I changed
// the name of the submit button in the markup below.
$(':submit, this).attr('disabled', 'disabled');
}
});
});
KnockoutJS requires you use the data-bind attribute to setup your elements. In your case, you'd bind one property to multiple elements like this:
<button name="submitButton" data-bind="value: submitValue"/>Continue</button>
<!-- and bind the same value similarly in the hidden field-->
<input type="hidden" name="submit" data-bind="value: submitValue"/>
I am trying to create a situation where if a user clicks on an "edit" button in a list of text items, she can edit that item. I am trying to make the "edit" button post back using ajax.
Here's my ajax code:
$(function () {
// post back edit request
$('input[name^="editItem"]').live("click", (function () {
var id = $(this).attr('id');
var sections = id.split('_');
if (sections.length == 2) {
var itemID = sections[1];
var divID = "message_" + itemID;
var form = $("#newsForm");
$.post(
form.attr("action"),
form.serialize(),
function (data) {
$("#" + divID).html(data);
}
);
}
return false;
}));
});
But the form.serialize() command is not picking up all the form controls in the form. It's ONLY picking up a hidden form field that appears for each item in the list.
Here's the code in the view, inside a loop that displays all the items:
**** this is the only control being picked up: ******
#Html.Hidden(indexItemID, j.ToString())
****
<div class="datetext" style="float: right; margin-bottom: 5px;">
#Model.newsItems[j].datePosted.Value.ToLongDateString()
</div>
#if (Model.newsItems[j].showEdit)
{
// *********** show the editor ************
<div id="#divID">
#Html.EditorFor(model => model.newsItems[j])
</div>
}
else
{
// *********** show the normal display, plus the following edit/delete buttons ***********
if (Model.newsItems[j].canEdit)
{
string editID = "editItem_" + Model.newsItems[j].itemID.ToString();
string deleteID = "deleteItem_" + Model.newsItems[j].itemID.ToString();
<div class="buttonblock">
<div style="float: right">
<input id="#editID" name="#editID" type="submit" class="smallsubmittext cancel" title="edit this item" value="Edit" />
</div>
<div style="float: right">
<input id="#deleteID" name="#deleteID" type="submit" class="smallsubmittext cancel" title="delete this item" value="Delete" />
</div>
</div>
<div class="clear"></div>
}
It's not picking up anything but the series of hidden form fields (indexItemID). Why would it not be picking up the button controls?
(The ID's of the edit button controls, by the way, are in the form "editItem_x" where x is the ID of the item. Thus the button controls are central to the whole process -- that's how I figure out which item the user wants to edit.)
UPDATE
The answer seems to be in the jquery API itself, http://api.jquery.com/serialize/:
"No submit button value is serialized since the form was not submitted using a button."
I don't know how my action is supposed to know which button was clicked, so I am manually adding the button to the serialized string, and it does seem to work, as inelegant as it seems.
UPDATE 2
I spoke too soon -- the ajax is not working to update my partial view. It's giving me an exception because one of the sections in my layout page is undefined. I give up -- I can't waste any more time on this. No Ajax for this project.
You could try:
var form = $('#newsForm *'); // note the '*'
Update
Did you change the argument to $.post() as well? I think I may have been a little too simple in my answer. Just change the second argument within $.post() while continuing to use form.attr('action')
New post should look like this:
$.post(
form.attr("action"),
$('#newsForm *').serialize(), // this line changed
function (data) {
$("#" + divID).html(data);
}
);