I am using kendo UI MVC4 helper. I have already set fixed width for each column, but when loading the data the data and header are not aligned. Then, when re-sizing any column, all the columns will aligned properly(No issue). Please let me know any solution to be aigned while loading the content. And am using grouping also.
Please check the screen shot.
Just After Load data
After re-sizing any column
Please check my html helper part.
.....
.Columns(columns =>
{
columns.Bound(p => p.EvaluationDT_ID).Hidden(true);
columns.Bound(p => p.ItemID).Hidden(true);
columns.Bound(p => p.ItemName).Width("160px").HtmlAttributes(new { title = "#= ItemName #" }).Sortable(true);
columns.Bound(p => p.Itemcode).Width("80px");
columns.Bound(p => p.Brand).Width("90px").HtmlAttributes(new { title = "#= Brand #" });
columns.Bound(p => p.Weight).Width("50px").HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align:left;" });
columns.Bound(p => p.UOMCode).Width("50px");
columns.Bound(p => p.PackagingName).Width("50px");
......
Try answer from this blog. May be helpfull.
http://blog.falafel.com/kendo-grid-hierarchy-shared-column-headers/
Related
I'm working with a Kendo Grid that shows a modal when editing or adding a row. I'm seeking to modify the modal and add another dropdown list to it. The one thing I'm totally confused about at the moment is that the cshtml for the modal refers to the ViewBag to provide the source data for the dropdownlists, but I can't find anywhere in the entire solution where any code (anywhere) populates the ViewBag with the properties the modal uses.
Before I started modifying, the cshtml had:
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
^^^^^^^^^^^^^^^^
The debugger says this is valid; the ViewBag does contain a .Statuses and it is loaded with data, but I've no idea how this thing came to be in the ViewBag. The only place the controller refers to the viewbag is in setting the .Title
Here's cshtml for the modal:
#model ModalModel
#Html.HiddenFor(model => model.Id)
<!-- this is the new one -->
<div class="editor-group">
<div class="editor-label">
#Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.ProjectId).BindTo(ViewBag.ProjectId_Data).OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.ProjectId)
</div>
</div>
<!-- existing one. Needs DataTextField and DataValueField because model.Statuses is not an IEnumerable<SelectListItem>, its a custom collection of c# enum name/value representation -->
<div class="editor-group">
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.Status)
</div>
</div>
Here's a snip of the cshtml for the main grid and some periphery stuff:
#model GridModel
<h3>#ViewBag.Title</h3>
#{
var projectListItems = Model.Projects.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.Name });
var activityListItems = Model.Activities.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.PrivateName });
}
#(Html.Kendo().Grid<UsageModel>()
.Name("MainGrid")
.Columns(cfg =>
{
cfg.Bound(e => e.DateUsed).ClientTemplate("#= kendo.toString(DateUsed, \"d\") #");
cfg.ForeignKey(e => e.ProjectId, projectListItems, "Value", "Text").Title("Project name").Width(150);
cfg.ForeignKey(e => e.ActivityId, activityListItems, "Value", "Text").Title("Activity name").Width(150);
cfg.ForeignKey(e => e.Status, Model.Statuses, "Value", "Name");
cfg.Command(cmd => { cmd.Edit(); cmd.Destroy().HtmlAttributes(new { style = "visibility:hidden" }); }).Width(80);
})
.Pageable()
...
The 4 items in the ViewBag are:
ProjectId_Data (IEnumerable<SelectListItem>)
ActivityId_Data (IEnumerable<SelectListItem>)
Status_Data (IEnumerable<SelectListItem>)
Statuses (IEnumerable<a custom internal type used for expanding enums into name/value strings>)
Am I correct in assuming that Kendo added these things to the viewbag as part of the data binding process on the main grid? The rendering of the grid to page occurs before the processing of the modal..
Please give (IEnumerable) inside BindTo() for casting and try
#using Kendo.Mvc.UI
#using System.Collections
#Html.Kendo().DropDownListFor(model => model.Status).BindTo((IEnumerable)ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email)
#Html.ValidationMessageFor(x => x.Email)
</div>
When using right click -> paste label gets overlapped with the pasted email:
When typing or using Ctrl+v (paste) work well:
I dont know if using a razor oncopy event is the way to fix this:
#Html.TextBoxFor(x => x.Email,
new {
#class = "input_box",
id = "txtDays",
onpaste=""
}
)
Try the placeholder attribute. It will clear the watermark when you paste the text.
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email, new {placeholder="Your Email" })
#Html.ValidationMessageFor(x => x.Email)
</div>
I'm just wondering if there's a way to add a class to any navigation lists for things like sub-pages, categories, archives, meta?
I can't find anywhere in my templates to add a class as I guess it's all autogenerated?
My parent theme (html5blank) has a section of code (below) where this is referenced but I think it targets all lists in the sidebar...
if (function_exists('register_sidebar'))
{
// Define Sidebar Widget Area 1
register_sidebar(array(
'name' => __('Widget Area 1', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-1',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
// Define Sidebar Widget Area 2
register_sidebar(array(
'name' => __('Widget Area 2', 'html5blank'),
'description' => __('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-2',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
I realised I can add a class to a parent div by amending the before_widget line to read something like:
'before_widget' => '<div id="%1$s" class="%2$s CUSTOM-CLASS-HERE">',
That does add a class but I still thing it'll be added to any and every widget that's added to the sidebar?
Presumably that will mean any widget that contains a ul will inherit styles applied to that class, which will break the widget's appearance?
Hope someone can help with this :)
You can add classes to menu items (or to menus) from WP Dashboard.
Appearance > Menus > Screen Options
Show Advanced > CSS Classes
Click any menu item to expand and add classes.
In CSS, you can always prefix those the classes with a specific id or class of a widget area, to only apply styles in specific sidebars/widget areas.
if you need to add a class to all your menu items programatically, use the
nav_menu_link_attributes hook:
function add_your_menu_classes( $atts, $item, $args ) {
if( /* condition based on $args or $item (WP_Post object)
* (in case you only want this when a particular condition
* is met). If not, just remove the condition */ ) {
$atts['class'] = 'some-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_your_menu_classes', 10, 3 );
I think if ur widgets, displays a kind of navigation you have to use a custom NavWalker to modify link classes
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
I am using inline editor in my kendo grid razor.I want to add kendo sortable widget for reordering rows in grid. But whenever i am appending sortable in my code one of my fields in the grid looses its control i.e. whenever i click on that column for adding data my textbox appears at once and whenever i enter the data and move to another column then the value entered is gone. When i remove the sortable code then the data is displayed perfectly. Please tell me a solution to it.
My code is :
#(Html.Kendo().Grid<KendoUIMVC5.Models.Product>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Order).Width(60);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitsInStock).Width(140);
})
.ToolBar(toolBar => toolBar.Create().Text("Add New Route Part"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(p => p.ProductID);
})
.Read("Read", "Home")
.Update("Update", "Home")
.Sort(s => s.Add(m => m.Order))
)
)
#(Html.Kendo().Sortable()
.For("#Grid")
.Filter("table > tbody > tr")
.Cursor("move")
.HintHandler("noHint")
.PlaceholderHandler("placeholder")
.ContainerSelector("#Grid tbody")
.Events(events => events.Change("onChange"))
)
If somebody like me is running into the same problem, you have to change the sortable filter to .Filter("table >tbody >tr:not(.k-grid-edit-row)").
More informations about: https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/integration/grid
Im beginner in the ASP.NET MVC. I am add drop down menu , but the CSS does not work correctly. How can I fix it? This is my code:
#Html.DropDownListFor(m => Model.Fields[i], new SelectList(Model.attrs[i].atributeDetails, "AtributeDetailId", "AtDetailVal", int.Parse(Model.Fields[i])), " ", new { Class = "form-control", disabled = "disabled",style = "width:575px;height:25px;font-size:small;" })
If you're saying that the styles associated with the 'form-control' class aren't working then it could be because the 'Class' word needs to be lowercase. I normally use #class="my-class". So maybe try the following:
#Html.DropDownListFor(m => Model.Fields[i], new SelectList(Model.attrs[i].atributeDetails, "AtributeDetailId", "AtDetailVal", int.Parse(Model.Fields[i])), " ", new { #class = "form-control", disabled = "disabled",style = "width:575px;height:25px;font-size:small;" })