i running 1 jquery kendo grid row template showing content images.below code :
<table id="grid" style="width:100%"> <colgroup> <col class="photo" /> <col class="details" /> <col /> </colgroup> <thead style="display:none"> <tr> <th> details </th> </tr> </thead> <tbody> <tr> <td colspan="3"></td> </tr> </tbody> </table> <script id="rowtemplate" type="text/x-kendo-tmpl"> <tr> <td style="width:30%"> div class="row"> <div id="dvimage" class="col-sm-4" style="width:118px"> #= imagelink # </div> <div class="col-sm-8" style="width:400px"> <span class="name" style="font-size:14px; color:green">#: link #</span> </div> </div> </td> </tr> </script> <style> .name { display: block; font-size: 1.3em; } .k-grid-header .k-header { padding: 0px 20px; } .k-grid-content { overflow-y: auto; } .k-grid tr td { background: white !important; border: 0 !important; border-color: transparent; } .k pager-wrap { border-width: 1px !important; border-color: #ccc; } .k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-colorpicker .k-i-arrow-s, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-toolbar, .k-tooltip, .k-button-group .k-tool, .k-upload-files { border-color: transparent; } .col-md-2 { width:118px } .col-md-3 { width:25% } </style>in above code have image , description showing of rows don't have image still it's containing space. here need if image null particular row should hide image column. tried did not luck. below code:
$("#grid").kendogrid({ autobind: false, datasource: { transport: { read: { url: "/home/getsearchdata", type: "post", contenttype: "application/json; charset=utf-8", datatype: "json", data: { searchterm: $('[id*=hdnhomesearch]').val() } }, parametermap: function (data, operation) { return kendo.stringify(data); } }, pagesize: 10, schema: { parse: function (data) { debugger; var items = []; var chkcorrectval = 0; var context = $('#dvimage'); (var = 0; < data.data.length; i++) { if (data.data[i].correctvalue != null && data.data[i].searchvalue != null) { $("#spnsr")[i].innerhtml = "<b>" + "get results text: " + "</b>" + data.data[i].correctvalue; $("#spnsv")[i].innerhtml = "<b>" + "searched text: " + "</b>" + data.data[i].searchvalue; chkcorrectval = 1; } else { if (chkcorrectval == 0) { $("#spnsr").hide(); $("#spnsv").hide(); } } if (!data.data[i].imagelink) { var getcontext = $(context[i]); data.data[i].imagelink = ""; $(context[i]).addclass('hidden'); } } var product = { data: data.data, total: data.total }; items.push(product); return (items[0].data); }, } }, databound: function () { displaynoresultfound($("#grid")); }, serverpaging: true, pageable: { refresh: true, pagesizes: true }, rowtemplate: kendo.template($("#rowtemplate").html()), }); });one more example pasting here trying same results , working fine me. below code:
<input type="submit" id="soltitle" value="#1"/> <div class="row"> <div class="col-md-2" id="hell1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"></h4> </div> <div id="timeline1" class="panel-collapse collapse"> <div class="panel-body"> <a href="#" class="thumbnail"> <img class="img-responsive" src="http://placehold.it/250x160" alt="thumb11" /> </a> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"></h4> </div> <div id="timeline1" class="panel-collapse collapse"> <div class="panel-body"> <a href="#" class="thumbnail"> <img class="img-responsive" src="http://placehold.it/250x160" alt="thumb11" /> </a> </div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#soltitle').click(function () { $('#hell1') // find parent class starts "col-md" // change class "col-md-3" .closest('[class^="col-md"]') .toggleclass('col-md-2 col-md-2 hidden') // find siblings of parent similar class criteria // - if siblings same, can use ".siblings()" // change class "col-md-2" //.siblings('[class^="col-md"]') // .removeclass('col-md-3') // .addclass('col-md-2'); }); }); </script>in example hiding first column in button click event , working fine.
the problem toggle class rows image not exist. each time toggle , toggle again, second toggle negates first one. if rows if evaluated true pair, last toggle negation.
it not clear whether need hide whole column if find 1 such row, or need hide column affected row specifically. also, if incorrect.
if want hide whole column if @ least such row exists, might solution:
var shouldshow = true; (var = 0; shouldshow && (i < data.data.length); i++) { if (!data.data[i].imagelink) { $(".imageclass").addclass('hidden'); shouldshow = false; } } if want affected row, might you:
var context = $(".imageclass"); (var = 0; < data.data.length; i++) { if (!data.data[i].imagelink) { $(context[i]).addclass('hidden'); } } the code assumes have single column having imageclass.
edit
it turned out .hidden class not defined. there 2 possible solutions, can choose either of them.
solution1: replace .addclass("hidden") .hide()
solution2: add following rule css code: .hidden {display: none;}
Comments
Post a Comment