Develop Reference

Customized checkboxes are not clickable in kendo grid

I have kendo grid with checkbox selection column and I customized these checkboxes but now checkboxes are not clickable, cannot be unchecked or checked
How do I solve this?
Here is my code
#( Html.Kendo().Grid<MockUpForeNet.Controllers.CardDetailController.Days>()
.Name("timegrid")
.DataSource(d => d.Ajax().Read("TimeGridBinding", "CardDetail").Model(keys =>
{
keys.Id(k => k.DayId);
keys.Field(c => c.DayName).Editable(false);
keys.Field(c => c.DayId).Editable(false);
}).PageSize(7))
.Columns(c =>
{
c.Bound(p => p.DayId).Width(100).Title(" ").ClientTemplate("#= chk2(data) #").Sortable(false);
c.Bound(e => e.DayName).Width("auto").Title("Day");
})
.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
.Sortable()
.ColumnMenu()
)
here my checkbox template
function chk2(data) {
return '<input id="masterCheck' + data.DayId + '" class="k-checkbox" type="checkbox" checked="checked" /><label for="masterCheck" class="k-checkbox-label"></label>';
}

You have an error in your template: label for="masterCheck" is missing data.DayId .
Also note that checkboxes have changed in version 2020.1.114 and don't need the empty label anymore. See examples on https://demos.telerik.com/kendo-ui/checkbox/index . Remember to provide an aria-label for accessibility reasons.

DayId should be made editable in the DataSource
keys.Field(c => c.DayId).Editable(true);

checkbox styling and making it checked

The checkbox retrieved from database is so long that it is going downwards, is there any way to make it as four layers
when clicked on "all fields" checkbox all checkbox must be checked.
How this to be done?
My code :-
protected function getConfigForm()
{
$sql = 'SELECT id_order_state,name FROM '._DB_PREFIX_.'order_state_lang';
$results = Db::getInstance()->ExecuteS($sql);
$values_query = array(array(
'id' => 'AllFields',
'name' => $this->l('All Fields'),
'val' => 'All',
));
foreach ($results as $row) {
$values_query[] = array(
'id' => 'OrderID',
'name' => $this->l($row['name']),
'val' => $row['id_order_state'],
'required' => true,
);
}
return array(
'form' => array(
'legend' => array(
'title' => $this->l('Settings'),
'icon' => 'icon-cogs',
),
'input' => array(
array(
'type' => 'checkbox',
'label' => $this->l('Select Required Status'),
'required' => true,
'values' => array(
'query' => $values_query,
'id' => 'id',
'name' => 'name'
),
),
),
'submit' => array(
'title' => $this->l('Save'),
),
),
);
}

Admin forms are rendered using /adminXXX/themes/default/template/helpers/form/form.tpl template file.
In classes /classes/helper/Helper.php there's a method createTemplate():
public function createTemplate($tpl_name)
{
if ($this->override_folder) {
if ($this->context->controller instanceof ModuleAdminController) {
$override_tpl_path = $this->context->controller->getTemplatePath().$this->override_folder.$this->base_folder.$tpl_name;
} elseif ($this->module) {
$override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->override_folder.$this->base_folder.$tpl_name;
} else {
if (file_exists($this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name)) {
$override_tpl_path = $this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name;
} elseif (file_exists($this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name)) {
$override_tpl_path = $this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name;
}
}
} elseif ($this->module) {
$override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->base_folder.$tpl_name;
}
if (isset($override_tpl_path) && file_exists($override_tpl_path)) {
return $this->context->smarty->createTemplate($override_tpl_path, $this->context->smarty);
} else {
return $this->context->smarty->createTemplate($this->base_folder.$tpl_name, $this->context->smarty);
}
}
As you can see in this method, you have the possibility to override a default admin template inside your module by creating this file /modules/my_module/views/templates/admin/_configure/helpers/form/form.tpl:
{extends file="helpers/form/form.tpl"}
{block name="input"}
{if $input.type == 'checkbox'}
{if isset($input.expand)}
<a class="btn btn-default show_checkbox{if strtolower($input.expand.default) == 'hide'} hidden{/if}" href="#">
<i class="icon-{$input.expand.show.icon}"></i>
{$input.expand.show.text}
{if isset($input.expand.print_total) && $input.expand.print_total > 0}
<span class="badge">{$input.expand.print_total}</span>
{/if}
</a>
<a class="btn btn-default hide_checkbox{if strtolower($input.expand.default) == 'show'} hidden{/if}" href="#">
<i class="icon-{$input.expand.hide.icon}"></i>
{$input.expand.hide.text}
{if isset($input.expand.print_total) && $input.expand.print_total > 0}
<span class="badge">{$input.expand.print_total}</span>
{/if}
</a>
{/if}
{* HERE WE DEFINE A CHECKBOX CHECK_ALL *}
<input type="checkbox" id="check_all" name="check_all" data-name="{$input.name}" value="1" />
{foreach $input.values.query as $value}
{assign var=id_checkbox value=$input.name|cat:'_'|cat:$value[$input.values.id]}
{* HERE YOU CAN REARRANGE THE CHECKBOXES AS YOU WANT *}
<div class="checkbox{if isset($input.expand) && strtolower($input.expand.default) == 'show'} hidden{/if}">
{strip}
<label for="{$id_checkbox}">
<input type="checkbox" name="{$id_checkbox}" id="{$id_checkbox}" class="{if isset($input.class)}{$input.class}{/if}"{if isset($value.val)} value="{$value.val|escape:'html':'UTF-8'}"{/if}{if isset($fields_value[$id_checkbox]) && $fields_value[$id_checkbox]} checked="checked"{/if} />
{$value[$input.values.name]}
</label>
{/strip}
</div>
{/foreach}
{else}
{$smarty.block.parent}
{/if}
{/block}
{* HERE WE DEFINE THE JAVASCRIPT THAT WILL ANIMATE THE CHECK ALL CHECKBOX *}
<script type="text/javascript">
$("#check_all").on('change', function() {
$("input[name=" + $(this).data('name') + "]").prop('checked', true);
$(this).prop('checked', false);
});
</script>
This template will be used for every admin controller defined in your module.
I didn't test this code, you'll have to adapt it to your needs but the overall concept is here.

Ckeditor helper error in bonefire framework

I tried to integrate ck editor for my project. But it show some error massages.
I can't config those errors.
Controller public function ckeditor()
$this->load->helper('ckeditor_helper');
//print_r($this->load->helper('ckeditor_helper'));
//Ckeditor's configuration
$data['ckeditor'] = array(
//ID of the textarea that will be replaced
'id' => 'content',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 1' => array (
'name' => 'Blue Title',
'element' => 'h2',
'styles' => array(
'color' => 'Blue',
'font-weight' => 'bold'
)
),
//Creating a new style named "style 2"
'style 2' => array (
'name' => 'Red Title',
'element' => 'h2',
'styles' => array(
'color' => 'Red',
'font-weight' => 'bold',
'text-decoration' => 'underline'
)
)
)
);
$data['ckeditor_2'] = array(
//ID of the textarea that will be replaced
'id' => 'content_2',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
'toolbar' => array( //Setting a custom toolbar
array('Bold', 'Italic'),
array('Underline', 'Strike', 'FontSize'),
array('Smiley'),
'/'
)
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 3' => array (
'name' => 'Green Title',
'element' => 'h3',
'styles' => array(
'color' => 'Green',
'font-weight' => 'bold'
)
)
)
);
// Template::set('toolbar_title', 'Create New Event');
Template::set_view('sport_events/ckeditor');
Template::set('ckeditor',$data);
Template::render();
}
Views ckeditor.php(This is my view page.just i call ckeditor.js and pass controller function array to views)
<script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>
<?php
echo '<pre>';
print_r($ckeditor);
echo '</pre>';
?>
<textarea name="content" id="contents" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor_2); ?>

The error was I didn't load correct place to ckeditor folder.
path should be public folder

How do you manually sort a Kendo UI Grid in ASP MVC page?

I have a grid which is seen below.
I have already made it Sortable as you can see. But when someone clicks search I want the grid sorted by a particular field - the SurveyDueDate.
How do I set the field the grid is sorted by and if it is ascending or descending from the javascript call in the search button click event?
Everything I look at on the grid only shows how to make it Sortable and doesn't say how to explicitly set the sort.
#(Html.Kendo().Grid<SurveyMaintenance.Models.StoreSurveyList>()
.Name("idGridStoreSurveyList")
.HtmlAttributes(new { ID = "idGridStoreSurveyList", Class = "k-grid-header" })
.Columns(columns =>
{
columns.Bound(p => p.IsSelected)
.ClientTemplate("<input type='checkbox' class='StoreSurveyListDeleteItemRequest' #= (IsSelected === true) ? checked='checked' : '' # onclick='StoreSurveyListFunctions.toggleStoreSurveyListDeleteItemRequestSelection(this)' />")
.HeaderTemplate("<input type=\"checkbox\" id=\"toggleAllStoreSurveyListDeleteItems\"/>")
.Width(40)
.Filterable(false)
.Sortable(false);
columns.Bound(p => p.SurveyDueDate)
.Template(#<text></text>)
.ClientTemplate("#= kendo.toString(SurveyDueDate,'MM/dd/yyyy') #")
.Width(130);
columns.Bound(p => p.StoreCompleted)
.Width(110);
columns.Bound(p => p.SurveyName);
columns.Bound(p => p.DeliveryDate)
.Template(#<text></text>)
.ClientTemplate("#= kendo.toString(DeliveryDate,'MM/dd/yyyy') #")
.Width(130);
columns.Bound(p => p.SupplierName)
.Width(200);
})
.Sortable()
.Filterable()
.Navigatable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(500)
.ServerOperation(false)
.Events(events => events.Error("grid_error_handler"))
.Model(model => { model.Id(p => p.SurveyID); })
.Read(
read => read.Action("GetStoreSurveyList", "StoreSurveyList").Data("additionalDataStoreSurveyList")
)
)
)

I figured it out.
Inside the javascript call I put the following code:
var kendoGrid = $("#idGridSurveyList").data("kendoGrid");
var dsSort = [];
dsSort.push({ field: "DeliveryDate", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);
There is a sort method for the datasource of a kendo grid and you can pass it an array that holds the field and direction of the sort.

Inline markup blocks (#<p>Content</p>) cannot be nested. Only one level of inline markup is allowed

Hello I am getting the error:
Inline markup blocks (#<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.
Using a Kendo UI tabstrip and MultiSelectBoxes with a Razor View and MVC4
I have tried implementing the helper class, but I am still getting the error
Here is my code, am I missing a step? I moved the 3 multiselects out and called them with the helper!
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("One")
.Content(#<div>
#RenderSelect()
</div>;);
tabstrip.Add().Text("Two")
.Content("Two");
tabstrip.Add().Text("Three")
.Content("Three");
})
.SelectedIndex(0)
)
#helper RenderSelect()
{
<h2>MyList</h2>
<label>One</label>
#(Html.Kendo()
.MultiSelect()
.Name("One")
.AutoBind(true)
.Placeholder("Select Clients...")
.DataTextField("hname")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Client", "Dist");
})
.ServerFiltering(true);
})
)
<label>Two</label>
#(Html.Kendo()
.MultiSelect()
.Name("Two")
.AutoBind(true)
.DataTextField("gname")
.Placeholder("Select Recipients...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Client", "Dist");
})
.ServerFiltering(true);
})
)
<label>Three</label>
#(Html.Kendo()
.MultiSelect()
.Name("Three")
.AutoBind(true)
.DataTextField("id")
.Placeholder("Select CLL...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Codes", "Dist");
})
.ServerFiltering(true);
})
)
}

I figured it out.
I have to chain the helpers.
So One helper class for each of the multi-selects.
Follow This:
http://www.aspnetwiki.com/telerik-mvc:nested-container-controls-and-razor-helper
Then If you want multiple MultiSelects In One Tab You will need to have a helper for each multiselect like this:
Here is the helper, just copy this for the second third and fourth and change the names etc...
#helper RenderMultiFirstBox()
{
#(Html.Kendo()
.MultiSelect()
.Name("First")
.AutoBind(true)
.Placeholder("Select First...")
.DataTextField("name")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Index", "Something");
})
.ServerFiltering(true);
})
)
}
Then Call the helpers in the TabStrip 'Content' like this:
.Items(tabstrip =>
{
tabstrip.Add().Text("One")
.Content(#<text>
#RenderMultiSelectFirstBox()
#RenderMultiSelectSecondBox()</text>);