I used kendo Telerik in asp core and Cofig it with Html Helpers.
but now i'm going to use Tag Helpers for it.
who know about replacing my code with TagHelpers:
HTML Helper:
#model IEnumerable<Lms.Domain.Models.Group>
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.GroupName);
columns.Bound(c => c.LibraryId);
columns.Command(command => { command.Edit(); command.Destroy()});
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.ServerOperation(false)
.Model(M=>M.Id(c=>c.Id))
.Read(read=>read.Action("GroupView","Group"))
)
);
Actually a have problem with data binding in with tag helpers?
See the below code
<kendo-grid name="grdName" height="550">
<columns>
<column field="Id" hidden="true"/>
<column field="GroupName" title="Group Name" />
<column field="LibraryId" title="Library Id" />
<column width="100" title="View/Edit">
<commands>
<column-command name="custom" text="<span
class='fa-1x fa fa-edit' style='color:blue'>
</span>" click="view"></column-command>
</commands>
</column>
</columns>
<toolbar>
<toolbar-button name="custom" template="addNewTemplate">
</toolbar-button>
</toolbar>
<scrollable enabled="true" />
<sortable enabled="true" />
<pageable enabled="true" />
<filterable enabled="true" />
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="#Url.Action("GetList", Controller)"/>
</transport>
</datasource>
</kendo-grid>
Related
Is there a way to do an if statement before showing the show page?
For instance if the id of the element I clicked on with the show button end with ".log" I want to have the show page look like this:
export const reportShow = ({ ...props }) => (
<Show title="Log" {...props}>
<SimpleShowLayout>
<ReferenceManyField label="Log" reference="archivedfiles" target="id">
<Datagrid>
<TextField source="id" label="Line" />
<TextField source="timestamp" label="Timestamp" />
<TextField source="severity" label="Severity" />
<TextField source="message" label="Message" />
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>);
But if the id ends with .txt I want the show page to show a Report page which would have this:
export const reportShow = ({ ...props }) => (
<Show title="Report" {...props}>
<SimpleShowLayout>
<TextField source="id" label="Report Name" />
<TextField source="rmessage" label="Message" />
</SimpleShowLayout>
</Show>);
What would be the best way to go about this?
Maybe the aor-dependent-input addon can help you with that.
I ended up getting this to work by doing this:
export const archivedShow = ({ ...props }) => {
if (props.match.params.id.endsWith("txt")){
return (<Show title="Report" {...props}>
<SimpleShowLayout>
<ReferenceManyField label="Report" reference="archivedfiles" target="id">
<Datagrid>
<FormattedReportView/>
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
);
}
else {
return (
<Show title="Log" {...props} filters={< LogFilter/>}>
<SimpleShowLayout>
<ReferenceManyField label="Log" reference="archivedfiles" target="id">
<Datagrid>
<TextField source="id" label="Line" />
<TextField source="timestamp" label="Timestamp" />
<TextField source="severity" label="Severity" />
<TextField source="message" label="Message" />
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
);
}
}
I am trying to add inside custom grid within template but I cannot see these links in output along with other grid data ....
<cc0:Grid ID="StaffItemList" runat="server" FolderStyle="~/Styles/Grid" AutoGenerateColumns="false"
Width="100%" PageSizeOptions="5,10,20,50,100,-1" AllowFiltering="true" FilterType="ProgrammaticOnly"
AllowAddingRecords="false">
<Columns>
<cc0:CheckBoxSelectColumn ShowHeaderCheckBox="true" Width="50" ControlStyle-CssClass="UserInRoleGrid"></cc0:CheckBoxSelectColumn>
<cc0:Column DataField="id" HeaderText="ID" Visible="true" />
<cc0:Column DataField="loginid" HeaderText="loginid" Width="150" />
<cc0:Column DataField="forenames" HeaderText="forenames" />
<cc0:Column DataField="surnames" HeaderText="surnames" />
<cc0:Column DataField="gender" HeaderText="gender" />
<cc0:Column DataField="email" HeaderText="email" />
<cc0:Column DataField="deleted" HeaderText="deleted" />
</Columns>
<Templates>
<cc0:GridTemplate runat="server" ID="AddUserToRoleLink">
<Template>
addRole
</Template>
</cc0:GridTemplate>
</Templates>
</cc0:Grid>
I have found asnswer; code as following....
<cc0:Grid ID="StaffItemList" runat="server" FolderStyle="~/Styles/Grid" AutoGenerateColumns="false"
Width="100%" PageSizeOptions="5,10,20,50,100,-1" AllowFiltering="true" FilterType="ProgrammaticOnly"
AllowAddingRecords="false">
<Columns>
<cc0:Column DataField="id" HeaderText="ID" Visible="true"/>
<cc0:Column DataField="loginid" HeaderText="loginid" Width="150" />
<cc0:Column DataField="forenames" HeaderText="forenames" />
<cc0:Column DataField="surnames" HeaderText="surnames" />
<cc0:Column DataField="gender" HeaderText="gender" />
<cc0:Column DataField="email" HeaderText="email" />
<cc0:Column DataField="deleted" HeaderText="deleted" />
<cc0:Column DataField="Functions" HeaderText="deleted" >
<TemplateSettings TemplateId="AddUserToRoleControl"/>
</cc0:Column>
</Columns>
<Templates>
<cc0:GridTemplate runat="server" ID="AddUserToRoleControl">
<Template>
Add Role
</Template>
</cc0:GridTemplate>
</Templates>
</cc0:Grid>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$(".AddStaffToRoleLink").on("click", function () {
var selectedStaffID = $(this).attr("id");
alert("this is " + selectedStaffID);
});
});
</script>
I'm having a problem with DynamicFields in a GridView. I'm trying to get a field with a property from a related entity, something like "Customer.Name" in an Order entity but always get the error "The table 'Order' does not have a column named 'Customer.Name'."
I'm including the Customer entity in linq query.
If I change DynamicField by BoundField all works fine.
Edit: This is the code...
<asp:GridView ID="grvActivities" runat="server"
Caption="<%$ Resources:QuasarApp, MyOpenActivities %>" AutoGenerateColumns="false"
DataKeyNames="ActivityId" ItemType="Quasar.Model.Activity"
ShowHeaderWhenEmpty="True" AllowSorting="True"
ShowFooter="True" CssClass="table table-striped table-bordered table-hover table-condensed table-responsive"
SelectMethod="grvActivities_GetData"
UpdateMethod="grvActivities_UpdateItem"
OnRowCommand="grvActivities_RowCommand">
<Columns>
<asp:HyperLinkField ControlStyle-CssClass="nounderline fa fa-edit"
DataNavigateUrlFields="ActivityId" DataNavigateUrlFormatString="~/Activities/Edit.aspx?RecordId={0}"
ItemStyle-Width="25px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<asp:LinkButton ID="Complete" runat="server" CommandName="Complete" CommandArgument='<%# Eval("ActivityId") %>'
CssClass="nounderline fa fa-check-square-o" ToolTip="<%$ Resources:QuasarApp, MarkAsCompleted %>" />
</ItemTemplate>
</asp:TemplateField>
<asp:DynamicField DataField="StartDate" DataFormatString="{0:g}" />
<asp:DynamicField DataField="DueDate" DataFormatString="{0:g}" />
<asp:DynamicField DataField="EndDate" DataFormatString="{0:g}" />
<asp:DynamicField DataField="Name" />
<asp:DynamicField DataField="Activity.Customer.Name" />
<asp:DynamicField DataField="Lead" />
<asp:DynamicField DataField="PriorityLevel" />
<asp:DynamicField DataField="ActivityType" />
<asp:DynamicField DataField="Status" />
<asp:DynamicField DataField="CreatedBy" />
<asp:ButtonField ButtonType="Link" CommandName="Delete" ControlStyle-CssClass="nounderline fa fa-eraser"
ItemStyle-Width="25px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" />
</Columns>
</asp:GridView>
Codebehind:
public IQueryable<Activity> grvActivities_GetData()
{
var query = _uow.Activities.GetMany(a =>
a.IsActive
&& a.AccountManagerId == currentAccountManager
&& a.EndDate == null,
q => q.OrderByDescending(s => s.StartDate),
includeProperties: "Customer, Lead, ActivityType");
return query;
}
Edit2:
Hi, I've found that with this column:
<asp:TemplateField HeaderText="<%$ Resources:QuasarApp, Customer %>">
<ItemTemplate>
<asp:Label Text="<%# Item.Customer != null ? Item.Customer.Name : String.Empty %>" runat="server" />
</ItemTemplate>
</asp:TemplateField>
it works fine, but I'm loosing all sorting, etc., capabilities. Why if navigation property is comming in the datasource, DynamicField cannot found this property?
For navigational properties you should use only this:
<asp:DynamicField DataField="Customer" />
Dynamic data will show the first string property of your class. Or you can force with annotations:
[DisplayColumn("Name")]
public class Customer
But if you are using EF6 it's necessary to install the provider
[http://blogs.msdn.com/b/webdev/archive/2014/02/28/announcing-the-release-of-dynamic-data-provider-and-entitydatasource-control-for-entity-framework-6.aspx][1]
and register your model in global.asax.cs:
void Application_Start(object sender, EventArgs e)
{
MetaModel DefaultModel = new MetaModel();
DefaultModel.RegisterContext(new Microsoft.AspNet.DynamicData.ModelProviders.EFDataModelProvider(
() => new YOURCONTEXT()),
new ContextConfiguration { ScaffoldAllTables = false });
}
and finally set the page_init code:
protected void Page_Init()
{
grvActivities.SetMetaTable(MetaTable.GetTable(typeof(Activity)));
}
In Telerik Control, how to get a radcombobox id?
For example, the below code gets the value of RadCombox1 Client ID. If there is 5 radcomboboxes in my page (sample.aspx), how to get the corresponding id DYNAMICALLY.........
{
var combo = $find("<%= RadComboBox1.ClientID %>");
}
Thanks in Advance,
Ganesan A
Added More :
Thanks for your quick reply. Am using Telerik Control in c#.
a) am using no of radcombobox, raddatepicker, radtimepicker and raddatetimpicker in one page like below
<telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoaded">
<telerik:RadPane ID="RadPane1" runat="server">
<telerik:RadComboBox ID="RadComboBox1" CssClass="cmb_bx" runat="server">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
<telerik:RadComboBox ID="ComboBox" CssClass="cmb_bx" runat="server">
<Items>
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" />
<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" />
</Items>
<CollapseAnimation Duration="200" Type="OutQuint" />
</telerik:RadComboBox>
<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="SupplierName" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="CorporateCode" runat="server">
</telerik:RadDatePicker>
<telerik:RadDatePicker ID="PartNo" runat="server">
</telerik:RadDatePicker>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server">
</telerik:RadPane>
</telerik:RadSplitter>
b) when i scroll the page, radcombobox or any other control which i had mentioned above also scrolling with the page. it doesn't hide. So i am using the below javascript coding
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnClientLoaded(sender, eventArgs)
{
var pane = sender.getPaneById("<%= RadPane1.ClientID %>");
var contentElement = pane.getContentElement();
contentElement.onscroll = function () {
var combo = $find("<%= RadComboBox1.ClientID %>");
alert(combo.get_id());
var dtpkr = $find("<%= RadDatePicker1.ClientID %>");
var dropDown = combo.get_dropDownVisible();
var dropDown1 = dtpkr.isPopupVisible();
if (dropDown) {
combo.hideDropDown();
}
else if (dropDown1) {
dtpkr.togglePopup();
}
};
}
</script>
</telerik:RadCodeBlock>
c) This will hide RadcomboBox1 and RadDatePicker1 only. How can i write the code for more than one Radcombobox and Raddatepicker in one page.
Thanks
Ganesan A
You should specify what language, but this might help. This is for C#.
for (int i = 1; i < 6; i++)
{
string comboBoxName = "RadComboBox" + i.ToString();
var comboObject = (this.FindName(comboBoxName) as RadComboBox); //this returns the object if the name is found
//access the clientID
if( comboObject != null)
var clientid = comboObject.ClientID;
}
Since you already know what to do with the RadComboBoxes and RadDatePickers once you have them, I'll simply point out how to grab all the RadControls of a particular type and let you augment your code.
Title sounds like a real mouthful, so let me try to explain this. I'm very strong with grinding out Web Forms and this is my second crack at using a framework and MVC (don't ask about the first one). Start with a table like this:
Title: Milestones
Id int - Auto, PK
Project_Id int - FK, Many Milestones to One Project, Provided static for now
Number int
Name varchar(50)
Status_Id int - FK One Status to One Milestone
PlannedDate date
LatestEstimate date
MilestoneType_ID int - FK One Type to One Milestone
These all sit on an SQL server, are pulled in by an Entity and then are pulled in by an ObjectDataSource, like this:
<asp:ObjectDataSource runat="server" ID="MilestonesObjectSource" SelectMethod="GetByProject"
DeleteMethod="DeleteMilestone" TypeName="TCProjectManagement.Models.MilestonesAddition">
<SelectParameters>
<asp:Parameter DefaultValue="6" Name="ProjectID" Type="Int32" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Type="Int32" Name="Id" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Type="Int32" Name="Id" />
<asp:Parameter Type="Int32" Name="Number" />
<asp:Parameter Type="String" Name="Name" />
<asp:Parameter Type="Int32" Name="Status_Id" />
<asp:Parameter Type="DateTime" Name="PlannedDate" />
<asp:Parameter Type="DateTime" Name="LatestEstimate" />
<asp:Parameter Type="Int32" Name="MilestoneType_ID" />
</UpdateParameters>
</asp:ObjectDataSource>
Sofar so good. Data pull seems to work out okay. I've got a couple more Object Sources that deal exclusively with the Foriegn Keys, so I'll skip those since they seem to be working.
The problems I have are attempting to stitch together many examples that don't seem to go together well. My objectives, in no paticular order:
1) Pin Editing: Click a button to edit, click it again to confirm. Rather do this than have somebody infer to double click for a change. Sofar, this sorta works.
2) Drop Downs for Foriegn Keys: While not in edit mode, should display the "Name" field of the FK. While in edit it should be a Drop Down for options (there's only three). This stays blank dispite what I do.
3) Deletion: Press a button to blow away a row. I put the button there but it's a copy of the JS for editing. What do I need to use to have it be deletion?
4) Dates: This doesn't work at all. One of the weird parts is that from the SQL server's type of Date, it gets changed to DateTime in the Entity and stays that way throughout. However, I cannot get the desired control of ext:DateField to cooperate with the provided data since it displays a time and completely blanks out when editing.. I know I'm doing something wrong here.
5) Saving Changes: Not quite sure I set it up right (or at all).
Provisions of Javascript:
<script type="text/javascript">
var pinEditors = function (btn, pressed) {
var columnConfig = btn.column,
column = columnConfig.column;
if (pressed) {
column.pinOverComponent();
column.showComponent(columnConfig.record, true);
} else {
column.unpinOverComponent();
column.hideComponent(true);
}
};
var pinDeleters = function (btn, pressed) { };
</script>
And ASP Code:
<ext:GridPanel ID="MilestonesGridPanel" runat="server" Title="Milestones" Width="1000px"
Height="300px">
<Store>
<ext:Store ID="MilestonesGridStore" runat="server" DataSourceID="MilestonesObjectSource">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Number" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Status_Id" Type="Int" />
<ext:ModelField Name="PlannedDate" />
<ext:ModelField Name="LatestEstimate" />
<ext:ModelField Name="MilestoneType_ID" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="IdColumn" runat="server" DataIndex="Id" Text="DBID" Visible="false" />
<ext:ComponentColumn ID="NumberColumn" runat="server" DataIndex="Number" OverOnly="true"
Pin="true" Flex="1" Text="Number" Editor="true">
<Component>
<ext:NumberField ID="NumberColumnNumberField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="NameColumn" runat="server" DataIndex="Name" OverOnly="true"
Pin="true" Flex="1" Text="Name" Editor="true">
<Component>
<ext:TextField ID="NameColumnTextField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="StatusColumn" runat="server" DataIndex="Status_Id" OverOnly="true"
Pin="true" Flex="1" Text="Status" Editor="true">
<Component>
<ext:ComboBox ID="StatusColumnDropDownBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneStatusStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="PlannedDateColumn" runat="server" DataIndex="PlannedDate"
OverOnly="true" Pin="true" Flex="1" Text="Planned Date" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="PlannedDateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="LatestEstimateColumn" runat="server" DataIndex="LatestEstimate"
OverOnly="true" Pin="true" Flex="1" Text="Latest ETA" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="LatestEstimateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="MilestoneTypeColumn" runat="server" DataIndex="MilestoneType_ID"
OverOnly="true" Pin="true" Flex="1" Text="Milestone Type" Editor="true">
<Component>
<ext:ComboBox ID="MilestoneTypeColumnComboBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneTypesStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="EditColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Edit" Sortable="False">
<Component>
<ext:Button ID="EditButton" runat="server" ToolTip="Pin Editors" Icon="Pencil" AllowDepress="true"
EnableToggle="true" Width="25">
<Listeners>
<Toggle Fn="pinEditors" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="DeleteColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Delete" Sortable="False">
<Component>
<ext:Button ID="DeleteButton" runat="server" ToolTip="Delete Milestone" Icon="Delete"
AllowDepress="true" EnableToggle="false" Width="25">
<Listeners>
<Click Handler="#{MilestonesGridStore}.remove(this.parentMenu.dataRecord)" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<Select Handler="#{DeleteMilestoneGridButton}.enable();" />
<Deselect Handler="if (!#{MilestonesGridPanel}.selModel.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="AddtoMilestoneGridButton" runat="server" Text="Insert" Icon="Add">
<Listeners>
<Click Handler="#{MilestonesGridStore}.insert(0, {}); #{MilestonesGridPanel}.editingPlugin.startEditByPosition({row:0, column:0});" />
</Listeners>
</ext:Button>
<ext:Button ID="DeleteMilestoneGridButton" runat="server" Text="Delete" Icon="Delete"
Disabled="true">
<Listeners>
<Click Handler="#{MilestonesGridPanel}.deleteSelected();
if (!#{MilestonesGridPanel}.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:Button>
<ext:Button ID="RefreshMilestonesGridButton" runat="server" Text="RefresH" Icon="Reload">
<Listeners>
<Click Handler="#{MilestonesGridStore}.load();" />
</Listeners>
</ext:Button>
<ext:Button ID="SaveMilestoneGridButton" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{MilestonesGridStore}.sync();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>