telerik kendoreact の実行環境を作成して見た
npm audit後、npm startで実行すると色々とエラー発生
webpack と react-scriptsのバージョンが古いのが原因だった
ライブラリのバージョンって難しい
2025年4月25日金曜日
2023年2月15日水曜日
telerik Documents Excelのcellから値を取得する方法
Workbook workbook = new Workbook();
Worksheet worksheet = workbook.Worksheets.Add();
worksheet.Cells[0, 0].SetValue("=SUM(A2, 3)");
worksheet.Cells[1, 0].SetValue(10);
ICellValue cellValue = worksheet.Cells[0, 0].GetValue().Value;
CellValueFormat format = worksheet.Cells[0, 0].GetFormat().Value;
string valueAsString = cellValue.GetValueAsString(format); // =SUM(A2, 3)
string resultValue = cellValue.GetResultValueAsString(format); // 13 cellのformatごとに値を取得出来る 2021年8月5日木曜日
TelerikのDocumentコンポーネントを使って Excelファイルを操作する。
TelerikのDocumentコンポーネントを使って Excelファイルを操作する。
Telerik.Windows.Documents.Spreadsheet.Model.Workbook workbook;
var formatProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();
using (Stream input = new FileStream(iTemplate, FileMode.Open)) {
workbook = formatProvider.Import(input);
}
var worksheet = workbook.Worksheets[0];
こんな感じで操作可能
2020年6月5日金曜日
telerik kendo ui timepicker のボタンを日本語化
htmlに以下のscriptを追加
$(document).ready(function () {
$('.k-time-accept').text('申請');
$('.k-time-cancel').text('キャンセル');
});
$('.k-time-accept').text('申請');
$('.k-time-cancel').text('キャンセル');
});
2020年5月1日金曜日
telerik asp.net mvc コンポーネントに Forがあった。
telerik asp.net mvc コンポーネントに Forがあった。
今まで DatePickerとかを @(Html.Kendo().DatePicker で記述していたが
データ渡しをしたい時、formCollectionから取得していた。
telerikのDocumentを参照したら @(Html.Kendo().DatePickerFor
があるじゃないですか！
Documentを読まない自分を責めたい ......Orz
今まで DatePickerとかを @(Html.Kendo().DatePicker で記述していたが
データ渡しをしたい時、formCollectionから取得していた。
telerikのDocumentを参照したら @(Html.Kendo().DatePickerFor
があるじゃないですか！
Documentを読まない自分を責めたい ......Orz
2019年10月4日金曜日
telerik asp.net grid 訪問済リンクの色指定 a:visited
telerik asp.net webformのgridにてhyperlinkの訪問済の色が変わらないので
cssで指定することで色が変更出来た。
cssの指定がちょっと特殊なので、記述しておく。
<html>
<head>
<title>Customize hyperlinks in Telerik RadGrid</title>
<style>
.RadGrid a
{
color: brown;
}
.RadGrid a:hover,
.RadGrid a:visited
{
color: orange;
font-size: 15px;
}
</style>
</head>
<body>
<form id="Form2" method="post" runat="server">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" CssClass="RadGrid" runat="server" AutoGenerateColumns="False"
Skin="">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn UniqueName="ContactName" HeaderText="Contact Name" DataField="ContactName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Address" HeaderText="Address" DataField="Address">
</telerik:GridBoundColumn>
<telerik:GridHyperLinkColumn NavigateUrl="http://www.sharepointcontrols.com" UniqueName="HyperLinkColumn"
HeaderText="Button Column" Text="link button">
</telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<a href="http://www.sharepointcontrols.com">go to our mcmscontrols site</a>
</form>
</body>
</html>
cssで指定することで色が変更出来た。
cssの指定がちょっと特殊なので、記述しておく。
<html>
<head>
<title>Customize hyperlinks in Telerik RadGrid</title>
<style>
.RadGrid a
{
color: brown;
}
.RadGrid a:hover,
.RadGrid a:visited
{
color: orange;
font-size: 15px;
}
</style>
</head>
<body>
<form id="Form2" method="post" runat="server">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" CssClass="RadGrid" runat="server" AutoGenerateColumns="False"
Skin="">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn UniqueName="ContactName" HeaderText="Contact Name" DataField="ContactName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Address" HeaderText="Address" DataField="Address">
</telerik:GridBoundColumn>
<telerik:GridHyperLinkColumn NavigateUrl="http://www.sharepointcontrols.com" UniqueName="HyperLinkColumn"
HeaderText="Button Column" Text="link button">
</telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<a href="http://www.sharepointcontrols.com">go to our mcmscontrols site</a>
</form>
</body>
</html>
2019年1月25日金曜日
Telerik ASP.NET MVC DatePickerのValueに値をセットする方法
Telerik ASP.NET MVC DatePickerのValueに値をセットする方法
public class BindingClass
{
public DateTime? BeginDate { get; set; }
}@model BindingClass
@(Html.Telerik().DatePicker()
.Name("Test")
.Value(Model.BeginDate)
) 元ネタhttps://stackoverflow.com/questions/8201704/telerik-mvc-datepicker-set-to-null-or-empty-asp-c-sharp 2019年1月21日月曜日
telerik ASP.NET MVC GridのRead ActionにrouteValueを設定する
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Apply_Read", "APP", new { iSelect = ViewBag.SelectSearch }))
.Model(model => model.Id(p => p.ID))
)
read.Action("アクション名","コントローラー名", new { パラメータ名 = 値})
※パラメータ名をidにするとうまく動かなかった。
.Ajax()
.PageSize(20)
.Read(read => read.Action("Apply_Read", "APP", new { iSelect = ViewBag.SelectSearch }))
.Model(model => model.Id(p => p.ID))
)
read.Action("アクション名","コントローラー名", new { パラメータ名 = 値})
※パラメータ名をidにするとうまく動かなかった。
2018年12月14日金曜日
Telerik ASP.NET MVC Schedulerの日付設定
Kendo().Schedulerで当日日付の指定
@(Html.Kendo().Scheduler<AskaGroup.Models.EventViewModel>()
.Name("scheduler")
.Date(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day))
.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 9, 00, 00))
.Height(600)
.Views(views => {
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m => {
m.Id(f => f.EventID);
m.Field(f => f.OwnerID).DefaultValue('1');
//Set the recurrence ID field from the model:
m.RecurrenceId(f => f.RecurrenceID);
})
.Read("Event_Read", "SDL")
.Create("Event_Create", "SDL")
.Destroy("Event_Destroy", "SDL")
.Update("Event_Update", "SDL")
)
)
@(Html.Kendo().Scheduler<AskaGroup.Models.EventViewModel>()
.Name("scheduler")
.Date(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day))
.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 9, 00, 00))
.Height(600)
.Views(views => {
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m => {
m.Id(f => f.EventID);
m.Field(f => f.OwnerID).DefaultValue('1');
//Set the recurrence ID field from the model:
m.RecurrenceId(f => f.RecurrenceID);
})
.Read("Event_Read", "SDL")
.Create("Event_Create", "SDL")
.Destroy("Event_Destroy", "SDL")
.Update("Event_Update", "SDL")
)
)
2018年2月22日木曜日
telerik ListBoxの選択行の取得方法
function hogehoge() {
var selectedUser = $('#selected').data('kendoListBox');
var items = selectedUser.items();
//alert(items.length);
if (items.length == 0) {
alert("No Data");
return false;
}
}
var selectedUser = $('#selected').data('kendoListBox');
var items = selectedUser.items();
//alert(items.length);
if (items.length == 0) {
alert("No Data");
return false;
}
}
2018年1月18日木曜日
Telerik MVC grid 項目にリンクを追加
Telerik MVC Grid項目にリンクを追加
リンクする項目を以下のように編集
col.Template(@＜text＞
@Html.ActionLink(@item.BrunchCode.ToString(), "Brunch", "Statistics", new { brunchid = @item.BrunchCode }) ＜/text＞) .ClientTemplate("＜a href='/brunch/statistics/brunchid=#= BrunchCode#'＞#=BrunchCode#＜/a＞") .Title("Test"); 上記のコードは ＜＞ が全角になっています。
元ネタ
https://www.telerik.com/forums/kendo-mvc-grid-actionlink-column
Telerik MVC Kendo Gridをdropdownの条件で表示を変更する
Telerik MVC Kendo Gridをdropdownの条件で表示を変更する
header部分にdrondownlistを配置する。
明細部分にgirdを配置する。
gridのdatasourceを以下の通りに配置
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Apply_Read", "APP", new { iSelect = ViewBag.SelectSearch }))
.Model(model => model.Id(p => p.申請No))
)
ミソは、read.Action(アクション名, コントロール名, new {渡したいパラメータ})
これをコントロール側で受ける
public ActionResult Apply_Read([DataSourceRequest] DataSourceRequest request, string iSelect) {
return Json(Get申請一覧(iSelect).ToDataSourceResult(request));
}
private List<ApprovalViewModel> Get申請一覧(string iSelect) {
ココでレコードの取得
}
iSelectはViewBagで渡しているので、view側で
@(Html.Kendo().DropDownList()
.Name("Search")
.Events(ev => ev.Change("onSelect"))
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "下書き／差戻し",
Value = "0"
},
new SelectListItem() {
Text = "申請済／承認中",
Value = "1"
},
new SelectListItem() {
Text = "承認済",
Value = "2"
},
new SelectListItem() {
Text = "すべて",
Value = "9"
}
})
.HtmlAttributes(new { style = "width: 150px;" })
.Value(ViewBag.SelectSearch)
)
header部分にdrondownlistを配置する。
明細部分にgirdを配置する。
gridのdatasourceを以下の通りに配置
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Apply_Read", "APP", new { iSelect = ViewBag.SelectSearch }))
.Model(model => model.Id(p => p.申請No))
)
ミソは、read.Action(アクション名, コントロール名, new {渡したいパラメータ})
これをコントロール側で受ける
public ActionResult Apply_Read([DataSourceRequest] DataSourceRequest request, string iSelect) {
return Json(Get申請一覧(iSelect).ToDataSourceResult(request));
}
private List<ApprovalViewModel> Get申請一覧(string iSelect) {
ココでレコードの取得
}
iSelectはViewBagで渡しているので、view側で
@(Html.Kendo().DropDownList()
.Name("Search")
.Events(ev => ev.Change("onSelect"))
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "下書き／差戻し",
Value = "0"
},
new SelectListItem() {
Text = "申請済／承認中",
Value = "1"
},
new SelectListItem() {
Text = "承認済",
Value = "2"
},
new SelectListItem() {
Text = "すべて",
Value = "9"
}
})
.HtmlAttributes(new { style = "width: 150px;" })
.Value(ViewBag.SelectSearch)
)
javascriptでeventを記述
//検索条件の処理
function onSelect(arg) { //検索が変更された場合、再表示を行う
var dataItem = this.dataItem(arg.item);
//alert("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
var url = $("#BaseUrl").val() + dataItem.Value;
//alert("url= " + url);
location.href = url;
}
コントロール側でdropdownlistの値がurlのidとして受け取ったら
ViewBagにセットすれば、gridの表示側は制御できた。
get側
public ActionResult APPIndex(string id) {
ViewBag.SectionName = Session["SectionName"].ToString();
ViewBag.UserName = Session["UserName"].ToString();
if (id == null) {
ViewBag.SelectSearch = "0";
}
else {
ViewBag.SelectSearch = id;
}
return View();
}
2018年1月15日月曜日
telerik MVC Gridのページング方法は、戻り値を
ToDataSourceResult(request) でラップすることで実装する。
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
//申請一覧取得
public ActionResult Approval_Read([DataSourceRequest] DataSourceRequest request) {
return Json(Get申請一覧().ToDataSourceResult(request));
}
private IEnumerable<ApprovalViewModel> Get申請一覧() {
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["db"].ToString())) {
string sql = "select * from v申請H where 申請タイプ in (1, 2, 3, 4) and 申請者社員ID = @申請者社員ID order by ID desc";
conn.Open();
var recs = conn.Query<v申請H>(sql,
new {
申請者社員ID = Session["UserID"].ToString()
});
List<ApprovalViewModel> 申請ViewModels = new List<ApprovalViewModel>();
foreach (var rec in recs) {
ApprovalViewModel 申請ViewModel = new ApprovalViewModel() {
申請者社員姓 = rec.申請者社員姓,
状態 = rec.申請状態名,
申請書名 = rec.申請タイプ名称,
申請No = rec.ID,
決済No = rec.決済No,
件名 = rec.件名,
発注先 = rec.発注先名,
金額 = rec.金額
};
申請ViewModels.Add(申請ViewModel);
}
return 申請ViewModels;
}
}
ToDataSourceResult(request) でラップすることで実装する。
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
//申請一覧取得
public ActionResult Approval_Read([DataSourceRequest] DataSourceRequest request) {
return Json(Get申請一覧().ToDataSourceResult(request));
}
private IEnumerable<ApprovalViewModel> Get申請一覧() {
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["db"].ToString())) {
string sql = "select * from v申請H where 申請タイプ in (1, 2, 3, 4) and 申請者社員ID = @申請者社員ID order by ID desc";
conn.Open();
var recs = conn.Query<v申請H>(sql,
new {
申請者社員ID = Session["UserID"].ToString()
});
List<ApprovalViewModel> 申請ViewModels = new List<ApprovalViewModel>();
foreach (var rec in recs) {
ApprovalViewModel 申請ViewModel = new ApprovalViewModel() {
申請者社員姓 = rec.申請者社員姓,
状態 = rec.申請状態名,
申請書名 = rec.申請タイプ名称,
申請No = rec.ID,
決済No = rec.決済No,
件名 = rec.件名,
発注先 = rec.発注先名,
金額 = rec.金額
};
申請ViewModels.Add(申請ViewModel);
}
return 申請ViewModels;
}
}
2018年1月10日水曜日
Telerik MVC upload Select filesの文字を変更
@(Html.Kendo().Upload()
.Name("files")
.Messages(m => m.Select("添付ファイル追加...."))
)
.Name("files")
.Messages(m => m.Select("添付ファイル追加...."))
)
元ネタ
2018年1月4日木曜日
Telerik MVC DropDownListのEventsに @Url.Content("~/SDL/Week/!") を含むと上手く動作しない
Telerik MVC DropDownListのEventsに @Url.Content("~/SDL/Week/!")
を含むと上手く動作しない
.Events(e => e.Change("onChange"))
<Script>
function onChange(e) {
var dataItem = this.dataItem(e.item);
//alert("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
var url = $("#BaseUrl").val() + dataItem.Value;
//alert("url= " + url);
を含むと上手く動作しない
.Events(e => e.Change("onChange"))
<Script>
function onChange(e) {
var dataItem = this.dataItem(e.item);
//alert("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
var url = $("#BaseUrl").val() + dataItem.Value;
//alert("url= " + url);
location.href = url;
}
</script>
<input type="hidden" id="BaseUrl" Value=@Url.Content("~/")>
JavaScript内に @Url.Contentが有るとNGになったので
hidden項目から値を取得するように変更した。
2017年12月26日火曜日
Telerik ListBoxにデータを流し込む方法 ASP.NET MVC5の場合
Telerik ListBoxにデータを流し込む方法 ASP.NET MVC5の場合
Day.cshtml
@(Html.Kendo().ListBox()
.Name("optional")
.Toolbar(toolbar => {
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.TransferTo()
.TransferFrom()
.TransferAllTo()
.TransferAllFrom()
.Remove()
);
})
.ConnectWith("selected")
)
@(Html.Kendo().ListBox()
.Name("selected")
.Selectable(ListBoxSelectable.Multiple)
.BindTo(ViewBag.SelectUsers)
)
DayController.cs
//
List<SelectListItem> selectusers = new List<SelectListItem>();
var item = new SelectListItem();
item.Text = "担当者";
item.Value = "0101";
selectusers.Add(item);
ViewBag.SelectUsers = selectusers;
Day.cshtml
@(Html.Kendo().ListBox()
.Name("optional")
.Toolbar(toolbar => {
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.TransferTo()
.TransferFrom()
.TransferAllTo()
.TransferAllFrom()
.Remove()
);
})
.ConnectWith("selected")
)
@(Html.Kendo().ListBox()
.Name("selected")
.Selectable(ListBoxSelectable.Multiple)
.BindTo(ViewBag.SelectUsers)
)
DayController.cs
//
List<SelectListItem> selectusers = new List<SelectListItem>();
var item = new SelectListItem();
item.Text = "担当者";
item.Value = "0101";
selectusers.Add(item);
ViewBag.SelectUsers = selectusers;
2016年9月30日金曜日
telerik WPFで日本語を使う方法
telerik WPFで日本語を使う方法
http://docs.telerik.com/devtools/wpf/common-localization
日本語のリソースは無いけど、追加で対応出来る。
http://docs.telerik.com/devtools/wpf/common-localization
日本語のリソースは無いけど、追加で対応出来る。
2016年8月9日火曜日
Telerik WPF Gridview control filter で全角、半角を区別したくない
Telerik WPF Gridview control filter で全角、半角を区別したくない。
英語圏では、アクセントの区別と同じようです。
MS-SQL Serverで、Database Optionを CI_AIに変更したのですが
Telerikのfilterで、CI_ASに変わっているようで、"あ", ”ア"が、同一にならない。
解決方法は、telerikのblogに載っていたんだけど、オイラの脳ミソでは、キャパ不足
誰か、代わりにサンプル ソースを書いて～
英語圏では、アクセントの区別と同じようです。
MS-SQL Serverで、Database Optionを CI_AIに変更したのですが
Telerikのfilterで、CI_ASに変わっているようで、"あ", ”ア"が、同一にならない。
解決方法は、telerikのblogに載っていたんだけど、オイラの脳ミソでは、キャパ不足
誰か、代わりにサンプル ソースを書いて～
2016年4月14日木曜日
Telerik WPF RadGridViewのFilter DIstince の非表示
Telerik WPF RadGridViewのFilter DIstince の非表示
private void GridView1_FilterOperatorsLoading(object sender, Telerik.Windows.Controls.GridView.FilterOperatorsLoadingEventArgs e) {
//選択条件を削除
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNull);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNotNull);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsEmpty);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNotEmpty);
//カラム内容の選択を非表示
e.Column.ShowDistinctFilters = false;
}
private void GridView1_FilterOperatorsLoading(object sender, Telerik.Windows.Controls.GridView.FilterOperatorsLoadingEventArgs e) {
//選択条件を削除
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNull);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNotNull);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsEmpty);
e.AvailableOperators.Remove(Telerik.Windows.Data.FilterOperator.IsNotEmpty);
//カラム内容の選択を非表示
e.Column.ShowDistinctFilters = false;
}
登録:
投稿 (Atom)