I have a webdatagrid that lists employees in our company. I click on a row and display data retrieved from our database such as name, employee number, etc. in controls that are on a webtab inside an updatepanel. Everything works fine with the first 2 records selected from the grid. But always on the 3rd selection I get an "Invalid JSON primitive" error. If I take away the updatepanel, everything works fine. I want to use the updatepanel so the page doesn't repaint everytime I select a new record from the grid.
I use a sqldatasource to populate the grid and a linq query to retrieve data based on the selection.
I have tried with the grid inside and outside the updatepanel. The WebTab control is inside the updatepanel.
I am using VS2010 and v11.1 of the Infragistics controls.
Any ideas why this might br happening?
Hello itdepartmentsts ,
I tried to reproduce this behavior based on your explanation but was unable to. Would it be possible to send the sample in which you encounter this issue or some code snippets so that I can better understand your scenario?
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
Thanks for your reply Maya. Below is the code. I select a record from WebDataGrid1 and then display the data in the controls on the WebTab, 3 textboxes and a WebDataGrid. I currently have all controls within an Updatepanel. I did discover through some testing on Friday that if I remove the WebDataGrid from the WebTab, I do not get the "Invalid JSON primitive" error.
I am in the process of converting the classic controls, i.e., UltraWebGrid, UltraWebTab, etc, to WebDataGrid, WebTab, etc to insure I can achieve the same functionality with the newer controls as with the classic controls.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ig:WebTab ID="WebTab1" runat="server" BackColor="White" BorderColor="Black" EnableViewState="False"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="Medium" Height="400px" Width="900px" SelectedIndex="3">
<tabs>
<ig:ContentTabItem runat="server" Text="Employee Info" Key="Employee Info">
<Template>
<asp:Label ID="Label1" runat="server" Text="Employee ID" Font-Names="Verdana" Font-Size="Small"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Name Last" Font-Names="Verdana" Font-Size="Small"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:Label ID="Label3" runat="server" Text="First" Font-Names="Verdana" Font-Size="Small"></asp:Label>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Emergency Contact" Key="Emergency Contact">
<ig:ContentTabItem runat="server" Text="Education/Certifications" Key="Education/Certifications">
<ig:ContentTabItem runat="server" Text="Contracts" Key="Contracts">
<ig:WebDataGrid ID="WebDataGrid3" runat="server" AutoGenerateColumns="False"DataSourceID="SqlDataSource3" Height="350px" Width="800px" DataKeyFields="ContractSeq" EnableViewState="False">
<Columns>
<ig:BoundDataField DataFieldName="ContractSeq" Key="ContractSeq" Hidden="True" DataType="System.Int32">
<Header Text="ContractSeq" />
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="ContractID" Key="ContractID" Width="150px" DataType="System.String">
<Header Text="Contract ID" />
<ig:BoundDataField DataFieldName="Title" Key="Title" Width="200px" DataType="System.String">
<Header Text="Title" />
<ig:BoundDataField DataFieldName="ProjectNr" Key="ProjectNr" Width="150px" DataType="System.String">
<Header Text="Project Nr" />
<ig:BoundDataField DataFieldName="Clin" Key="Clin" Width="100px" DataType="System.String">
<Header Text="Clin" />
<ig:BoundDataField DataFieldName="EmployeeSeq" Key="EmployeeSeq" Width="100px" Hidden="true" DataType="System.Int32" >
<Header Text="EmployeeSeq" />
<ig:BoundDataField DataFieldName="SubClin" Key="SubClin" Width="120px" DataType="System.String">
<Header Text="Sub Clin" />
</Columns>
<Behaviors>
<ig:EditingCore AutoCRUD="True">
<ig:CellEditing >
<CellEditingClientEvents EnteredEditMode="loadDropDownItems" />
<ColumnSettings>
<ig:EditingColumnSetting ColumnKey="ContractID" EditorID="DropDownProvider1"/>
<ig:EditingColumnSetting ColumnKey="ProjectNr" EditorID="DropDownProvider2" />
<ig:EditingColumnSetting ColumnKey="Clin" EditorID="DropDownProvider3" />
<ig:EditingColumnSetting ColumnKey="SubClin" EditorID="DropDownProvider4" />
</ColumnSettings>
<EditModeActions MouseClick="Single" />
<CellEditingClientEvents EnteredEditMode="loadDropDownItems"></CellEditingClientEvents>
</ig:CellEditing>
<ig:RowAdding Alignment="Top">
<AddNewRowClientEvents EnteredEditMode="loadDropDownItems" />
<ig:RowAddingColumnSetting ColumnKey="ContractID" EditorID="DropDownProvider1" />
<ig:RowAddingColumnSetting ColumnKey="ProjectNr" EditorID="DropDownProvider2" />
<ig:RowAddingColumnSetting ColumnKey="Clin" EditorID="DropDownProvider3" />
<ig:RowAddingColumnSetting ColumnKey="SubClin" EditorID="DropDownProvider4" />
<AddNewRowClientEvents EnteredEditMode="loadDropDownItems"></AddNewRowClientEvents>
</ig:RowAdding>
<ig:RowDeleting />
</Behaviors>
</ig:EditingCore>
<ig:Selection CellClickAction="Cell" RowSelectType="Single" >
<AutoPostBackFlags CellSelectionChanged="True" RowSelectionChanged="true" />
</ig:Selection>
<ig:RowSelectors>
</ig:RowSelectors>
<ig:Activation>
<ActivationClientEvents />
</ig:Activation>
<EditorProviders>
<ig:DropDownProvider ID="DropDownProvider1">
<EditorControl ID="EditorControl1" runat="server" ClientIDMode="Predictable" DropDownContainerMaxHeight="200px"
EnableAnimations="False" EnableDropDownAsChild="False" DropDownContainerWidth="600px" >
<Items>
<ig:DropDownItem Key="ContractID" >
</ig:DropDownItem>
</Items>
<ItemTemplate>
<ig:WebDataGrid ID="WebDataGrid4" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource2" Height="350px" Width="500px">
<ig:Selection CellClickAction="Row" RowSelectType="Single" SelectionClientEvents-RowSelectionChanged="WebDataGrid4_RowSelectionChanged">
</ig:WebDataGrid>
</ItemTemplate>
</EditorControl>
</ig:DropDownProvider>
<ig:DropDownProvider ID="DropDownProvider2" >
<EditorControl ID="EditorControl2" runat="server" ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" OnItemsRequested="eProvider_ItemsRequested" EnableAnimations="False" EnableDropDownAsChild="False" DropDownContainerWidth="400px" AutoPostBack="False">
<ig:DropDownItem Key="ProjectNr" >
<ig:DropDownProvider ID="DropDownProvider3" >
<EditorControl ID="EditorControl3" runat="server" ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" OnItemsRequested="eProvider_ItemsRequested" EnableAnimations="False" EnableDropDownAsChild="False" DropDownContainerWidth="200px" >
<ig:DropDownItem Key="Clin" >
<ig:DropDownProvider ID="DropDownProvider4" >
<EditorControl ID="EditorControl4" runat="server" ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" OnItemsRequested="eProvider_ItemsRequested" EnableAnimations="False" EnableDropDownAsChild="False" DropDownContainerWidth="200px" >
<ig:DropDownItem Key="SubClin">
</EditorProviders>
</tabs>
<ContentPane AutoSize="True">
</ContentPane>
</ig:WebTab>
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="200px" Width="670px" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyFields="EmployeeSeq" StyleSetName="Default" EnableAjax="False" >
<ig:BoundDataField DataFieldName="EmployeeSeq" Key="EmployeeSeq" Hidden="True"
Width="100px" DataType="System.Int32">
<ig:BoundDataField DataFieldName="Employee Number" Key="Employee Number"
Width="150px" DataType="System.String">
<Header Text="Employee Number" />
<ig:BoundDataField DataFieldName="Last Name" Key="Last Name" Width="100px" DataType="System.String">
<Header Text="Last Name" />
<ig:BoundDataField DataFieldName="First Name" Key="First Name" Width="100px" DataType="System.String">
<Header Text="First Name" />
<ig:BoundDataField DataFieldName="MI" Key="MI" Width="30px" DataType="System.String">
<Header Text="MI" />
<ig:BoundDataField DataFieldName="Suffix Name" Key="Suffix Name" Width="150px" DataType="System.String">
<Header Text="Suffix Name" />
<ig:Selection CellClickAction="Row" RowSelectType="Single">
<AutoPostBackFlags RowSelectionChanged="True" />
<ig:Filtering Visibility="Visible" FilterButtonCssClass="hiddenCss">
<ig:ColumnFilteringSetting ColumnKey="Employee Number" Enabled="False" />
<ig:ColumnFilteringSetting ColumnKey="First Name" Enabled="False" />
<ig:ColumnFilteringSetting ColumnKey="Last Name" />
<ig:ColumnFilteringSetting ColumnKey="EmployeeSeq" Enabled="False" />
<ig:ColumnFilteringSetting ColumnKey="MI" Enabled="False" />
<ig:ColumnFilteringSetting ColumnKey="Suffix Name" Enabled="False" />
<ColumnFilters>
<ig:ColumnFilter ColumnKey="Last Name">
<ConditionWrapper>
<ig:RuleTextNode Rule="BeginsWith" />
</ConditionWrapper>
</ig:ColumnFilter>
</ColumnFilters>
</ig:Filtering>
<ig:Sorting>
<ig:SortingColumnSetting ColumnKey="Employee Number" Sortable="true" />
<ig:SortingColumnSetting ColumnKey="First Name" Sortable="true" />
<ig:SortingColumnSetting ColumnKey="Last Name" Sortable="true" />
<ig:SortingColumnSetting ColumnKey="EmployeeSeq" Sortable="false" />
<ig:SortingColumnSetting ColumnKey="MI" Sortable="false" />
<ig:SortingColumnSetting ColumnKey="Suffix Name" Sortable="false" />
</ig:Sorting>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="WebDataGrid1" EventName="RowSelectionChanged" />
</Triggers>
</asp:UpdatePanel>
Private Sub WebDataGrid1_RowSelectionChanged(sender As Object, e As Infragistics.Web.UI.GridControls.SelectedRowEventArgs) Handles WebDataGrid1.RowSelectionChanged
Dim selectedRows As SelectedRowCollection = WebDataGrid1.Behaviors.Selection.SelectedRows
For Each row As GridRecord In selectedRows
Session(
"EmployeeSeq") = row.Items.Item(0).Text
TextBox1.Text = row.Items.Item(0).Text
Dim dbEmployees = (From employees In dbHumanResources.Employees _
Where employees.EmployeeSeq = Session("EmployeeSeq").ToString _
Select employees).ToList
If dbEmployees.Count > 0 Then
TextBox2.Text = dbEmployees(0).Emp_Number
TextBox3.Text = dbEmployees(0).LastName
TextBox4.Text = dbEmployees(0).FirstName
End If
Next
End Sub
It has been a while since our last communication. Do you still need assistance with this issue?
If so please notify me.
It would be very helpfull if you could provide an isolated sample with your issue represented.
Let me know once you get back to this issue.
Thanks Maya. I got sidetracked on another project and have not had a chance to get back to this. I don't think I explained my problem very well. I actually think the issue has something to do with using an UpdatePanel with the WebDataGrid. Get back with you on this soon. Thanks again.
I'm just following up to see if you've managed to resolve your issue.If you still have any concerns or questions I will be glad to help.
I couldn’t reproduce the same misbehavior but I could provide an alternative approach that might work for you. Instead of filling the TextBoxes from the code behind you could do it on the client side. I tested this and it seems to work as expected.
If I understood your scenario correctly you want to populate the textboxes from the selection made from the WebDataGrid which is inside the DropDown provider. Regardless the approach could be altered to any webdatagrid on your page.
The idea is simple. You acess the texboxes from the Initialize event of the WebTab:
function WebTab1_Initialize(sender, eventArgs) {
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.EventArgs"></param>
textBox1 = sender.get_tabs()[0].findChild("TextBox1");
textBox2 = sender.get_tabs()[0].findChild("TextBox2");
textBox3 = sender.get_tabs()[0].findChild("TextBox3");
}
Then from the RowSelectionChanged event of the grid you want to take the data from you get the cells and their text and set it to the textboxes:
function WebDataGrid4_Selection_RowSelectionChanged(sender, e) {
///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.RowSelectionChangedEventArgs"></param>
//Add code to handle your event here.
//Gets the selected rows collection of the WebDataGrid
var selectedRows = e.getSelectedRows();
//Gets the row that is selected from the selected rows collection
var row = selectedRows.getItem(0);
//Gets the second cell object in the row
//In this case it is ProductName cell
var cell1 = row.get_cell(1);
var cell2 = row.get_cell(2);
var cell3 = row.get_cell(3);
//Gets the text in the cell
var text1 = cell1.get_text();
var text2 = cell2.get_text();
var text3 = cell3.get_text();
textBox1.value = text1;
textBox2.value = text2;
textBox3.value = text3;
I’m also attaching a sample for your reference( uses Nwind database).
If this approach doesn’t work for you please notify me so that I can further research this.
Thank you for your patience while I was working on this.