KendoUI Grid input styling in column - css

I have a kendoui grid that is being generated with this:
<div id="clientsDb">
#(Html.Kendo().Grid<example.OpenAccess.OBClientSetup>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(obcs => obcs.ProfileName).Width(140);
columns.Bound(obcs => obcs.Default).Width(190);
columns.Bound(obcs => obcs.EEFinalize).Width(100);
columns.Bound(obcs => obcs.Completed).Width(110);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Groupable()
.Pageable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("OB2_ClientProfiles", "OB"))
.Update(update => update.Action("EditingInline_Update", "OB"))
.Destroy(update => update.Action("EditingInline_Destroy", "OB"))
.Model(model => model.Id(obcs => obcs.SetupID))
)
)
</div>
With this I cannot figure out how to style the columns.Bound(obcs => obcs.Default).Width(190); select inputs in the column. Its a select input dropdown but i haven't figured out how to style with form-control out of bootstrap. or even its own style from a temmplate within the grid code.

columns.Bound(obcs => obcs.Default)
.Width(190)
.HtmlAttributes(new {#class = "form-control "});
You can add any attributes using the HtmlAttributes Function

Related

Visual Composer Nested shortcodes in a container

I just created a nested shortcode with vc_map for a wordpress website.
It works pretty well and is really simple.
My parent shortcode is "simple_table" and my chlidren shortcode are "simple_table_row".
[simple_table param="foo"]
[simple_tablerow param="another_foo"]
[simple_tablerow param="another_foo"]
[simple_tablerow param="another_foo"]
[/simple_table]
I can add my shortcode in the root of a page or in row.
However I am unable to add inside an another container like tabs, tour, accordion or Pageable Container. My nested shortcode doesn't appear in the list of elements. I already created several simples shortcodes which work properly in these specific cases.
Here are my vc_map :
vc_map( array(
"name" => "Simple_table",
"description" => "Simple_table",
"base" => "simple_table",
"class" => "simple_table",
"content_element" => true,
"is_container" => true,
'as_parent' => array('only' => 'simple_tablerow'),
"show_settings_on_create" => true,
"icon" => "simple_table_icon",
"category" => __('Content', 'js_composer'),
"js_view" => 'VcColumnView',
"params" => array(
array(
'type' => 'param_group',
'value' => '',
'param_name' => 'cols',
"heading" => "Cols",
'params' => array(
array(
'type' => 'textfield',
"holder" => "div",
'value' => '',
'heading' => 'Data',
'param_name' => 'data',
'admin_label' => true,
),
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Style',
'param_name' => 'style',
),
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Class',
'param_name' => 'class',
)
)
),
array(
"type" => "checkbox",
"class" => "",
"heading" => "hide_header",
"param_name" => "hide_header"
),
array(
"type" => "textfield",
"holder" => "",
"class" => "",
"heading" => "Class",
"param_name" => "class"
),
),
)
);
vc_map( array(
"name" => "Simple_tablerow",
"description" => "simple_tablerow",
"base" => "simple_tablerow",
"class" => "simple_tablerow",
"content_element" => true,
"as_child" => array('only' => 'simple_table'),
"show_settings_on_create" => true,
"icon" => "hide_header",
"category" => __('Content', 'js_composer'),
"params" => array(
array(
'type' => 'param_group',
'value' => '',
'param_name' => 'cols',
"heading" => "Cols",
'params' => array(
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Data',
'param_name' => 'data',
'admin_label' => true,
),
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Style',
'param_name' => 'style',
),
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Class',
'param_name' => 'class',
)
),
),
array(
'type' => 'textfield',
'value' => '',
'heading' => 'Class',
'param_name' => 'class',
)
),
)
);
How can I add my nested shortcodes available in container like tabs, tour, accordion or Pageable Container ?
Note : The parameter "allowed_container_element" seems to be the cause, but how do I modify this value ?
Hopefully you found the answer to this already, since this is a bit old, but I was searching for an answer myself and this came up.
This documentation site might be of use to you https://kb.wpbakery.com/docs/developers-how-tos/nested-shortcodes-container/
If I had to guess, it seems you forgot the last bit of code at the bottom where you extend the WPBakeryShortCodesContainer
//Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_Your_Gallery extends WPBakeryShortCodesContainer {
}
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
class WPBakeryShortCode_Single_Img extends WPBakeryShortCode {
}
}
It's been over 3 years from original question, but i had similar problem. Removing the following line worked for me:
"is_container" => true,

Telerik grid hierarchy how make client template for nested grid

This is typical example from telerik, I try create template for nested grid but without success
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(110);
})
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.ToClientTemplate()
)
</script>
How create client template for nested grid? Because columns.Bound(o => o.OrderID).ClientTemplate("#=OrderID# - #=ShipName#") not work.
Try to use without hashtag in
columns.Bound(o => o.OrderID).ClientTemplate("OrderID - ShipName")
Conditional client template in Razor hierarchical grid
Somewhat late, but for anyone who search for this answer too:Escape the template expression, to be evaluated in the child/detail context
Ex:
columns.Bound(o => o.OrderID).ClientTemplate("\\#=OrderID\\# - \\#=ShipName\\#")
Hierarchy Demo MVC with client template on child

Kendo UI Grid ASP.net MVC Adding sum totals at bottom for multiple

I need to get the sum value of multiple fields, I know how to do one but not sure how to do multiple. What I have is this :
#(Html.Kendo().Grid(Model.Result)
.Name("grid1")
.Columns(col =>
{
col.Bound("Date").Format("{0:n2}").Format("{0:d}");
col.Bound("ClientAge").Format("{0:n2}");
col.Bound("PartnerAge").Format("{0:n2}");
col.Bound("TotalGrossIncome").Format("{0:n2}");
col.Bound("TotalExpenditure").Format("{0:n2}");
col.Bound("TotalNetIncome").Format("{0:n2}");
col.Bound("TotalAssets").Format("{0:n2}");
col.Bound("TotalLiabilities").Format("{0:n2}");
col.Bound("TotalNetAssetValue").Format("{0:n2}");
}
)
.Scrollable()
.Selectable(select => select.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.Date))
).Deferred(true)
)
I basically need the sum value in the footer for following
col.Bound("TotalGrossIncome").Format("{0:n2}");
col.Bound("TotalExpenditure").Format("{0:n2}");
col.Bound("TotalNetIncome").Format("{0:n2}");
col.Bound("TotalAssets").Format("{0:n2}");
col.Bound("TotalLiabilities").Format("{0:n2}");
col.Bound("TotalNetAssetValue").Format("{0:n2}")
Can anyone assist me with this please not a kendo guru yet :(
So I managed to get it sorted :D Have a look below. According to Kendo's Documentation the Template is actually incorrect - using #=sum# is referring to client side as to the initial example for ASP.net. I approached this with a different method and working find now.
#(Html.Kendo().Grid(Model.Result)
.Name("grid1")
.Columns(col =>
{
col.Bound("Date").Format("{0:n2}").Format("{0:d}").FooterTemplate("TOTALS");
col.Bound("ClientAge").Format("{0:n2}");
col.Bound("PartnerAge").Format("{0:n2}");
col.Bound(p => p.TotalGrossIncome).Format("{0:n2}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
col.Bound(p => p.TotalExpenditure).Format("{0:n2}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
col.Bound(p => p.TotalNetIncome).Format("{0:n2}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
col.Bound(p => p.TotalAssets).Format("{0:n2}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
col.Bound(p => p.TotalLiabilities).Format("{0:n2}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
col.Bound(p => p.TotalNetAssetValue).Format("{0:c}").FooterTemplate(#<text>#item.Sum.Format("{0:c}")</text>);
})
.Pageable()
.Selectable(select => select.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.Date))
.PageSize(100)
.Aggregates(aggregates =>
{
aggregates.Add(p => p.TotalGrossIncome).Sum();
aggregates.Add(p => p.TotalExpenditure).Sum();
aggregates.Add(p => p.TotalNetIncome).Sum();
aggregates.Add(p => p.TotalAssets).Sum();
aggregates.Add(p => p.TotalLiabilities).Sum();
aggregates.Add(p => p.TotalNetAssetValue).Sum();
})
)
.Deferred(true)
)

Telerik kendo grid and template for ForeignKey column

I have this grid
#(Html.Kendo().Grid<Models.Worker>()
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(p => p.UserCard);
columns.ForeignKey(p => p.SecId, (List<UserCard>)ViewData["cards"], "Id", "Code").EditorTemplateName("GridForeignKey");
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.SecondName);
columns.Bound(p => p.Phone);
columns.Bound(p => p.Email);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(220);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.DisplayDeleteConfirmation(true)
.Window(window=> window.Width(470))
)
Grid show ForignColumn excelent
but when I try edit row in window my column SecId show like textblock not like combobox.
EditorTemplateName("GridForeignKey")
this template placed in View/Shared/EditorTemplate/ and I didn't change it.
I just start create web apps and use telerik controls for asp.net so please help me understand what I do wrong.

How do I add an onchange handler to a dropdown list in Drupal?

How can I add an onchange handler to a dropdown list in Drupal? The dropdown list is added using hook_form(). I have to perform a function depending on the onchange function.
Is there a way to do this?
You can add a form like this:
hook_form()
{
$form1["dropdown"] = array(
'#type' => 'select',
'#title' => t('Preview the page with themes available'),
'#options' => $ptions,
'#default_value' => 'defalut_value',
'#attributes' => array('onchange' => "form.submit('dropdown')"),
);
//Submit button:
$form1['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit '),
'#attributes' => array('style' => 'display: none;'),
);
Now you can add submit functionality using hook_submit().
Here is the simple example using '#ajax' property
$form['select'] = array(
'#type' => 'select',
'#title' => 'Option #1',
'#options' => $option,
'#ajax' => array(
// Call function that rebuilt other field
'callback' => 'ajax_load_field',
'method' => 'replace',
// div to be get replace by function output
'wrapper' => 'chart',
'effect' => 'fade'
),
);
If you generate another form field by using this drop down.
Then use AHAH for that.
$form['my_form_submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
'#weight' => 1,
'#submit' => array('my_form_submit'),//none JS version
'#ahah' => array(
'event' => 'click',
'path' => 'mymodule/js', //Your ajax function path
'wrapper' => 'myform-wrapper',
'method' => 'replace',
'effect' => 'fade',
'progress' => array(
'type' => 'bar',
'message' => t('Loading...')
)
),
While I am sure that Nicholas is way past this issue by now, this may help some who are searching for a solution.
I'm using D7 and getting the single quotes around dropdown encoded to ' I suppose by >check_plain. >How do I avoid that? – Nicholas Tolley Cottrell Jun 2 at 16:03
I just found the "Drupal" way of doing this.
Step 1, set a variable to contain dropdown by using drupal_add_js:
drupal_add_js(array('mymodule' => array('varname' => 'dropdown')), 'setting');
Step 2, add the attributes line as
'#attributes' => array('onchange' => "form.submit(Drupal.settings.mymodule.varname)"),

Resources