I am using a RadGrid to DataBind to an OData source. Fiddler shows that when the page is loaded a call is made to my OData source and data is returned in JSON format. The RadGrid creates the headers for each column but no data is ever displayed. My code looks exactly like what I find on the web, but nothing seems to work for me. Does anyone have any ideas with what I am doing wrong?
Here is my markup for the RadGrid:
<telerik:RadGrid ID="RadGrid1" runat="server">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" />
<telerik:GridBoundColumn DataField="BuildingId" HeaderText="Building" />
<telerik:GridBoundColumn DataField="Name" HeaderText="Title" />
<telerik:GridBoundColumn DataField="Capacity" HeaderText="Capacity" />
<telerik:GridBoundColumn DataField="IsActive" HeaderText="Active" />
</Columns>
</MasterTableView>
<ClientSettings>
<DataBinding Location="http://localhost:49937/" ResponseType="JSON">
<DataService TableName="Locations" Type="OData" />
</DataBinding>
</ClientSettings>
</telerik:RadGrid>
And this is a screenshot (via Fiddler) of the data the is being returned:
Thanks for the help.
My guess is that you need to change the ResponseType from JSON to JSONP. The reason is that JSON, or any other http request initiated from javascript is restricted by the same origin policy. But RadGrid allows you to use JSONP to make remote calls to services that support the JSONP data response format.
You can refer to this article for more details
http://www.telerik.com/blogs/radgrid-for-asp-net-ajax-client-side-databinding-to-odata-services
Related
I'm facing a problem with Rad Gird inside Rad Ajax Panel
First in kept my RadGrid inside asp:panel here is works fine
<asp:Panel ID="Panel1" runat="server">
When i replace asp:panel with RadAjaxpanel edit and add buttons are not working
Here is my code
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="div" runat="server" EnableAJAX="true" >
<telerik:RadGrid ID="rdgOpData" runat="server" CssClass="value"
AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="false"
OnNeedDataSource="rdgOpData_NeedDataSource"
OnItemDataBound="rdgOpData_ItemDataBound"
OnInsertCommand="rdgOpData_InsertCommand"
OnUpdateCommand="rdgOpData_UpdateCommand">
<MasterTableView CommandItemDisplay="Top"
AutoGenerateColumns="false" DataKeyNames="LNK_ORIGINATEDBY_CN%%TXT_NAMELAST"
CommandItemSettings-AddNewRecordText="Add Opp" EditMode="EditForms"
InsertItemPageIndexAction="ShowItemOnCurrentPage">
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn" InsertText="Add" CancelText="Cancel" UpdateText="Update" ButtonType="PushButton">
</EditColumn>
</EditFormSettings>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="~/Images/Edit.gif">
</telerik:GridEditCommandColumn>
No firing even itemdatabound on edit button click .
Help me through this issue
Sometimes it may happen, for best results use RadAjaxManager.
Add the RadAjaxManager in page, then click on open Configuration, the configuration is easy.
Imagine the (One to One) case. Click on any of the control (cause) and map the another control (effect). Just checkbox clicks.. Go ahead here's the documentation.
Read about RadAjaxManger here
I have implemented server side jqgrid with the following code
<trirand:JQGrid ID="jQGrid1" runat="server" OnDataRequesting="jQGrid1_DataRequesting" Height="220" LoadOnce="false" OnRowSelecting="jQGrid1_RowSelecting">
<AppearanceSettings ShowRowNumbers="true" />
<Columns>
<trirand:JQGridColumn DataField="AppId" HeaderText="Application ID" PrimaryKey="True" Width="100" />
<trirand:JQGridColumn DataField="Name" HeaderText="Application Name" Width="200"/>
<trirand:JQGridColumn DataField="Link" Width="280" />
</Columns>
<PagerSettings ScrollBarPaging="true" PageSize="20" NoRowsMessage="scroll down to fetch records" CurrentPage="1"/>
</trirand:JQGrid>
But for the onRowSelected Event when i check in my c# code i was getting selected index as some random values like jqg11,jqg25,....
why is it happening .What should i do to make one of my column to set as key when selected
I have checked below options
jQGrid1.SelectedRow
e.RowKey
I don't use commercial version of jqGrid, thus the code which you posted say me almost nothing. Nevertheless the reason of ids like jqg11 and jqg25 are typically errors in filling of the grid. jqGrid requires to assign id attribute to every row. So the server response should contains the id values. The exact information depends on the format of input data which you chosen, from the version of jqGrid which you use and from other options like id property of jsonReader or the existence of key: true property in one column of colModel. I recommend you to verify the JSON/XML data which you use to fill the grid. Probably you ddidn't specified correctly the id values.
I couldn't figure how to get the combo box looks like the payment method combo box from this link https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx#qsf-demo-source
The source they provide doesn't seems to have any different from each other, but I need that filled combobox design from the 4th one. Just doesn't know how to get it.
If you press the View Source, then goto 'PaymentMethods.xml' you will see the method used for assigning (Xml taken directly from this Telerik Demo)
<Items>
<Item Text="American Express" Value="1" ImageUrl="Images/card-types/american-express.png" />
<Item Text="MasterCard" Value="2" ImageUrl="Images/card-types/mastercard.png" />
<Item Text="Visa" Value="3" ImageUrl="Images/card-types/visa.png" />
<Item Text="Visa Electron" Value="4" ImageUrl="Images/card-types/visa-electron.png" />
</Items>
There are other methods for adding images using the ImageUrl attribute (See this Telerik Demo)
Alternatively you might want to use the ItemTemplate should you want further control (See this Telerik Demo) This also allows you to put further details in the drop down list which is particularly useful when you want to display a little more information.
<ItemTemplate>
<asp:Label ID="lblOptionTitle" runat="server" Text='<%# Eval('ItemTitle') %>' Font-Bold="true" />
<asp:Label ID="lblOptionText" runat="server" Text='<%# Eval('ItemText') %>' />
<img id="imgOption" alt="Alternative Text" src='<%# Eval('ImageUrl') %>' />
</ItemTemplate>
I am building a User Control (requirement – has to be User Control).
This user control is inside an AJAX Update Panel on the parent page.
The user control has two Infragistics Web Date Chooser controls on it.
Both dates are required.
I have placed asp.net RequiredFieldValicators on both controls.
I have placed ValidatorCalloutExtenders on both.
One control gets validated every time without fail. The other is intermittent. To debug I first removed the ValidatorCalloutExtender from the failing control and sure enough the RequiredFieldValidator fires correctly every time so it appears that the problem is with the ValidatorCalloutExtender. There are not a lot of options for the ValidatorCalloutExtender but I did play with them every way feasible and nothing seems to make any difference. The TargetControlID has to point to the validation control you are extending. Any help appreciated.
Here is the code that works correctly every time:
<igsch:WebDateChooser ID="wdcEndDatePop" runat="server" EnableAppStyling="True"
NullDateLabel="" StyleSetName="eWERKS3" StyleSetPath="~/App_Themes/"
Width="200px" MinDate="2009-01-01" />
<asp:RequiredFieldValidator ID="rfvEndDate" runat="server"
ControlToValidate="wdcEndDatePop" Display="None"
ErrorMessage="End date required." ValidationGroup="endDatePop" />
<cc1:ValidatorCalloutExtender
ID="vceEndDatePop"
runat="server"
CloseImageUrl="~/images/close.gif"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="rfvEndDate"
WarningIconImageUrl="~/images/back_warning2.gif" />
And here is the code that works intermitemtly:
<igsch:WebDateChooser ID="wdcStartDate" runat="server" EnableAppStyling="True"
NullDateLabel="" StyleSetName="eWERKS3" StyleSetPath="~/App_Themes/"
MinDate="2009-01-01" />
<asp:RequiredFieldValidator ID="rfvStartDate" runat="server"
ControlToValidate="wdcStartDate" Display="None"
ErrorMessage="Start date required." ValidationGroup="access" />
<cc1:ValidatorCalloutExtender
ID="vceStartDate"
runat="server"
CloseImageUrl="~/images/close.gif"
HighlightCssClass="validatorCalloutHighlight"
TargetControlID="rfvStartDate"
WarningIconImageUrl="~/images/back_warning2.gif" />
In their documentation Telerik says that there is a way to disable sorting for specific column by using AllowSorting property. I'm looking at Telerik.Web.UI.GridColumn members and there is no AllowSorting property. There is a Sortable property but its protected and has to be overriden. So what do I use to turn off sorting for specific column?
There is a AllowSorting property on GridBoundColumn but in this case I'm using GridTemplateColumn. Is there a way to turn off sorting on GridTemplateColumn?
The AllowSorting attribute is available from the source/markup view in Visual Studio. For example (simplified):
<tr:RadGrid>
<MasterTableView>
<Columns>
<tr:GridBoundColumn DataField="field" HeaderText="Description"
AllowSorting="false" />
</Columns>
</MasterTableView>
</tr:RadGrid>
I don't know if this works for you? I haven't instantiated my grids from the code-behind files yet, so if that's what you are doing, I can't easily help you. But the above works for me.
EDIT:
Ah it was not clear from the original question, that you were using the GridTemplate column. As you are now using the SortExpression-property, doesn't using the same attribute in the markup work for you? So:
<tr:RadGrid>
<MasterTableView>
<Columns>
<tr:GridTemplateColumn HeaderText="Description" DataField="field"
SortExpression="">
<!-- template here etc. -->
</tr:GridTemplateColumn>
</Columns>
</MasterTableView>
</tr:RadGrid>
Okay, I got the desired effect, I turned off sorting by setting GridTemplateColumn's SortingExpression property to blank.
Grid.Columns.FindByUniqueName("Type").SortExpression = string.Empty;
This looks like a hack. Why isn't there an explicit property to turn off sorting? Oh well. This works.
If you know a better way, let me know.
Thanks.
Telerik now has a new property called HeaderButtonType (exists on a template column too!) which can be set to "None" to render a label instead of a linkbutton for the column header text.
As stated in the Telerik Docs:
In case you want to disable sorting for a particular column only, you can configure column's IsSortable property to False:
<telerik:GridViewColumn IsSortable="False" />
Here's an example showing how to disable sorting for a specific column.
Note the AllowSorting property at the Grid level (for all columns).
Then, in the Columns collection, note how it is turned off for that specific column.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True">
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn AllowSorting="False" UniqueName="column">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>
For TemplateColumns, I would try turning off Sorting at the grid level and simply enable it on the columns needed. That way, you won't have to do anything for the TemplateColumn since it will be disabled by default.
You could always supply your own headertemplate with a label as the header instead of a link button if you are using a GridTemplateColumn. A we bit extra work but this works fine. If you are going to disable sorting for all your GridTemplateColumns then your "hack" would be best.