I want to show DetailTemplate for Kendo UI Grid by conditions.
I tried the following cases:
detailTemplate: '#if(ResultDate!= null){ =kendo.template($("#detailRequestTemplate").html()) }#',
and
detailTemplate: function (e) {
if (ResultDate != null)
{
return kendo.template($("#detailRequestTemplate").html());
}
},
both of them don't work correctly
Try putting this logic inside the template instead.
<div id="grid"></div>
<script type="text/x-kendo-template" id="detailRequestTemplate">
#if(ResultDate !== null) {#
//...your template html
#}#
</script>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
detailTemplate: kendo.template($("#detailRequestTemplate").html()),
});
});
</script>
For a more complete example, look at this dojo.
Also take a look at Telerik's Templates Overview documentation.
I found a solution for it:
dataBound: function (e) {
var items = e.sender.items();
items.each(function () {
var row = $(this);
var dataItem = e.sender.dataItem(row);
if (ResultDate !== null) {
row.find(".k-hierarchy-cell").html("");
}
})
},
This code removes an "arrow", if condition is false
Related
I have a script file scripts.js with a function that styles all checkboxes in page. This file is referenced in the master page.
There is a user control and a aspx test page for it. On page load, the UC shows a list of checkboxes and the style is applied.
On clicking a button, an ajax call gets a list from database and binds some more checkboxes to the page. But for the new checkboxes, the style is not applied. What could be going wrong.
scripts.js:
function selectcheckBtn() {
alert(1);
if ($("input:checkbox").prev("span").length === 0) {
alert(2);
$("<span class='uncheked'></span>").insertBefore("input:checkbox")
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
}
ctrl.ascx:
<script>
function ShowMore() {
$.ajax({
url: "/_layouts/15/handlers/ShowMore.ashx",
data: {},
success: function (msg) {
//append new chkbox list to existing list. It is hidden at first and later faded in.
$(".divList").append(msg);
selectcheckBtn();
$(".hideDiv").fadeIn(300).removeClass("hideDiv");
},
error: function (msg) {
alert("An error occurred while processing your request");
}
});
}
</script>
Show more
On page load both alerts pop. But on clicking 'Show More', only alert(1) pops.
There are no errors in browser console.
Rendered HTML:
//with style applied to chkboxes on page load
<div><span class="uncheked"></span><input type="checkbox" runat="server" id="406">
<label>Compare</label></div>
//with no style applied to new chkboxes
<div><input type="checkbox" runat="server" id="618"><label>Compare</label></div>
I did not understand why the if condition wasn't true in selectcheckBtn();, for the new chkboxes. So, added a new class for the checkboxes and wrote this workaround.
Now calling this function instead of selectcheckBtn(); in the ajax code, worked.
function StyleCheckBox() {
$(".chkBx").each(function () {
if ($(this).prev("span").length === 0) {
$("<span class='uncheked'></span>").insertBefore($(this));
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
});
}
I have the following fiddle: http://jsfiddle.net/kmgj8ny9/
JQuery:
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("focus", ".htLeft", function (e) {
//alert(this);
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft", function (e) {
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
If the textarea is focused, the Comments label is bold, but if the dropdownlist is focused, the Issue label isn't bold.
The dropdownlist is a HTML generated ASP.net control.
How can I resolve it?
Update
Based on the new HTML provided, I have tweaked the selectors to target the input elements created by the chosen plugin as well as your inputs:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft, .chosen-search input", function (e) {
console.log(this);
$(this).closest(".section").find(".span_small:first").removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/12/
You can also combine the event handlers into one and check the event.type property to decide if you are focusin or focusout and toggle the classes accordingly:
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
var focusin = e.type == "focusin";
$(this).closest(".section").find(".span_small:first").toggleClass("setNormal", !focusin).toggleClass("setBold", focusin);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/13/
Typically you would only need one class, which you toggle, rather than two as the default styling should be the same as setNormal. That means you can shorten it further to this:
e.g.
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").toggleClass("setBold", e.type == "focusin");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/14/
Original answer
Because of the plugin you are using for the dropdown, the control that gets focus in the dropdown is not .htLeft. That element has been buried within other elements to make the "pretty" control you see.
Try this as a quick fix:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft,:has(.htLeft)", function (e) {
//alert(this);
$(this).closest(".section").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft,:has(.htLeft)", function (e) {
$(this).closest(".section").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/3/
Normally I view the DOM in my browser to see what elements get created by plugins and target something specific to them.
Note: closest is always preferable to something like parent("div").parent("div") as it handles DOM changes.
You can also use mouseover and mouseout :http://jsfiddle.net/kmgj8ny9/6/
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("mouseover", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("mouseout", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
UPDATE
After I gave it a little more thought, I believe .mouseup() would work better for this task.
what I want to do is when I click the image button, a popup window has to come up in the center of the page.below code mask it but doesn't create a popup window.one more question I want to put dynamic textbox and check box according to a store procedure from sql.shall I write the table records in a hiddenfield and how can I transfer it to the popup window?? thanks
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.btncig').click(function (e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<td>
<asp:ImageButton ID="Imagecig" class="btncig" runat="server" ImageUrl="~/Images/selection.png" style="margin-left:13px" OnclientClick=""/>
css
#mask
{
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window
{
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog
{
width:375px;
height:203px;
}
You don't say which library you are using for your popup. If you are using jQuery UI, then your code should look like this:
<script>
$(document).ready(function () {
$("#dialog").dialog({ // <-- Initialize your dialog/popup
autoOpen: false,
modal: true});
$('.btncig').click(function (e) {
e.preventDefault();
$("#dialog").dialog("open"); // <-- show your dialog/popup
});
});
</script>
You also need some html to put your fields, again you can use a number of methods to create the content dynamically, ie ajax calls etc so your html should look something like this
<div id="#dialog">
<!-- Your dynamic content goes here -->
</div>
You need to ensure that in your page you reference both the jQuery and the jQuery libraries either through CDN or locally.
I hope this helps
I have been stuck for a couple days now and I have tried a few things in regards to pre-populating my checkbox. I have a view model and 2 functions called "callServiceget" which calls a webservice to get the value of my checkbox field (true or false) and "retVendor" which updates the value of the checkbox.
if the value of the checkbox in the database is true, I want it to be checked when i load the page, unfortunately, I am unable to accomplish this. Any help or advice is much appreciated. Thanks in advance.
<input class="input" type="checkbox" data-bind="checked: vendor_inventory" />
<script type="text/javascript">
function VendorViewModel() {
var self = this;
self.vendor_inventory = ko.observable("");
self.callServiceGet = function (id) {
vendors.get("accounting", 2, id, self.retVendor);
}
self.retVendor = function (results) {
self.vendor_inventory(results.inventory);
}
//self.vendor_inventory.subscribe(function (value) {
// alert(value);
//},self);
}
</script>
<script type="text/javascript">
var id = 122;
vm = new VendorViewModel();
vm.callServiceGet(id);
ko.applyBindings(vm);
</script>
I am having a problem with disabling DropDownList based on the chice of 1st DropDownList, there is no post back occuring, and it is a template based web app here is the current code:
<script type="text/javascript">
$(function() { var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>'); dropDownList1.change(function(e) {
if ( jQuery("#ddlUserType").val() != "ETOC") dropDownList2.removeAttr('disabled'); e.preventDefault();
else
dropDownList2.removeAttr('enabled'); e.preventDefault(); }
} );
</script>
what is happening now is page is blank and if I remove the above code everything shows, where I am going wrong.
here is the plain and final javascript code which worked:
<script language="javascript">
function CheckDropDownState(lstbox)
{
if (lstbox.selectedIndex == 3) { document.forms[0].ddlMember.disabled = 1; }
else { document.forms[0].ddlMember.disabled = 0; }
}
</script>
and thew .aspx code:
<asp:dropdownlist id="ddlUserType" runat="server" onclick="CheckDropDownState(this);"></asp:dropdownlist>
Once again appreciate the help guys.
I've tried cleaning your code a little bit:
$(function() {
var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>');
dropDownList1.change(function(e) {
var selectedValue = $(this).val();
if (selectedValue != 'ETOC') {
// enable the second combo if the value selected in the first combo
// is not ETOC
dropDownList2.removeAttr('disabled');
} else {
dropDownList2.attr('disabled', 'disabled');
}
e.preventDefault();
}
});