I'm using Ajax tabcontainer with jqGrid.
I have two tabs.
jqGrid of tab1 is loaded when the aspx page is loaded.
For tab2, the button click event will change the activetabindex to 1, and then load the data
But now when I click back on tab1, the tab opens but the jqGrid disappears.
Is there any solution to get rid of this problem
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="This is first tab">
<ContentTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="LinkButton4"runat="server"
Text='Load data for tab2'
OnClick="btnLoadDataForTab2_Click"/>
</td>
</tr>
<tr>
<td>
<table id="tblTab1"></table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="This is second tab">
<ContentTemplate>
<table>
<tr>
<td>
<table id="tblTab2"></table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
You have to initialize JQGrid again on your activeTabChange event.
Also, make autoPostBack= true of TabContainer.
I've been stack with a problem in Thymeleaf, that is, looping values into a textarea. My controller provides me with a list/collection via the model binding:
model.addAttribute("response", getDefectMessage.getMessage());
getDefectMessage.getMessage() returns the following (please see image below), in which I only need description in this case.
In my HTML, I am able to display the index and count of the provided data retrieved from the model (please see sample code below).
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res[__${stat.index}__].description}"></textarea>
</td>
</tr>
</tbody>
Having said that, I get a SpringEL expression exception when rendering (please see image below).
Exception evaluating SpringEL expression: "res[0].description" (defect_details:24)
Been a newbie in Thymeleaf, may I please get assistance in how I can go about displaying values from a list into a textarea. (Thanks in advance).
res represents a DefectDto. So you access it fields like res.defectDescription
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res.defectDescription}">
</textarea>
</td>
</tr>
</tbody>
Or if DefectDto has a method getDescription() then you can do
<tbody>
<tr th:each="res, stat : *{response}">
<td th:text="${stat.count}" />
<td>
<textarea type="text" th:text="${res.description}">
</textarea>
</td>
</tr>
</tbody>
Maybe the title is more confusing than the problem it self. Here's my situation, with Thymeleaf I show a table with a list of clients. It shows Name, LastName, a button to delete it and a checkbox to display it's state (if the user is active or inactive)
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : ${clientList}">
<td th:text="${client.name}"></td>
<td th:text="${client.lastName}"></td>
<td>
<a th:href="#{/delete_client/} + ${client.id}" class="btn btn-danger">Delete</a>
</td>
<td>
<input type="checkbox" name="my-checkbox" th:checked="${client.state} ? 'checked'">
</td>
</tr>
</tbody>
So far, no problem. But what I don't know how to do is communcate the controller when the user click the checkboxes, in order to disable or enable that particular client.
Something like what the button does to delete the client, but to change it's state.
I was told to use AJAX, but don't know how.
Thank you!
You can avoid ajax. For deleting-alike effect you can apply following steps to the td element containing a checkbox:
wrap up the checkbox in the form tag
provide the proper action attribute in the form. The action is an endpoint which handles updating of a client's state (similarily to/delete_client/)
provide onclick="submit();" attribute in the checkbox, which will trigger mentioned endpoint when the user clicks it
E.g.
<td>
<form th:action="#{/switch_client_state/} + ${client.id}">
<input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="${client.state} ? 'checked'">
</form>
</td>
i am working on a project where a clerk like professional will make/edit classes time table for educational institute.
so in a day-period cell there are many drop-downs for selecting teacher, classroom/lab, batch of students, subject etc.
and this whole combination of values can be repeated many places in the grid.
so i want to post a single value combining all these 4-5 values through POST data in FORM for that cell location.
what approach should i use?
EDIT:
Oh! Yes, i am actually using PHP and angularjs and this is sample code in html
<table border="1" width="90%" height="90%" style="margin:10px">
<thead>
<tr>
<td>
Day
</td>
<td ng-repeat="hour in chours">
{{hour.name}}
<br>
{{hour.stime}}--{{hour.etime}}
<br>
<input type="checkbox" ng-model="hour.noclass" /> No class {{hour.noclass}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="day in weekdays">
<td>
{{day.name}}
</td>
<td ng-repeat="hour in day.hours">
<div ng-show="hour.noclass=='false'" name="cell[{{day.name}}][{{hour.name}}][]">
<select name="cars">
<option ng-model="dd" ng-repeat="sub in subjects">{{sub.name}}</option>
</select>
{{dd}}
</div>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
and this is in js file
var App = angular.module('tteditApp',[]);
App.controller('editCtrl', function($scope){
$scope.chours=[
{'name':'1','stime':'800','etime':'855','noclass':'true'},
{'name':'2','stime':'855','etime':'950','noclass':'true'},
{'name':'3','stime':'800','etime':'855','noclass':'false'},
{'name':'4','stime':'800','etime':'855','noclass':'false'},
{'name':'5','stime':'800','etime':'855','noclass':'false'},
{'name':'6','stime':'800','etime':'855','noclass':'false'},
{'name':'7','stime':'800','etime':'855','noclass':'false'},
{'name':'8','stime':'800','etime':'855','noclass':'false'},
{'name':'9','stime':'800','etime':'855','noclass':'false'},
{'name':'10','stime':'800','etime':'855','noclass':'false'}];
$scope.subjects=[{'name':'CLOUD'},{'name':'CC'},{'name':'ISS'},{'name':'DCT'},{'name':'DMW'},{'name':'VLSI'},{'name':'SEMINAR'},{'name':'PROJECT'},{'name':'WEB DEV'}];
$scope.weekdays=[{'name':'Monday','hours':$scope.chours},{'name':'Tuesday','hours':$scope.chours},
{'name':'Wednesday','hours':$scope.chours},{'name':'Thursday','hours':$scope.chours},{'name':'Friday','hours':$scope.chours}
,{'name':'Saturday','hours':$scope.chours}];
});
I have a very nice grid with Create, Retrieve, Edit and Delete functionality. I am using knockout.js on the client and WebAPI on the back end.
I would like to extend this to a number of different objects. Essentially I have a List<T> where T is an MVC view model and the knockout view and view model should be able to work out what they should look like based on T.
Does anyone know of a simple way to display any viewmodel (with specific controls for editing based on the viewmodel itself - eg datepicker for dates, input for string, drop downs etc) in a grid format and have generic CRUD functions.
Below is an example of the exiting HTML I am using (for a specific object):
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Value Date</th>
<th>Position Date</th>
<th>Book</th>
<th>Currency</th>
<th>Currency Base</th>
<th>Amount1</th>
<th>Amount2</th>
<th>Position Type</th>
<th style="width: 100px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>
and the templates look like this:
<script id="itemsTmpl" type="text/html">
<tr>
<td data-bind="text: valueDate.formattedDate"></td>
<td data-bind="text: positionDate.formattedDate"></td>
<td data-bind="text: book"></td>
<td data-bind="text: currency"></td>
<td data-bind="text: currencyBase"></td>
<td data-bind="text: amount1"></td>
<td data-bind="text: amount2"></td>
<td data-bind="text: positionType"></td>
<td class="buttons">
<a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
<a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
</td>
</tr>
</script>
<script id="editTmpl" type="text/html">
<tr>
<td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
<td><input data-bind="value: book"/></td>
<td><input data-bind="value: currency"/></td>
<td><input data-bind="value: currencyBase"/></td>
<td><input data-bind="value: amount1"/></td>
<td><input data-bind="value: amount2"/></td>
<td><input data-bind="value: positionType"/></td>
<td class="buttons">
<a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
<a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
I would like the View as well as the View Model to be generic and not "hard-coded" as above. I am sure someone else must have done something like this.
One solution would be that:
AJAX call gets a list of JSON viewmodels
If list is empty then do not display anything
If list has items, pick first item and go through properties
Start constructing the view on the client by looping through proprties
Append the string as a DOM element to the main DIV
Wireup knockout
There are problems with this approach. What if a property is null for the first object but exists in another? If so we do not setup the element for it.
A better option is to use content negotiation to get a dedicated template:
So GET /api/customers will return customers but if you request text/knockout-template+html then you get back a knockout template as string and then you append to DIV and wireup knockout. So server can generate template using reflection or customise for some models.