I am using inline editing with events. And on click of a non editable cell I want to open Rich Text Box. I tried using edittype: custom and returning the rte but nothing displays. Is there any other way to do this.
Please suggest!
Thanks,
Arshya
using edittype: custom makes no sense for a non-editable column. Make the column editable, by using editable: true
I was able to achieve this using the below solution
On load complete I added the code to open the div on cell click
loadComplete: function() {
var iColNotesPresent = getColumnIndexByName($(this), 'NotesPresent'), rows = this.rows, i, c = rows.length;
var iColNotes = getColumnIndexByName($(this), 'Notes');
for (i = 1; i < c; i += 1) {
$(rows[i].cells[iColNotesPresent]).click(function(e) {
var offset = jQuery(e.target).offset();
var rteText = $(jQuery(e.target).parent()[0].cells[iColNotes])[0].outerText;
var rowId = jQuery(e.target).parent()[0].id;
OpenRTEBox(offset, rteText, rowId);
});
}
},
//Open the div containing RTE
function OpenRTEBox(offset, rteText, rowId) {
isColNotes = true;
currsel = rowId;
$('#rteDiv').css({ position: "absolute", top: offset.top, left: offset.left, "z-index": 20 });
$('#rteDiv').show();
frames['rte0'].document.body.innerHTML = rteText;
}
Here is the html code for RTE
<script language="javascript" type="text/javascript">
writeRichText("rte0", "rte0", 575, 200, true, false, "Notes");
</script>
</td>
</tr>
<tr>
<td align="right">
<input type="button" id="btnOK" onclick="addNotes();" value="OK"/>
</td>
<td align="left">
<input type="button" id="btnCancel" onclick="closeDiv();" value="Cancel"/>
</td>
</tr>
</table>
</div>
Related
I have a design of grid in controller that displays me all data of selected check boxes.
This grid gets appended to a span through ajax.
While performing a delete request, one by one my data in grid gets deleted,
but the grid header stays as it is.
This is my design of grid in controller:
$res_div = '';
$res_div.='<table width="100%" border="0" class="table table-striped table-bordered table-hover">';
$res_div.='<tr>
<th width="100%">SublawId</th>
<th width="100%">Sublawname</th>
<th width="100%">View</th>
<th width="100%">Update</th>
</tr>';
foreach ($law as $sublaw)
{
$law_details = DB::table('tbl_law_sub_master')->where('id', $sublaw->id)->select('*')->first();
$res_div.='<tr>
<td>
<strong>'.$law_details->lms_id.'</strong>
</td>
<td>
<strong>('.$law_details->sub_law_name.')</strong>
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="viewsub_'.$sublaw->id.'">
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="updatesub_'.$sublaw->id.'">
</td>
</tr>';
}
$res_div.='</table>';
$data=array(
'res_div'=>$res_div,
'law'=>$law
);
return json_encode($data);
my ajax request on blade:
$.ajax({
url: "{{ URL::to('staff/staffpostsublawsdata') }}?sub_law_id="+sublaw_ids.join(),
type: 'POST',
dataType: "json",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
var res_sublaw_content=returndata.res_div;
var data = document.getElementById("append_sublaw_grid").innerHTML = ""; $('#append_sublaw_grid').append(res_sublaw_content);
return false;
}
});
On deletion all data gets deleted one by one from grid, but its header stays..
A screenshot:
Everytime you remove a row u can count the number of rows left using
var rowCount = $('.table tbody tr').length;
if rowcount goes to 0 then just hide the table using
$('.table').hide()
Working example:
Put this code in the function where you delete the rows
var rowCount = $('.table tbody tr').length;
if( rowcount == 0){
$('.table').hide();
}
I have a list of images presented in a table format with an update option to edit the image/description in a dialog box.
I have implemented a javascript function loadDialog to dynamically pass the id to the dialog.
However, the editor complains that id is not recognized in the line below:
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
Following are the script and html files.
$(function(){
$('#OpenImgDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Add/Update Image',
modal: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
function loadDialog(id) {
var Pid = id;
$("#OpenImgDialog").dialog({
open: function (event, ui) {
var Pid = id;
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
}
});
$('#OpenImgDialog').dialog('open');
}
Here is my HTML
<table>
<tr>
<th>
Image
</th>
<th>
Description
</th>
<th></th>
</tr>
#foreach (var item in Model.Images) {
<tr>
<td>
<img src ="#item.ImageString" width="200" height="100" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<a class="UpdateImage" href="#" onclick="loadDialog(#item.Id)">Edit</a>
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
How can I pass arguments from javascript to Url.Action?
Or is there a better approach to solving this problem?
Any demo/reference/solution will be helpful for me.
Thanks in advance!
Appologies I think I know what you are after.
in the
$(this).load("#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})") ;
the
#Url.Action("UpdateProjectImageDetail", new { ProjectId = id})
is running server side you need to pass in the id from the client to the server. which meands it should look something like this
function loadDialog(id) {
var Pid = id;
$("#OpenImgDialog").dialog({
open: function (event, ui) {
var Pid = id;
var url = '#Url.Action("UpdateProjectImageDetail")?ProjectId=' + id;
$(this).load(url) ;
}
});
$('#OpenImgDialog').dialog('open');
}
#Url.Action() is server side code, so you can't pass a client side (js) variable to it.
Without looking too closely, you could probably do something like:
$(this).load("#Url.Action(...)" + "?ProjectId=" + id);
There's probably a more elegant solution, but that's all I have time for right now... ;)
I have a Kendo Datepicker that worked perfectly on a div while I was beginning development of a page.
After I got everything all set and working the way it was supposed, I moved the datepicker to a Durandal Modal as was the requirement. The modal works fine, and other databinding is working on the modal, but not the datepicker.
I have tried loading the datepicker at various times in the Durandal lifecycle such as activate, compositionComplete and attached, as well as changing the Z Index to 20000. I am not quite user what I might be missing.
Here is the latest pertinent code:
define([
'durandal/app',
'plugins/router',
'plugins/dialog',
'services/datacontext',
'services/dialogs',
'viewmodels/helpers/vc',
'services/logger',
'services/settings'
],
function (app, router, dialog, datacontext, dialogs, vc, logger, settings) {
var featureSetToEdit;
var startFeaturesDatePicker = null;
var endFeaturesDatePicker = null;
var today = new Date();
var featList = ko.observableArray(['']);
var saving = ko.observable(false);
var isUserInReadOnlyRole = ko.observable(true);
function attached() {
loadDatePickers();
};
function compositionComplete() {
isUserInReadOnlyRole(vc.isUserReadOnly(datacontext.userRole));
};
function loadDatePickers() {
startFeaturesDatePicker = $("#startDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setStartDate,
}).data('kendoDatePicker');
endFeaturesDatePicker = $("#endDateFeatureSet").kendoDatePicker({
value: today,
format: 'dd-MMM-yyyy',
change: setEndDate,
}).data('kendoDatePicker');
};
var setStartDate = function () {
startFeaturesDatePicker.value($("#startDateFeatureSet").val());
};
var setEndDate = function () {
endFeaturesDatePicker.value($("#endDateFeatureSet").val());
};
function checkboxDivId(featuresKey) {
return 'checkboxDivId' + featuresKey;
};
function edit(featureSetToEdit, fList) {
self = this;
self.featList(fList);
return dialog.show(self);
};
function save() {
};
function cancel() {
dialogs.confirmYesNo('Discard changes to this feature Set?', 'Confirm cancel',
function () {
dialog.close(self, false);
},
function () {
return;
}
);
};
// Definition of viewmodel (list of exposed properties and methods)
var vm = {
featList: featList,
edit: edit,
save: save,
saving: saving,
cancel: cancel,
isUserInReadOnlyRole: isUserInReadOnlyRole,
checkboxDivId: checkboxDivId
};
return vm;
});
HTML
<div class="messageBox autoclose" style="min-height: 330px" >
<div class="modal-header">
<h3>Edit Feature Set</h3>
</div>
<div class="modal-body" style="padding: 2px 5px 2px 5px; background-color: #ddd; min-height: 250px; width: 400px; border: 1px solid silver;">
<table class="k-grid">
<tr class="dataRow" style="padding: 2px;">
<td><span>Start Date</span></td>
<td><input id="startDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>End Date</span></td>
<td><input id="endDateFeatureSet" style="width:150px;" class="highZIndex" /></td>
</tr>
<tr class="dataRow" style="padding: 2px;">
<td><span>Features</span></td>
<td id="featuresCheckbox" style="font-size: 10pt; text-align: left" data-bind="foreach: featList">
<input data-bind="attr: { id: $parent.checkboxDivId($data.keyChar), value: $data.keyChar }" type="checkbox" style="margin-bottom:6px;" /> <span data-bind="text: $data.name" style="margin-top:6px;"></span> <br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<div style="float: right">
<span class="icon-spin icon-spinner waiting" data-bind="visible: saving"> </span>
<button class="btn btn-primary" data-bind="click: save, enable: !saving() && !isUserInReadOnlyRole()">Save</button>
<button class="btn btn-default" data-bind="click: cancel, enable: !saving()">Cancel</button>
</div>
</div>
</div>
Can you please take a look and let me know what I might be missing?
So after finding I still needed to load it through the usual Kendo initialization, I searched more until I found that to load it properly I needed the following code in the modal js page:
self = this;
self.compositionComplete = function () {
loadDatePickers();
};
return dialog.show(self);
Now it works exactly the same as a datepicker on a non-modal page.
I hope this helps others to!
Hi Friends i am trying to use knockoutjs on one of my web pages in mvc
razor. From the following ViewModel i am achieving the "ADD MORE"
functionality.But My Problem is that how can we achieve the following
functionality:
(1) The second dropdown should be invisible when the dropdown for
"Type of Tobacco" is selected to "Choose..."
(2)When we choose some other value (other than "Choose") second
dropdown should be populated containing value 1 to 10....
(3) When we select "Others" instead of drop down a textbox should
appear
HERE IS MY ATTEMPT:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/html" id="ddlSelection">
<div><select></select> yrs.</div>
<div><input type="text" data-bind=""></input></div>
</script>
<div id="container">
#*<div data-bind="template:{name:'smoker'}"></div>*#
<table cellpadding="3" cellspacing="4">
<tbody data-bind="foreach: seats">
<tr>
<td>
Type of Tobacco/Nicotine consumed :
</td>
<td>
<select data-bind="options: $root.availabledrugs, value: Drug, optionsText: 'DrugName'"></select>
</td>
<td><select></select></td>
</tr>
<tr>
<td>
Quantity : <input data-bind="value: Name" />
</td>
<td>
Frequency : <select data-bind="options: $root.availablefrequency, value: Frequency, optionsText: 'frequency'"></select>
</td>
<td data-bind="text: FormatPrice"></td>
</tr>
</tbody>
</table>
<button data-bind="click:AddConsumption">Add New One</button>
</div>
<script type="text/javascript">
function setconsumption(name, initdrug,initfrequency) {
var self = this;
self.Name = name;
self.Drug = ko.observable(initdrug);
self.Frequency = ko.observable(initfrequency);
self.FormatPrice = ko.computed(function () {
return self.Drug().Price ? "$" + self.Drug().Price.toFixed(2) : "none";
});
}
function ConsumptionViewModel() {
var self = this;
self.availabledrugs = [{ "DrugName": "Choose...", "Price": 0 },
{ "DrugName": "Cigarettes", "Price": 10 },
{ "DrugName": "Cigar", "Price": 20 },
{ "DrugName": "Others", "Price": 30}];
self.availablefrequency = [{ "frequency": "Choose..." }, { "frequency": "freq1" }, { "frequency": "freq2"}];
self.seats = ko.observableArray(
[new setconsumption("", self.availabledrugs[0], self.availablefrequency[0])]);
self.AddConsumption = function () {
self.seats.push(new setconsumption("", self.availabledrugs[0], self.availablefrequency[0]));
};
}
ko.applyBindings(new ConsumptionViewModel());
</script>
Its hard to guess for me that what you are trying to achieve. But i think you are looking for visible binding in knockout.
The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.
And second think should be the optionsCaption comes under options binding.
If you use optionsCaption with options binding than ko will prepend an extra option in the select list, which will be selected by default and contains value undefined.
By using this both i have create a fiddle according to your requirement. Check this:
Demo fiddle
Hope this is what you are looking for!
I am writing a MVC3 project. Right now I have a table which has column with Data as actionLinks as:
<td style="color: Black; background-color: Bisque; text-align: center; width: 410px">
#Html.ActionLink(#item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { #class = "actionLink" })
</td>
EditPartial as the name suggests is a partial view, which I need to be opened as a pop-up menu so that user can edit the details of the object save it and we can come back to original page.
Thanks for the help!
You could use jQuery and jQueryUi to capture the click and open the rendered action in a dialog box.
<div id="popupWindow" style="display: none;" ></div>
<script type="text/javascript">
$(function() {
$("#popupWindow").dialog({
width: 600,
autoOpen: false
});
$('a.actionLink').click(function() {
var url = $(this).attr('href');
$('#popupWindow').load(url, function() {
$('#popupWindow').dialog('open');
});
return false;
});
});
</script>