Databases
StackOverflow2013
Postsdbo
POLoading icon when data is loading in backgrid.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading icon when data is loading in backgrid.js
    primarykey
    data
    text
    <p>hi i have some heavy data. when my grid loads data it is showing nothing and suddenly it show whole data ..i am not getting how can i put loading icon on screen?</p> <p>if possible please provide a fiddle. right now i my code is this:-</p> <pre><code>var Territory = Backbone.Model.extend({}); var PageableTerritories = Backbone.PageableCollection.extend({ model: Territory, url: urlvariable, state: { pageSize: 15 }, mode: "client" // page entirely on the client side }); var TitledUriCell = Backgrid.TitledUriCell = Backgrid.UriCell.extend({ /** @property */ className: "titled-uri-cell", render: function() { this.$el.empty(); var formattedValue = this.formatter.fromRaw(this.model.get(this.column.get("name"))); var measureVal = this.formatter.fromRaw(this.model.attributes.MeasureCategory); this.$el.append($("&lt;a href='/inpatient_detail/" + formattedValue + "''&gt; Delete&lt;/a&gt;" ).text(formattedValue)); this.delegateEvents(); return this; } }); var pageableTerritories = new PageableTerritories(); var columns = [{ // name is a required parameter, but you don't really want one on a select all column name: "PatientId", // Backgrid.Extension.SelectRowCell lets you select individual rows cell: "select-row", // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page headerCell: "select-all", },{ name: "FirstName", label: "First Name", editable: false, // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up }, { name: "LastName", label: "Last Name", editable: false, cell: "string" // An integer cell is a number cell that displays humanized integers }, { name: "PatientId", label: "Patient Id", editable: false, cell: "titledUri" // A cell type for floating point value, defaults to have a precision 2 decimal numbers }, { name: "RoomNumber", label: "Room Number", editable: false, cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers }, { name: "AdmissionDate", label: "Admission Date", editable: false, cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers }, { name: "DischargeDate", label: "Discharge Date", editable: false, cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers }, { name: "MeasureCategory", label: "MeasureCategory", editable: false, cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers }]; // Set up a grid to use the pageable collection var pageableGrid = new Backgrid.Grid({ columns: columns, collection: pageableTerritories }); // var selectedModels = grid.getSelectedModels(); // backgriCollections.remove(selectedModels); // Render the grid $("#grid").empty(); var $example2 = $("#grid"); $example2.append(pageableGrid.render().$el) // Initialize the paginator var paginator = new Backgrid.Extension.Paginator({ collection: pageableTerritories }); // Render the paginator $example2.append(paginator.render().$el); // Initialize a client-side filter to filter on the client // mode pageable collection's cache. var filter = new Backgrid.Extension.ClientSideFilter({ collection: pageableTerritories.fullCollection, placeholder: "Search in Grid on First Name", fields: ['FirstName'] }); // Render the filter $example2.prepend(filter.render().$el); // Add some space to the filter and move it to the right filter.$el.css({float: "right", margin: "20px"}); // Fetch some data pageableTerritories.fetch({reset: true}); $example2.append( '&lt;div class = "newb"&gt;&lt;table&gt;&lt;tr&gt;&lt;%= button_tag "Add a Patient",:class=&gt;"btn btn-primary"%&gt;&lt;%= form_tag("/PatientManagement/CurrentInpatient2", method: "post",:id=&gt;"testform") do %&gt;&lt;%= text_field_tag "patientIdsDel",nil,:type=&gt;"hidden" %&gt;&lt;%= text_field_tag "hospitalId",current_user.hospital.name,:type=&gt;"hidden"%&gt;&lt;%= text_field_tag "processType","inpatient",:type=&gt;"hidden"%&gt;&lt;%= submit_tag "Delete Selected",:id=&gt;"2",:onclick =&gt; "return del()",:class=&gt;"btn btn-primary"%&gt;&lt;%end%&gt;&amp;nbsp;&amp;nbsp;&lt;%= form_tag("/PatientManagement/CurrentInpatient2", method: "post") do %&gt;&lt;%= text_field_tag "patientIds",nil,:type=&gt;"hidden" %&gt;&lt;%= text_field_tag "hospitalId",current_user.hospital.name,:type=&gt;"hidden"%&gt;&lt;%= text_field_tag "processType","inpatient",:type=&gt;"hidden"%&gt;&lt;%= submit_tag 'Export Selected',:onclick =&gt; "return ex()",:class=&gt;"btn btn-primary" %&gt;&lt;%end%&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;' ); pageableTerritories.on("backgrid:selected", function (model, selected) { var size = Object.size(arr); var abc=pageableTerritories.state.totalRecords; if(selected==true){ arr[model.attributes.PatientId] = "'"+model.attributes.MeasureCategory+"'"; size=size+1 } else if(selected==false){ delete arr[model.attributes.PatientId]; size=size-1 } $("#aa").empty(); $("#aa").append("&lt;div style = 'float:left;margin-top: -21px;margin-left: 50px; '&gt;&lt;b&gt;"+size+" Selected out of " + abc+ " Records Found &lt;/b&gt;&lt;/div&gt;"); // $example2.append('&lt;h1&gt;hello i am here&lt;/h1&gt;'); }); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAnuj Garg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COIs CSS possible?
      singulars
      1. POLoading icon when data is loading in backgrid.js
      1. USShiju K Babu
    2. COyes i can add css but how can i do it, can you give me any kind of hint actully i am new to it..
      singulars
      1. POLoading icon when data is loading in backgrid.js
      1. USAnuj Garg
    3. COI have added the answer
      singulars
      1. POLoading icon when data is loading in backgrid.js
      1. USShiju K Babu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload