Parent/Child relationship between Telerik Dropdownlist and kendo-form - telerik

I've got a Telerik UI for ASP.NET Core DropDownList which displays a list retrieved via an API call. Below it I have a kendo-form, and my intention is to "bind" it to the dropdownlist, so that when a different selection is made, the form data changes to the parent's. I cannot for the life of me figure out how to manage this.
The code for the dropdown + form is:
<kendo-dropdownlist name="setlist"
datatextfield="Name"
datavaluefield="Id"
option-label="Select Sieve Set..."
height="300">
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="/Admin/ManageSieves?handler=Read" data="forgeryToken" />
</transport>
</datasource>
</kendo-dropdownlist>
<kendo-form name="setform"
layout="grid"
form-data="#Model"
method="POST"
asp-controller="ManageSieves"
asp-action="Read">
<grid cols="1" gutter="20" />
<form-items>
<form-item field="Name">
<item-label text="Name" />
</form-item>
<form-item field="TagMapping_BedPressure">
<item-label text="Bed Pressure" />
</form-item>
<form-item field="TagMapping_BedPressureValve">
<item-label text="Bed Pressure Valve" />
</form-item>
<form-item field="TagMapping_FeedFlowRate">
<item-label text="Feed flow rate" />
</form-item>
<form-item field="TagMapping_FlowToEvap">
<item-label text="Flow to Evap" />
</form-item>
</form-items>
</kendo-form>
Really simple parent-child relationship, but I'm finding the Telerik documentation to be a little opaque.
There is no real controller, since this is a Razor page that simply returns the results of CRUD operations by calling an API.
public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
{
this.DoOnPosts();
return new JsonResult(sieveSetModels.ToDataSourceResult(request));
}
What I'd like to find is a way to refer to the Read operation in the kendo-form, then pass in as an argument the Id of the selected DropDownList item - and to somehow do this in the onchange event.
I'm pretty new to JavaScript, which may be holding me back. I'd appreciate any ideas. Thanks.

Related

"input string format" error binding DetailView to Gridview clicked row

I'm reacquainting myself with Web Forms programming, using the ubiquitous Northwind database as a backing db for my project. I'm following a simple design pattern for displaying Customers, Products, etc., by displaying a databound gridview at the top of a page, then using the selected row of the gridview to display single item details in a DetailsView. This has been working perfectly well until, for some reason, I started working with a particular table (Suppliers). I am getting the following error:
The display of the Suppliers Gridview itself works perfectly until I add the DetailsView code. My Gridview-related code is as follows:
<asp:GridView ID="gvSuppliers" class="table table-bordered table-condensed table-responsive table-hover" runat="server" AutoGenerateColumns="False"
autogenerateselectbutton="True" AllowPaging="True" DataSourceID="dsSuppliersObjectSource" DataKeyNames="SupplierID" >
<columns>
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="Fax" HeaderText="Fax" SortExpression="Fax" />
<asp:BoundField DataField="HomePage" HeaderText="HomePage" SortExpression="HomePage" />
</columns>
</asp:GridView>
<asp:ObjectDataSource ID="dsSuppliersObjectSource" runat="server" EnablePaging="True" SelectMethod="GetSuppliers"
SelectCountMethod="GetSuppliersCount" TypeName="Unknown_Web_Forms.SupplierDS" MaximumRowsParameterName="maxRows"
StartRowIndexParameterName="startIndex">
</asp:ObjectDataSource>
Note I am using an object data source; the relevant code, a method named "GetSuppliers", is a simple LINQ query, which, again, is working just fine:
public List<Supplier> GetSuppliers(int startIndex, int maxRows)
{
using (NorthwindEntities entities = new NorthwindEntities())
{
return (from supplier in entities.Suppliers
select supplier)
.OrderBy(supplier => supplier.SupplierID)
.Skip(startIndex)
.Take(maxRows).ToList();
}
}
So far so good. But then I add my DetailsView and try to wire it to my Gridview's selectedValue as the data source:
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" DataSourceID="SuppliersSingleItemDataSource">
<Fields>
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SuppliersSingleItemDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>"
SelectCommand="SELECT * FROM [Suppliers] WHERE ([SupplierID] = #SupplierID)">
<SelectParameters>
<asp:ControlParameter ControlID="gvSuppliers" DefaultValue="null" Name="SupplierID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
As soon as I do this, I get the error you see in the opening of this question.
What I have tried:
Some Googling of this suggested I try limiting the columns displayed as BoundFields inside the DetailsView; that maybe there was bad data in the table. I have cut down the number of fields to a bare minimum, the SupplierID, which is an integer primary key and therefore can't be null or a non-integer value. I also kept the company name (a string).
Ensured I have an integer DataKeyName (SupplierID) specified in my gridview and it matches the datatype of the DetailViews' datasource (SupplierID, Int32).
The error message is so unhelpful and generic that I'm running out of ideas on how to solve this. Again, I am using this same technique (DetailsView picking up a Select in a Gridview) for other tables and not having this problem. I have painstakingly compared my technique on the pages that work against this one that doesn't work and cannot see a difference. It seems this should be working. Ideas, anyone?
I was able to solve this on my own. The culprit appears to be having a default value of null in the datasource for the the DetailsView. If I leave the default value out (hey,it was in the tutorial I was following!) the DetailsView won't try to display anything until it gets an actual integer from a click on the gridview. Thought I'd leave my question and answer here in case anybody else runs into this situation. Judging by Google, it is a quite common error.
<asp:SqlDataSource ID="SuppliersSingleItemDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>"
SelectCommand="SELECT * FROM [Suppliers] WHERE ([SupplierID] = #SupplierID)">
<SelectParameters>
<asp:ControlParameter ControlID="gvSuppliers" Name="SupplierID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>

Is there a way to force Show to use a Datagrid?

I am looking for a way to allow Show to be able to use a Datagrid on the show page. I want to be able to click on the show button and when the show page appears, I want to be able to take data and make another grid using Datagrid or something similar. Any Ideas how this is done?
it seems show page take 1 record and render its. on show page you can place related records with current. for example news can related with one project and one project has many news. code below get from api all related news and render its as a table. hope it helps you
export const ProjectShow = ({ ...props }) => (
<Show title={<ProjectTitle />} {...props}>
<SimpleShowLayout>
<ReferenceManyField label="News" reference="news" target="project_id">
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<DateField source="created_at" showTime />
<DateField source="updated_at" showTime />
<EditButton />
</Datagrid>
</ReferenceManyField>
</SimpleShowLayout>
</Show>
);
don't remember place in App.js line:
<Resource name="projects" ...another actions... show={ProjectShow} />

AJAX Tab Panel and Binding DataTable

I am trying to find a way to bind a data table to a tab panel (within a tabcontainer and template) without doing it on page_init or page_load. OR Binding a data table to a gridview then binding that gridview to the tab panel. I know how to bind a data table to a gridview so that's the easy part. I have to be able to - on click of a button - add or create multiple tabs in that tab container.
I want the user to be able to click a button, run some queries and then make the tab container visible and bind the data from a data table to a panel at that time (then the panel to the tab container). Do this multiple times.
Can someone provide an example or explain how I can accomplsih this? Is Update Panel my answer and where can I find some good examples?
UPDATE
I found that it was very easy to bind data to a gridview within Ajax tabs. Of course you needed you script manager ajax reference declared in the asp page and web.config file. You also need to add the ajax css style to an existing style sheet. i tried using a seperate one and it didn't work.
ASP HTML
<AjaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
Visible="false" ScrollBars="Both"
CssClass="Tab2" Width="1326px" Height="464px" >
<AjaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Empty" Enabled="true" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate>
<div style="overflow:auto;width:1287px; height: 418px;">
<font color="white" size="1" face="Verdana">
<asp:GridView ID="SalesOrderView1" runat="server" BackColor="White" BorderColor="#DEDFDE"visible="False"BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black"
GridLines="Vertical" HorizontalAlign="Center">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
</font>
</ContentTemplate>
</AjaxToolkit:TabPanel>
<AjaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Empty" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate >
</AjaxToolkit:TabContainer>
C# Code to bind data to the gridview on click button event.
SalesOrderView1.Visible = true;
TabPanel1.Visible = true;
TabPanel1.HeaderText = Order_List[multi_order_count];

custom errortext on row delete jqGrid

When deleting a row in jqgrid, I would like to return a custom error text when server returns 500 error. I am using jqGrid for ASP.NET, and the grid does not seem to have an "loadError" event
Has anyone done this?
jqGrid is defined like this
<trirand:JQGrid runat="server" ID="Jqgrid" ShrinkToFit="true" Width="900px" Height="500" PagerSettings-PageSize="20" PagerSettings-PageSizeOptions="[20,50,100]" OnSearching="JQGrid_Searching" OnSorting="JQGrid_Sorting" OnRowEditing="JQGrid_RowEditing" OnRowDeleting="JQGrid_RowDeleting">
<Columns>
<trirand:JQGridColumn DataField="ID" PrimaryKey="True" Width="40" Visible="False" />
<trirand:JQGridColumn DataField="NAME" SearchType="DropDown" Width="55" SearchControlID="ddlNameFilter"
HeaderText="Name" Editable="true">
<EditClientSideValidators>
<trirand:RequiredValidator />
</EditClientSideValidators>
</trirand:JQGridColumn>
<trirand:JQGridColumn DataField="DESCR" SearchType="DropDown" Width="55" SearchControlID="ddlDescrFilter"
Searchable="True" HeaderText="Descr" Editable="true">
<EditClientSideValidators>
<trirand:RequiredValidator />
</EditClientSideValidators>
</trirand:JQGridColumn>
<trirand:JQGridColumn HeaderText=" " EditActionIconsColumn="true" Width="50" EditActionIconsEditEnabled="false"
CssClass="clickable" />
</Columns>
<ClientSideEvents LoadComplete="loadComplete" ColumnSort="columnSort" RowDoubleClick="editRow">
</ClientSideEvents>
<ToolBarSettings ShowSearchToolBar="True" ToolBarPosition="TopAndBottom">
</ToolBarSettings>
<PagerSettings NoRowsMessage="No rows to display" />
<ExportSettings ExportDataRange="All" />
</trirand:JQGrid>
The callback loadError are used to process errors during filling/loading of the grid. Form editing methods like delGridRow supports errorTextFormat callback. So is you use navGrid you should define errorTextFormat callback as the method of prmDel parameter of navGrid.
Additionally I would recommend you to use [HandleJsonException] instead of [HandleError] in case of usage ASP.NET MVC (see the answer for details). In other ASP.NET applications you can define the error handler Application_Error in Global.asax.cs (see the answer). The usage of such handles will simplify you the analyse of the error server response inside of errorTextFormat callback because the error information will be returned as JSON.

how to validate textinput within itemrenderer?

I have textinput within list itemrenderer like
main.mxml
<s:List
id="videoAttachmentsList"
itemRenderer.normalView="com.engage.discussion.attachment.renderers.VideoAttachmentRenderer"
>
<mx:button label="add" click=addevent(Event) />
VideoAttachmentRenderer.as
<TextInput styleName="commonTextInput"
prompt="Enter a video header"
id="headerText"
x="75" width="185" height="21"
bottom="5"
fontSize="10"
maxChars="30"/>
<fx:Declarations>
<mx:StringValidator source="{headerText}" property="text" required="true" maxLength="30" requiredFieldError="Please enter video header"/>
</fx:Declarations>
My doubts is when i click add button on (main.mxml) that time need validate headerText(Textinput)(VideoAttachmentRenderer.as) . is it possible to validate string withing itemRenderer. could u give any guidance ?
override the set data method and trigger the validation in there

Resources