similar to these: http://willowsystems.github.io/jSignature/#/demo/ http://www.supersignature.com/ Sure you could do something really cool like a sketchpad, with a background image.
I want to be able to let a user choose "Landlords", "Tenants", "Owners" and search for a name. The data for the search box comes from different tables.
<asp:SqlDataSource ID="SqlDataSourceTenants" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id,TenantEntityName as EntityName FROM TenantEntities"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceLandlords" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id, LandlordEntityName as EntityName FROM LandlordEntities"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSourceOwners" runat="server"
ConnectionString="<%$ ConnectionStrings:ProjectConnectionString %>"
SelectCommand="SELECT Id,OwnerEntityName As EntityName FROM OwnerEntities"></asp:SqlDataSource>
I would like to set the DatasourceId on the RadSearchBox to one of the above when the SearchContext changes. I have worked out how to get the selected searchcontext text via an Ajax Request.
function OnClientLoad(sender, args) {
var context = sender.get_searchContext();
var $ = $telerik.$;
$(context).on({
"selectedIndexChanged": function (event) {
var searchbox = $find("<%=RadSearchBox1.ClientID%>");
// this is the search context dropdown selectedIndexChanged event handler
var ajaxManager = $find("<%=RadAjaxManager1.ClientID%>");
ajaxManager.ajaxRequest(context.get_selectedItem().get_text());
}
});
}
I cannot work out how to change the datasource at runtime (I get datasource not found when I run the following code).
Protected Sub RadAjaxManager1_OnAjaxRequest(sender As Object, e As AjaxRequestEventArgs)
if not isnothing(radsearchbox1.datasource)
select Case e.Argument
Case "Tenants"
RadSearchBox1.DataSource = sqldatasourcetenants
RadSearchBox1.databind
Case "Landlords"
RadSearchBox1.DataSource = sqldatasourcelandlords
RadSearchBox1.databind
Case "Owners"
RadSearchBox1.DataSource = sqldatasourceowners
RadSearchBox1.databind
End Select
End If
End Sub
In the OnSearch Event I just need to get the type of entity (which I could get from checking the Id of the bound datasource) and the Id of the entity:
Protected Sub RadSearchBox1_OnSearch(sender As Object, e As SearchBoxEventArgs)
If e.DataItem IsNot Nothing Then
Dim dataItem = DirectCast(e.DataItem, Dictionary(Of String, Object))
Dim thisId As String = dataItem("Id").ToString()
Dim thisEntityName As String = dataItem("EntityName").ToString()
' Lookup in database and redirect to the relevant data view / edit page
End If
End Sub
Surely this is a common request and deserves consideration?
When EnableAriaSupport is enabled for the RadGrid, the PagerItem receives role='presentation' and hence is ignored by the screenreaders.
It would be great if telerik can provide remove blank data rows on column which helps when dealing with huge data.
I am able to achieve the logic with below code.
var grid = $find('<%= RadGrid_MeaInfo.ClientID %>');
// MasterTable
var masterTable =
grid.get_masterTableView();
// Items/Rows
var dataItems = masterTable.get_dataItems();
for (var i = 0; i <
dataItems.length; i++) {
var item =
masterTable.getCellByColumnUniqueName(dataItems[i], "TriggerMan")
debugger;
if (item.innerHTML ==
"" || item.innerHTML == undefined) {
masterTable.hideItem(i);
}
}
For the time being you can set the types through the kendoWidget:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function pageLoad() {
var chart = $find('<%=RadHtmlChart1.ClientID%>');
chart._chartObject.options.series[0].type = "verticalLine";
chart.repaint();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:LineSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="15000" />
<telerik:CategorySeriesItem Y="23000" />
<telerik:CategorySeriesItem Y="10000" />
</SeriesItems>
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
For the time being the function can be set through the kendoWidget:
ASPX:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<script>
function pageLoad() {
var chart = $find("<%=RadHtmlChart1.ClientID%>");
chart._chartObject.options.series[0].markers.type = function (point) {
if (point.value > 2) {
return "triangle";
}
else {
return "circle";
}
};
chart.repaint();
}
</script>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
<PlotArea>
<Series>
<telerik:LineSeries Name="Product 1">
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="1" />
<telerik:AxisItem LabelText="2" />
<telerik:AxisItem LabelText="3" />
</Items>
</XAxis>
</PlotArea>
<ChartTitle Text="Product sales for 2011">
</ChartTitle>
<Legend>
<Appearance Position="Bottom" />
</Legend>
</telerik:RadHtmlChart>
I suggest to allow developers to customize the GridColumnGroup header.
Custom column group headers should be a built-in feature of the RadGrid.
I would like to request the RadRadioButtonList's get_oldSelectedIndex method used in the OnSelectedIndexChanged event should return -1 instead of undefined when no item is selected.
Thank you!
While working on pivot grid, we observe that the filtering condition is applied. But there is no visual indicator showing that the current pivot has applied a filtering condition on a given column.
For instance, the following captured picture is obtained from the demo page. I selected Beverages in the "Category" filter and applied it to the pivot grid.
However, there is no visual clue to tell me how many filtering columns are been used at the moment.
Here is how the filtered and non-filtered fields appear in MS Excel:
Hi,
I wanted to implement RadComboBox combined with checkboxes and load on demand approach.
However, this page explained it is not possible and advised to use RadMultiSelect with Virtualization
https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support
I checked the page and demo is explained via web service...
Is there a demo where it would be explained that when I type e.g. 3 characters some function would be called (e.g. OnItemsRequested) and in the server I would call database and fill the required data ? We don't have web service for providing the data... In code-behind we always access databases.
Thanks,
Peter
There are more than 30 items (including task title) in RadGrid Task I can't see Edit Template because my display resolution is not enough to show all Tasks. I always get this problem with small resolution monitor. Can you make it collapsible? How do I go to EditTemplate? The task is not in the screen
The default focus in the dialog should provide a meaningful action if enter is pressed. The Ignore button would be one such. If you feel like another button/element should have the default focus, share your comments. You can find attached a sample that provides tabIndexes and default focus. This improvement is related to http://feedback.telerik.com/Project/108/Feedback/Details/126937
It would be convenient to be able to specify default values for SortAscImageURL and SortDescImageURL at a level above the individual column elements At present the SortAscImageURL and SortDescImageURL attributes appear in the GridBoundColumn element. This requires specifying them for each column definition. Often the UI will use the same icons for all sort-able columns. An obvious choice might be the <SortingSettings> element, as is done for the sorting tool tip and sorted background color.
The current implementation of RadHtmlChart explicitly specifies font-family and font-size settings on the server-side, which are then serialized and used by the Kendo widget, so the skin-specific settings are ignored. For example, the Material skin should define a "Roboto" font-family, but this is overriden by "Arial" in the final serialization, so the skin configuration does not have any effect. The default values of the server-side font settings can be removed in order to allow such customization and can be defined in the skins file instead.
With a lot of columns, in some cases, the latest column is clipped in a zoomed OS. For example, resolution 1920x1080 and the scale is 150% or 3840 x 2160 and the 150% scale.
Adding the following script somewhere after the ScriptManager(e.g. near the closing </form> or </body> tag) can improve the experience with zoomed scenarios:
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
<script>
if (Telerik && (Telerik.Web.Browser.chrome || Telerik.Web.Browser.edgeChromium) && Telerik.Web.UI.GridScrolling) {
Telerik.Web.UI.GridScrolling.prototype.onGridFrozenScroll = function (args) {
if (!this._frozenScrollCounter) {
this._frozenScrollCounter = 0;
}
this._frozenScrollCounter++;
this._needToUpdateClientState = false;
var gridControl = this;
gridControl._currentElement = Telerik.Web.UI.Grid.GetCurrentElement(args);
Telerik.Web.UI.Grid.frozenScrollHanlder = function (count) {
var operaVersion = 10.00;
if ($telerik.isOpera) {
operaVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Version/") + "Version".length + 1) * 1;
}
if (gridControl._frozenScrollCounter != count || gridControl._owner._isResize)
return;
if (!gridControl._lastScrollIndex) {
gridControl._lastScrollIndex = 0;
}
var masterTableView = gridControl._owner.get_masterTableView();
var masterTableViewHeader = gridControl._owner.get_masterTableViewHeader();
var currentElement = gridControl._currentElement;
if (gridControl._owner.ClientSettings.Scrolling.FrozenColumnsCount > masterTableViewHeader.get_columns().length) {
gridControl.isFrozenScroll = false;
}
var column, i;
if (gridControl.isFrozenScroll) {
var notFrozenColumns = gridControl._getNotFrozenColumns();
var scrollPercent = 0;
var notShownSpaceWidth = -1;
var currentElementWidthDiff = currentElement.scrollWidth - currentElement.offsetWidth;
if ((currentElementWidthDiff) != 0)
notShownSpaceWidth = currentElementWidthDiff;
scrollPercent = currentElement.scrollLeft / notShownSpaceWidth;
if (scrollPercent < 0)
scrollPercent = -1 * scrollPercent;
if (scrollPercent > 1)
scrollPercent = 1;
if (Telerik.Web.UI.Grid.IsRightToLeft(gridControl._owner.GridHeaderDiv) && ($telerik.isSafari || $telerik.isIE7))
scrollPercent = 1 - scrollPercent;
var gridColumns = masterTableView.get_columns();
var currentScrollPosition = currentElement.scrollLeft;
i = 0;
while (i < notFrozenColumns.length)//always show the last column
{
column = notFrozenColumns[i];
var prerviousForzenDisplayWidth = notFrozenColumns._getPreviousNotFrozenColumnWidth(column.Index);
if ((currentElementWidthDiff) < 0)
break;
var columnPercent = (column.Width + prerviousForzenDisplayWidth - 50) / notShownSpaceWidth;
if (columnPercent <= scrollPercent && currentScrollPosition != 0) {
if (column.FrozenDisplay) {
masterTableViewHeader._hideNotFrozenColumn(column.Index);
}
}
else {
if (!column.FrozenDisplay) {
masterTableViewHeader._showNotFrozenColumn(column.Index);
}
}
i++;
if (i == (notFrozenColumns.length - 1)) {
var prevWidthBeforeLastHidden = 0;
var lastHiddenColumnIndex = 0;
var k = 0;
for (var j = 0; j < gridColumns.length - 1; j++) {
if (typeof (gridColumns[j].FrozenDisplay) == 'boolean' && !gridColumns[j].FrozenDisplay) {
prevWidthBeforeLastHidden += notFrozenColumns[k].Width;
k++;
lastHiddenColumnIndex = j;
}
}
if ((prevWidthBeforeLastHidden - notShownSpaceWidth) < notFrozenColumns[notFrozenColumns.length - 1].Width + 25) {
if (scrollPercent < 0.5) {
var nextColumnToHide = notFrozenColumns[notFrozenColumns.length - 1];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
} else {
var nextColumnToHide = notFrozenColumns[k];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
}
}
}
}
gridControl._afterColumnFreeze(masterTableView, masterTableViewHeader, scrollPercent);
if (scrollPercent > 0.9999 && $telerik.isFirefox) {
masterTableViewHeader.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
masterTableView.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableView.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "";
setTimeout(
function () {
if ($telerik.isFirefox && Sys.Browser.version >= 4)
masterTableView.get_element().style.tableLayout = "fixed";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
},
100);
}
if (gridControl._owner.get_masterTableViewFooter()) {
gridControl._owner.get_masterTableViewFooter().get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "auto";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "fixed";
}
}
else {
gridControl._owner.GridDataDiv.scrollLeft = currentElement.scrollLeft;
}
/////////////////////////////////////
gridControl._frozenScrollCounter = 0;
gridControl._needToUpdateClientState = true;
//gridControl._owner.updateClientState();
setTimeout(Telerik.Web.UI.Grid._clientStateUpdater, 500);
if (gridControl._owner.get_events().getHandler("scroll")) {
gridControl._owner.raise_scroll(new Telerik.Web.UI.GridScrollEventArgs(gridControl._currentElement));
}
};
Telerik.Web.UI.Grid._clientStateUpdater = function () {
if (gridControl._needToUpdateClientState) {
gridControl._needToUpdateClientState = false;
gridControl._owner.updateClientState();
}
};
clearTimeout(window.frozenScrollTimeout);
window.frozenScrollTimeout = setTimeout("Telerik.Web.UI.Grid.frozenScrollHanlder(" + this._frozenScrollCounter + ")", 30);
}
}
</script>
</telerik:RadCodeBlock>